* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: #f4f7fb;
    color: #172033;
}

a {
    color: #3f6ee8;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #315bdc, #6e8eff);
}

.auth-card {
    width: min(430px, calc(100% - 28px));
    background: #fff;
    padding: 32px;
    border-radius: 22px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .18);
}

.auth-card h1 {
    margin: 0 0 8px;
}

.muted {
    color: #738096;
}

.small {
    font-size: 13px;
}

.field-hint {
    margin: -4px 0 4px;
    font-size: 13px;
    font-weight: 700;
    min-height: 18px;
}

.field-hint.is-success {
    color: #14853d;
}

.field-hint.is-error {
    color: #c53030;
}

.field-hint.is-muted {
    color: #738096;
}

.password-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #4b5565;
}

.auth-form .password-toggle input {
    width: auto;
}

.auth-form button:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.auth-form {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.auth-form label {
    font-weight: 700;
    font-size: 14px;
}

.auth-form input,
.message-form input {
    width: 100%;
    border: 1px solid #dbe2ef;
    border-radius: 14px;
    padding: 14px 16px;
    outline: none;
}

.auth-form input:focus,
.message-form input:focus {
    border-color: #4f75e8;
    box-shadow: 0 0 0 4px rgba(79, 117, 232, .12);
}

.auth-form button,
.message-form button,
.admin-card button,
.section-title-row button {
    border: 0;
    background: #4169e1;
    color: #fff;
    border-radius: 14px;
    padding: 13px 18px;
    font-weight: 800;
    cursor: pointer;
}

.auth-links {
    text-align: center;
}

.alert {
    padding: 12px 14px;
    border-radius: 14px;
    margin: 14px 0;
}

.alert ul {
    margin: 0;
    padding-left: 20px;
}

.alert-error {
    background: #ffe9e9;
    color: #a22121;
}

.alert-success {
    background: #e7f8ee;
    color: #176339;
}

.admin-box {
    background: #f3f6ff;
    border: 1px dashed #9fb4ff;
    padding: 14px;
    border-radius: 14px;
    margin-top: 16px;
    line-height: 1.65;
}

.app-shell {
    display: grid;
    grid-template-columns: 330px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: #fff;
    border-right: 1px solid #e2e8f0;
    padding: 22px;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.sidebar h1 {
    margin: 0 0 4px;
    font-size: 24px;
}

.logout-link,
.admin-link {
    display: inline-block;
    background: #edf2ff;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 800;
}

.admin-link {
    width: 100%;
    text-align: center;
    margin-bottom: 14px;
}

.room-list,
.user-list {
    display: grid;
    gap: 10px;
}

.room-item,
.user-item {
    display: flex;
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 14px;
    background: transparent;
    cursor: pointer;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.room-item.active,
.user-item.active {
    background: #eef4ff;
    color: #2f5fe4;
}

.sidebar-title {
    margin: 28px 0 12px;
    color: #6f7b91;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #4169e1, #80a1ff);
    color: #fff;
    font-weight: 900;
}

.user-meta {
    display: grid;
    gap: 4px;
    flex: 1;
}

.user-meta small {
    color: #7d8797;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c1cad8;
}

.status-dot.online {
    background: #35c879;
}

.chat-panel {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
}

.chat-header {
    background: #fff;
    padding: 24px 30px;
    border-bottom: 1px solid #e2e8f0;
}

.chat-header h2 {
    margin: 0 0 6px;
}

.messages {
    padding: 28px 30px;
    overflow-y: auto;
    max-height: calc(100vh - 170px);
}

.message-row {
    display: flex;
    margin-bottom: 18px;
}

.message-row.mine {
    justify-content: flex-end;
}

.message-bubble {
    max-width: min(620px, 85%);
    background: #fff;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(20, 35, 70, .06);
}

.message-row.mine .message-bubble {
    background: #eaf1ff;
}

.message-top {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    color: #4169e1;
    font-size: 13px;
    margin-bottom: 8px;
}

.message-top time {
    color: #8791a2;
    white-space: nowrap;
}

.message-text {
    line-height: 1.5;
    word-break: break-word;
}

.message-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    padding: 20px 30px;
}

.empty-state {
    text-align: center;
    color: #7d8797;
    padding: 70px 20px;
}

.admin-page {
    background: #f4f7fb;
}

.admin-layout {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 22px;
}

.admin-header h1 {
    margin: 0 0 6px;
}

.admin-header nav {
    display: flex;
    gap: 12px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.stat-card,
.admin-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 12px 35px rgba(20, 35, 70, .06);
}

.stat-card span {
    color: #6f7b91;
}

.stat-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.admin-card {
    margin-bottom: 18px;
}

.admin-card h2 {
    margin: 0 0 16px;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    border-bottom: 1px solid #e7edf6;
    text-align: left;
    vertical-align: middle;
}

th {
    color: #647087;
    font-size: 13px;
    text-transform: uppercase;
}

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 5px 9px;
    background: #edf2ff;
    color: #365bd6;
    font-weight: 800;
    font-size: 12px;
}

.badge.good {
    background: #e7f8ee;
    color: #176339;
}

.badge.bad {
    background: #ffe9e9;
    color: #a22121;
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.actions form {
    margin: 0;
}

button.small {
    padding: 8px 10px;
    border-radius: 10px;
}

button.danger,
.danger {
    background: #e13f55 !important;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

@media (max-width: 820px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .message-form {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-header,
    .section-title-row {
        align-items: stretch;
        flex-direction: column;
    }
}


.admin-layout.narrow {
    max-width: 760px;
}

.password-card {
    max-width: 620px;
}


button.warning,
.warning {
    background: #f59e0b !important;
}

.badge.role-admin {
    background: #fff1f2;
    color: #be123c;
}

.badge.role-moderator {
    background: #fff7ed;
    color: #c2410c;
}

.badge.role-user {
    background: #edf2ff;
    color: #365bd6;
}


.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.private-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hidden {
    display: none !important;
}

.outline-btn,
.danger-btn {
    border: 0;
    border-radius: 12px;
    padding: 10px 13px;
    font-weight: 800;
    cursor: pointer;
}

.outline-btn {
    background: #edf2ff;
    color: #365bd6;
}

.danger-btn {
    background: #e13f55;
    color: #fff;
}

.message-form input:disabled {
    background: #eef2f7;
    cursor: not-allowed;
}


/* Admin left sidebar layout */
.admin-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e7edf6;
}

.admin-logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #4169e1, #80a1ff);
    color: #fff;
    font-weight: 900;
}

.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand small {
    color: #738096;
    margin-top: 3px;
}

.admin-side-nav {
    display: grid;
    gap: 8px;
}

.admin-side-nav a {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    color: #172033;
    font-weight: 800;
}

.admin-side-nav a:hover {
    background: #eef4ff;
    color: #2f5fe4;
}

.admin-side-nav .logout-side-link {
    margin-top: 14px;
    color: #e13f55;
    background: #fff1f2;
}

.admin-layout {
    width: 100%;
}

.admin-card {
    scroll-margin-top: 24px;
}

.admin-card#reports,
.admin-card#users,
.admin-card#messages {
    border: 1px solid #e7edf6;
}

@media (max-width: 920px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: relative;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .admin-side-nav {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}


.admin-side-nav a.active {
    background: #eef4ff;
    color: #2f5fe4;
}

.admin-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.admin-page-card {
    display: grid;
    gap: 8px;
    background: #f8fbff;
    border: 1px solid #e7edf6;
    border-radius: 18px;
    padding: 18px;
    color: #172033;
}

.admin-page-card:hover {
    background: #eef4ff;
    color: #2f5fe4;
}

.admin-page-card strong {
    font-size: 18px;
}

.admin-page-card span {
    color: #738096;
    line-height: 1.45;
}

.stat-link {
    color: #172033;
    text-decoration: none;
}

.stat-link:hover {
    transform: translateY(-1px);
}


.inline-admin-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
}

.inline-admin-form input {
    border: 1px solid #dbe2ef;
    border-radius: 14px;
    padding: 13px 15px;
    outline: none;
}

.inline-admin-form input:focus {
    border-color: #4f75e8;
    box-shadow: 0 0 0 4px rgba(79, 117, 232, .12);
}

.inline-admin-form button {
    border: 0;
    background: #4169e1;
    color: #fff;
    border-radius: 14px;
    padding: 13px 18px;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 720px) {
    .inline-admin-form {
        grid-template-columns: 1fr;
    }
}


/* Modern popup/toast UI */
.toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    display: grid;
    gap: 12px;
    z-index: 9999;
    width: min(380px, calc(100vw - 36px));
}

.modern-toast {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #e7edf6;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 20px 70px rgba(17, 24, 39, .16);
    animation: toastIn .22s ease-out;
    backdrop-filter: blur(12px);
}

.modern-toast.success {
    border-left: 5px solid #22c55e;
}

.modern-toast.error {
    border-left: 5px solid #ef4444;
}

.modern-toast.info {
    border-left: 5px solid #4169e1;
}

.modern-toast.leaving {
    animation: toastOut .18s ease-in forwards;
}

.toast-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eef4ff;
    color: #2f5fe4;
    font-weight: 900;
}

.modern-toast.success .toast-icon {
    background: #e7f8ee;
    color: #176339;
}

.modern-toast.error .toast-icon {
    background: #ffe9e9;
    color: #a22121;
}

.toast-message {
    color: #172033;
    line-height: 1.35;
    font-weight: 700;
}

.toast-close {
    border: 0;
    background: transparent;
    color: #738096;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.modern-modal-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .48);
    z-index: 10000;
    animation: fadeIn .16s ease-out;
    backdrop-filter: blur(8px);
}

.modern-modal-overlay.leaving {
    animation: fadeOut .16s ease-in forwards;
}

.modern-modal {
    width: min(440px, 100%);
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .32);
    animation: modalIn .18s ease-out;
}

.modern-modal-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #eef4ff;
    color: #2f5fe4;
    font-weight: 900;
    font-size: 24px;
    margin-bottom: 14px;
}

.modern-modal-icon.danger {
    background: #ffe9e9;
    color: #a22121;
}

.modern-modal h3 {
    margin: 0 0 8px;
    font-size: 22px;
}

.modern-modal p {
    margin: 0 0 18px;
    color: #647087;
    line-height: 1.5;
}

.modern-modal-input {
    width: 100%;
    resize: vertical;
    border: 1px solid #dbe2ef;
    border-radius: 16px;
    padding: 13px 15px;
    outline: none;
    margin-bottom: 18px;
    font: inherit;
}

.modern-modal-input:focus {
    border-color: #4f75e8;
    box-shadow: 0 0 0 4px rgba(79, 117, 232, .12);
}

.modern-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modern-modal-actions button {
    border: 0;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 900;
    cursor: pointer;
}

.modal-cancel {
    background: #eef2f7;
    color: #172033;
}

.modal-confirm {
    background: #4169e1;
    color: #fff;
}

.modal-confirm.danger {
    background: #e13f55;
}

.alert-inline-hidden {
    display: none !important;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
    .toast-stack {
        top: 12px;
        right: 12px;
        width: calc(100vw - 24px);
    }

    .modern-modal-actions {
        display: grid;
    }
}


/* Private chat emoji picker */
.message-form {
    position: relative;
}

.emoji-button {
    border: 0;
    background: #eef4ff;
    color: #172033;
    border-radius: 14px;
    padding: 0 14px;
    font-size: 22px;
    cursor: pointer;
    min-height: 48px;
}

.emoji-button:hover {
    background: #dfe9ff;
}

.emoji-picker {
    position: absolute;
    left: 30px;
    bottom: 82px;
    width: min(330px, calc(100vw - 60px));
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    background: #fff;
    border: 1px solid #e7edf6;
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .18);
    z-index: 40;
}

.emoji-picker button {
    border: 0;
    background: #f4f7fb;
    border-radius: 12px;
    padding: 9px;
    font-size: 22px;
    cursor: pointer;
}

.emoji-picker button:hover {
    background: #eef4ff;
    transform: translateY(-1px);
}

@media (min-width: 821px) {
    .message-form {
        grid-template-columns: auto 1fr auto;
    }
}

@media (max-width: 820px) {
    .emoji-button {
        width: 100%;
    }

    .emoji-picker {
        left: 20px;
        bottom: 146px;
    }
}


/* Fix room send button width */
.message-form {
    grid-template-columns: 1fr auto !important;
}

.message-form.private-mode {
    grid-template-columns: auto 1fr auto !important;
}

.message-form > button[type="submit"] {
    width: auto;
    min-width: 120px;
    white-space: nowrap;
}

.message-form .emoji-button.hidden {
    display: none !important;
}

@media (max-width: 820px) {
    .message-form {
        grid-template-columns: 1fr auto !important;
    }

    .message-form.private-mode {
        grid-template-columns: auto 1fr auto !important;
    }

    .message-form > button[type="submit"] {
        min-width: 96px;
    }

    .emoji-button {
        width: auto !important;
    }
}


/* WebRTC private audio/video calls */
.call-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.call-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .54);
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 9500;
    backdrop-filter: blur(8px);
}

.call-card {
    width: min(760px, 100%);
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 30px 100px rgba(15, 23, 42, .32);
    overflow: hidden;
}

.call-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid #e7edf6;
}

.call-header h3 {
    margin: 0 0 4px;
}

.call-header p {
    margin: 0;
    color: #738096;
}

.call-end-btn {
    border: 0;
    background: #e13f55;
    color: #fff;
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 900;
    cursor: pointer;
}

.call-video-area {
    position: relative;
    background: #0f172a;
    min-height: 420px;
    display: grid;
    place-items: center;
}

#remoteVideo {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    background: #0f172a;
}

#localVideo {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 180px;
    height: 120px;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 18px;
    background: #172033;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

.call-audio-area {
    min-height: 320px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #eef4ff, #ffffff);
    text-align: center;
    padding: 40px;
}

.call-audio-avatar {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background: #4169e1;
    color: #fff;
    font-size: 42px;
    box-shadow: 0 18px 60px rgba(65, 105, 225, .28);
}

.call-audio-area strong {
    font-size: 24px;
}

.call-audio-area span {
    color: #738096;
}

@media (max-width: 700px) {
    .private-actions {
        justify-content: flex-start;
    }

    .call-video-area {
        min-height: 320px;
    }

    #localVideo {
        width: 120px;
        height: 86px;
    }

    .call-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .call-end-btn {
        width: 100%;
    }
}


.call-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.3);
}


/* Webcam-first video call fixes */
.call-video-area::before {
    content: "Waiting for remote video...";
    position: absolute;
    color: rgba(255,255,255,.7);
    font-weight: 800;
    z-index: 0;
}

#remoteVideo {
    position: relative;
    z-index: 1;
}

#localVideo {
    z-index: 2;
}

#localVideo[srcObject] {
    background: #111827;
}


/* Chat message avatars */
.message-row {
    align-items: flex-end;
    gap: 10px;
}

.message-row.mine {
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .03em;
    box-shadow: 0 8px 24px rgba(20, 35, 70, .12);
    user-select: none;
}

.avatar-color-0 {
    background: linear-gradient(135deg, #4169e1, #80a1ff);
}

.avatar-color-1 {
    background: linear-gradient(135deg, #7c3aed, #c084fc);
}

.avatar-color-2 {
    background: linear-gradient(135deg, #0891b2, #67e8f9);
}

.avatar-color-3 {
    background: linear-gradient(135deg, #16a34a, #86efac);
}

.avatar-color-4 {
    background: linear-gradient(135deg, #ea580c, #fdba74);
}

.avatar-color-5 {
    background: linear-gradient(135deg, #e11d48, #fda4af);
}

.message-row.mine .chat-avatar {
    box-shadow: 0 8px 24px rgba(65, 105, 225, .18);
}

@media (max-width: 560px) {
    .chat-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 12px;
    }

    .message-bubble {
        max-width: calc(100% - 48px);
    }
}


/* Full upgrade additions */
.top-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


.typing-indicator {
    height: 24px;
    padding: 4px 30px;
    color: #738096;
    font-size: 13px;
}

.attachment-input {
    display: none;
}

.message-attachment {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 10px;
    background: #f3f6ff;
    border-radius: 10px;
    font-weight: 800;
}

.message-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.message-actions button {
    border: 0;
    background: #eef2f7;
    border-radius: 9px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}

.edited-label {
    color: #94a3b8;
    font-size: 11px;
}

.deleted-message .message-text {
    color: #94a3b8;
    font-style: italic;
}

.chat-avatar-img,
.sidebar-avatar-img {
    object-fit: cover;
}

.chat-avatar-img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(20, 35, 70, .12);
}

.profile-preview {
    display: flex;
    justify-content: center;
}

.profile-preview img,
.profile-initial {
    width: 110px;
    height: 110px;
    border-radius: 32px;
    object-fit: cover;
}

.profile-initial {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4169e1, #80a1ff);
    color: #fff;
    font-size: 42px;
    font-weight: 900;
}

.auth-form textarea,
.auth-form select {
    width: 100%;
    border: 1px solid #dbe2ef;
    border-radius: 14px;
    padding: 14px 16px;
    outline: none;
    font: inherit;
}

.room-form {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}


/* Final chat UI layout fix */
.app-shell {
    grid-template-columns: 330px minmax(0, 1fr) !important;
}

.sidebar {
    overflow-y: auto;
}

.sidebar-header {
    align-items: flex-start !important;
}

.top-links {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.top-links .logout-link {
    min-width: 96px;
    text-align: center;
}

.room-list {
    margin-bottom: 24px;
}

.chat-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.chat-header > div:first-child {
    min-width: 0;
}


.fixed-message-form,
.message-form.fixed-message-form,
.message-form {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 132px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px 28px !important;
    background: #fff !important;
    border-top: 1px solid #e2e8f0 !important;
}

.fixed-message-form.private-mode,
.message-form.private-mode {
    grid-template-columns: 52px 52px minmax(0, 1fr) 132px !important;
}

.fixed-message-form input[type="text"],
.message-form input[type="text"],
#messageInput {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    border: 1px solid #dbe2ef !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
}

.fixed-message-form button,
.message-form button {
    height: 54px !important;
}

#attachBtn,
#emojiBtn,
.emoji-button {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #eef4ff !important;
    color: #172033 !important;
    display: grid;
    place-items: center;
    font-size: 22px !important;
}

#emojiBtn.hidden {
    display: none !important;
}

.fixed-message-form > button[type="submit"],
.message-form > button[type="submit"] {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.attachment-input {
    display: none !important;
}

.messages {
    background: #f4f7fb;
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 260px;
}

.typing-indicator {
    background: #f4f7fb;
}

@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr !important;
    }

    .chat-header {
        flex-direction: column;
    }

    .fixed-message-form,
    .message-form.fixed-message-form,
    .message-form {
        grid-template-columns: 48px minmax(0, 1fr) 96px !important;
        padding: 14px !important;
        gap: 10px !important;
    }

    .fixed-message-form.private-mode,
    .message-form.private-mode {
        grid-template-columns: 48px 48px minmax(0, 1fr) 96px !important;
    }

    #attachBtn,
    #emojiBtn,
    .emoji-button {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    .fixed-message-form > button[type="submit"],
    .message-form > button[type="submit"] {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
    }
}

@media (max-width: 560px) {
    .fixed-message-form,
    .message-form.fixed-message-form,
    .message-form,
    .fixed-message-form.private-mode,
    .message-form.private-mode {
        grid-template-columns: 48px 1fr !important;
    }

    #emojiBtn:not(.hidden) {
        display: grid !important;
    }

    #messageInput {
        grid-column: 1 / -1 !important;
    }

    .fixed-message-form > button[type="submit"],
    .message-form > button[type="submit"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
    }
}


/* Left sidebar avatar display */
.current-user-box {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.current-user-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 10px 28px rgba(20, 35, 70, .12);
}

.current-user-avatar.fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4169e1, #80a1ff);
    color: #fff;
    font-weight: 900;
    font-size: 18px;
}

.sidebar-avatar-img,
.user-item img.avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    background: #eef4ff;
}

.user-item .avatar {
    overflow: hidden;
}


/* My avatar in left sidebar header - forced fix */
.sidebar-header-with-avatar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.current-user-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.current-user-avatar {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 18px !important;
    object-fit: cover !important;
    display: block !important;
    background: #eef4ff !important;
    box-shadow: 0 10px 28px rgba(20, 35, 70, .12) !important;
}

.current-user-avatar.fallback {
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #4169e1, #80a1ff) !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 20px !important;
}

.current-user-text h1 {
    margin: 0 0 4px !important;
    font-size: 22px !important;
}

.current-user-text p {
    margin: 0 !important;
}

.sidebar-avatar-img,
.user-item img.avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}


/* Inline secure image attachments */
.message-image-wrap {
    margin-top: 10px;
    max-width: 340px;
    border-radius: 16px;
    overflow: hidden;
    background: #eef2f7;
    border: 1px solid #e2e8f0;
}

.message-image-preview {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

.message-file-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 12px;
    background: #f3f6ff;
    border-radius: 12px;
    font-weight: 800;
    color: #365bd6;
}

.image-preview-popup {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .72);
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 24px;
    backdrop-filter: blur(10px);
}

.image-preview-popup.hidden {
    display: none !important;
}

.image-preview-card {
    position: relative;
    width: min(900px, 96vw);
    max-height: 90vh;
    display: grid;
    gap: 10px;
    place-items: center;
}

#imagePreviewLarge {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 22px;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .45);
    user-select: none;
    -webkit-user-drag: none;
    background: #fff;
}

.image-preview-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #172033;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
    z-index: 2;
}

.image-preview-note {
    color: rgba(255,255,255,.78);
    font-weight: 800;
    font-size: 13px;
}

@media (max-width: 560px) {
    .message-image-wrap {
        max-width: 240px;
    }

    .image-preview-close {
        right: 0;
    }
}


/* Feature pack: replies, pins, reactions, icons */
.reply-preview {
    display: grid;
    gap: 3px;
    border-left: 4px solid #4169e1;
    background: rgba(65,105,225,.08);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: 13px;
}

.reply-preview span {
    color: #647087;
}

.reply-bar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    background: #eef4ff;
    color: #172033;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 14px;
}

.reply-bar button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #172033 !important;
}

.reaction-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.reaction-chip,
.reaction-add {
    border: 0;
    border-radius: 999px;
    padding: 5px 8px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #dbe2ef;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
}

.pin-label {
    color: #eab308;
    font-weight: 900;
    margin-left: 4px;
}

.admin-side-nav a {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.message-actions button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.call-control-row {
    display: flex;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid #e7edf6;
    background: #fff;
}

.call-control-row button {
    border: 0;
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
    background: #eef4ff;
    color: #172033;
}


/* Production pack: unread, voice, older messages, dark mode */
.unread-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #e13f55;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 0 6px;
}

.load-older-btn {
    margin: 14px auto 0;
    display: block;
    border: 0;
    border-radius: 999px;
    background: #eef4ff;
    color: #365bd6;
    font-weight: 900;
    padding: 10px 16px;
    cursor: pointer;
}

.voice-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    background: #f3f6ff;
    border-radius: 14px;
    padding: 8px 10px;
}

.voice-message audio {
    max-width: 240px;
}

.dark-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 8000;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #172033;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 16px 48px rgba(0,0,0,.24);
}

body.dark-mode {
    background: #0f172a;
    color: #e5e7eb;
}

body.dark-mode .sidebar,
body.dark-mode .chat-header,
body.dark-mode .message-form,
body.dark-mode .admin-card,
body.dark-mode .stat-card,
body.dark-mode .auth-card {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #273449 !important;
}

body.dark-mode .messages,
body.dark-mode .typing-indicator {
    background: #0f172a !important;
}

body.dark-mode .message-bubble {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

body.dark-mode .message-row.mine .message-bubble {
    background: #1e3a8a !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

body.dark-mode .room-item.active,
body.dark-mode .user-item.active {
    background: #1e293b !important;
}


/* Move night/dark toggle to top-right chat header */
.chat-top-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}


.dark-toggle {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    z-index: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #172033 !important;
    color: #fff !important;
    font-size: 21px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.16) !important;
}

body.dark-mode .dark-toggle {
    background: #f8fafc !important;
    color: #172033 !important;
}

@media (max-width: 760px) {
    .chat-top-controls {
        width: 100%;
        justify-content: space-between;
    }
}


/* FINAL FIX: chat messages and input layout */
.chat-main {
    min-width: 0;
    height: 100vh;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    overflow: hidden !important;
}

.chat-header {
    min-height: 92px;
    flex-shrink: 0;
}

.typing-indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 86px;
    height: 24px;
    padding-left: 28px;
    pointer-events: none;
    z-index: 3;
}

.messages {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 18px 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    position: relative !important;
}

.empty-state {
    margin: auto !important;
    min-height: 0 !important;
    display: block !important;
    text-align: center !important;
    color: #738096 !important;
}

.load-older-btn {
    display: none;
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 6px auto 14px !important;
    position: static !important;
    z-index: 2 !important;
}

.fixed-bottom-form,
.message-form.fixed-bottom-form,
#messageForm {
    flex-shrink: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 52px 52px minmax(240px, 1fr) 132px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 16px 28px !important;
    background: #fff !important;
    border-top: 1px solid #dfe6f2 !important;
    box-sizing: border-box !important;
}

#messageForm.private-mode {
    grid-template-columns: 52px 52px 52px minmax(240px, 1fr) 132px !important;
}

#messageForm .attachment-input {
    display: none !important;
}

#attachBtn,
#recordVoiceBtn,
#emojiBtn {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 21px !important;
    background: #eef4ff !important;
    color: #172033 !important;
    border: 0 !important;
}

#emojiBtn.hidden {
    display: none !important;
}

#messageInput {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    grid-column: auto !important;
    border: 1px solid #dbe2ef !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

#messageForm > button[type="submit"] {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 52px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    grid-column: auto !important;
}

.reply-bar {
    grid-column: 1 / -1 !important;
}

.emoji-picker {
    bottom: 88px !important;
    left: 28px !important;
}

/* make sure previous mobile rules do not split the input/send incorrectly on desktop */
@media (min-width: 701px) {
    #messageForm {
        grid-auto-flow: column !important;
    }
}

@media (max-width: 900px) {
    .chat-main {
        height: 100dvh;
    }

    .fixed-bottom-form,
    .message-form.fixed-bottom-form,
    #messageForm,
    #messageForm.private-mode {
        grid-template-columns: 48px 48px 48px 1fr !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    #emojiBtn.hidden {
        display: none !important;
    }

    #messageInput {
        grid-column: 1 / -1 !important;
    }

    #messageForm > button[type="submit"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
    }
}


/* User click popup: profile or private chat */
.user-action-popup {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .52);
    padding: 20px;
    backdrop-filter: blur(8px);
}

.user-action-popup.hidden {
    display: none !important;
}

.user-action-card {
    position: relative;
    width: min(430px, 94vw);
    background: #fff;
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 30px 100px rgba(15, 23, 42, .28);
}

.user-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: 0;
    background: #eef2f7;
    color: #172033;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
}

.user-popup-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 30px;
}

.user-popup-profile.large {
    align-items: flex-start;
}

.user-popup-avatar {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    object-fit: cover;
    flex: 0 0 72px;
    box-shadow: 0 14px 40px rgba(20, 35, 70, .18);
}

.user-popup-avatar.fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4169e1, #80a1ff);
    color: #fff;
    font-weight: 900;
    font-size: 28px;
}

.user-popup-profile h3 {
    margin: 0 0 4px;
    font-size: 24px;
}

.profile-friend-plus-btn {
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #4169e1;
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(65, 105, 225, .28);
    flex: 0 0 44px;
}

.profile-friend-plus-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.profile-friend-plus-btn.remove {
    background: #ef4444;
    box-shadow: 0 14px 34px rgba(239, 68, 68, .28);
}

.profile-friend-plus-btn.remove:hover:not(:disabled) {
    background: #dc2626;
}

.profile-friend-plus-btn:disabled {
    cursor: wait;
    opacity: .72;
}

.user-popup-bio {
    margin-top: 18px;
    background: #f6f8fc;
    border-radius: 16px;
    padding: 14px;
    line-height: 1.5;
}

.user-popup-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

.user-popup-actions button {
    border: 0;
    border-radius: 16px;
    background: #4169e1;
    color: #fff;
    padding: 13px 14px;
    font-weight: 900;
    cursor: pointer;
}

.user-popup-actions button:first-child {
    background: #eef4ff;
    color: #365bd6;
}

.profile-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

.profile-detail-grid div {
    background: #f6f8fc;
    border-radius: 16px;
    padding: 12px;
    display: grid;
    gap: 4px;
}

.profile-detail-grid .full {
    grid-column: 1 / -1;
}

.profile-detail-grid strong {
    color: #172033;
}

.profile-detail-grid span {
    color: #647087;
}

body.dark-mode .user-action-card {
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode .user-popup-bio,
body.dark-mode .profile-detail-grid div,
body.dark-mode .user-popup-close {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark-mode .profile-detail-grid strong {
    color: #e5e7eb;
}

body.dark-mode .profile-detail-grid span {
    color: #cbd5e1;
}

body.dark-mode .profile-friend-plus-btn {
    background: #5b7cff;
    color: #fff;
}

body.dark-mode .profile-friend-plus-btn.remove {
    background: #ef4444;
}

body.dark-mode .profile-friend-plus-btn.remove:hover:not(:disabled) {
    background: #dc2626;
}

body.dark-mode .profile-friend-plus-btn:disabled {
    opacity: .72;
}

@media (max-width: 520px) {
    .user-popup-actions,
    .profile-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* FIX white horizontal line breaking chat + age update */
.chat-main {
    height: 100vh !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    position: relative !important;
}

.chat-header {
    grid-row: 1 !important;
}

.typing-indicator {
    grid-row: 2 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: 22px !important;
    padding: 0 32px 4px !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: auto !important;
    color: #738096 !important;
}

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

.messages {
    grid-row: 3 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 18px 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: #f4f7fb !important;
}

#messageForm {
    grid-row: 4 !important;
}

.load-older-btn {
    align-self: center !important;
    flex: 0 0 auto !important;
    margin: 0 auto 8px !important;
    position: static !important;
    display: none;
}

.messages > .load-older-btn {
    order: -999 !important;
}

.empty-state {
    margin: auto !important;
    background: transparent !important;
}

/* Age field/profile layout */
.profile-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
    .chat-main {
        height: 100dvh !important;
    }

    .typing-indicator {
        padding: 0 14px 4px !important;
    }

    .messages {
        padding: 14px !important;
    }
}


/* FINAL SCROLL FIX: only messages scroll, never the whole page */
html,
body {
    height: 100% !important;
    overflow: hidden !important;
}

.app-shell {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

.sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
}

.chat-main {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.chat-header {
    grid-row: 1 !important;
    position: relative !important;
    z-index: 5 !important;
    flex-shrink: 0 !important;
}

.typing-indicator {
    grid-row: 2 !important;
    position: static !important;
    height: 22px !important;
    min-height: 0 !important;
    padding: 0 32px 4px !important;
    background: #f4f7fb !important;
    z-index: 1 !important;
}

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

.messages {
    grid-row: 3 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 32px 32px !important;
    scroll-behavior: auto !important;
    overscroll-behavior: contain !important;
}

#messageForm {
    grid-row: 4 !important;
    position: relative !important;
    z-index: 6 !important;
    flex-shrink: 0 !important;
}

.load-older-btn {
    position: static !important;
    align-self: center !important;
    margin: 0 auto 14px !important;
    flex: 0 0 auto !important;
}

/* Prevent message bubbles from hiding behind the header or input */
.message-row:first-of-type {
    margin-top: 4px !important;
}

.message-row:last-of-type {
    margin-bottom: 8px !important;
}

@media (max-width: 900px) {
    .app-shell,
    .chat-main,
    .sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .messages {
        padding: 14px 14px 22px !important;
    }

    .typing-indicator {
        padding: 0 14px 4px !important;
    }
}


/* FINAL FIX: private chat bottom/input visibility */
html,
body {
    height: 100% !important;
    overflow: hidden !important;
}

.app-shell {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: grid !important;
}

.chat-panel,
.chat-main {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    background: #f4f7fb !important;
}

.chat-panel .chat-header,
.chat-main .chat-header {
    grid-row: 1 !important;
    flex-shrink: 0 !important;
    min-height: 76px !important;
    background: #fff !important;
    z-index: 5 !important;
}

.chat-panel .typing-indicator,
.chat-main .typing-indicator {
    grid-row: 2 !important;
    position: static !important;
    height: 22px !important;
    min-height: 0 !important;
    padding: 0 32px 4px !important;
    background: #f4f7fb !important;
}

.chat-panel .typing-indicator:empty,
.chat-main .typing-indicator:empty {
    display: none !important;
}

.chat-panel .messages,
.chat-main .messages {
    grid-row: 3 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: #f4f7fb !important;
    overscroll-behavior: contain !important;
}

.chat-panel #messageForm,
.chat-main #messageForm {
    grid-row: 4 !important;
    position: relative !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-top: 1px solid #dfe6f2 !important;
    display: grid !important;
    grid-template-columns: 52px 52px 52px minmax(220px, 1fr) 132px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px 28px !important;
}

.chat-panel #messageForm:not(.private-mode),
.chat-main #messageForm:not(.private-mode) {
    grid-template-columns: 52px 52px minmax(220px, 1fr) 132px !important;
}

.chat-panel #emojiBtn.hidden,
.chat-main #emojiBtn.hidden {
    display: none !important;
}

.chat-panel #attachBtn,
.chat-panel #recordVoiceBtn,
.chat-panel #emojiBtn,
.chat-main #attachBtn,
.chat-main #recordVoiceBtn,
.chat-main #emojiBtn {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
}

.chat-panel #messageInput,
.chat-main #messageInput {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
}

.chat-panel #messageForm > button[type="submit"],
.chat-main #messageForm > button[type="submit"] {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 52px !important;
    grid-column: auto !important;
}

.chat-panel .reply-bar,
.chat-main .reply-bar {
    grid-column: 1 / -1 !important;
}

.chat-panel .load-older-btn,
.chat-main .load-older-btn {
    position: static !important;
    align-self: center !important;
    margin: 0 auto 14px !important;
    flex: 0 0 auto !important;
}

/* Dark mode support for corrected panel */
body.dark-mode .chat-panel,
body.dark-mode .chat-main,
body.dark-mode .chat-panel .messages,
body.dark-mode .chat-main .messages,
body.dark-mode .chat-panel .typing-indicator,
body.dark-mode .chat-main .typing-indicator {
    background: #0f172a !important;
}

body.dark-mode .chat-panel .chat-header,
body.dark-mode .chat-main .chat-header,
body.dark-mode .chat-panel #messageForm,
body.dark-mode .chat-main #messageForm {
    background: #111827 !important;
    border-color: #273449 !important;
}

@media (max-width: 900px) {
    .app-shell,
    .chat-panel,
    .chat-main,
    .sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .chat-panel #messageForm,
    .chat-main #messageForm,
    .chat-panel #messageForm.private-mode,
    .chat-main #messageForm.private-mode {
        grid-template-columns: 48px 48px 48px 1fr !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    .chat-panel #messageInput,
    .chat-main #messageInput {
        grid-column: 1 / -1 !important;
    }

    .chat-panel #messageForm > button[type="submit"],
    .chat-main #messageForm > button[type="submit"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .chat-panel .messages,
    .chat-main .messages {
        padding: 14px !important;
    }
}


/* FIX: allow Profile/Admin pages to scroll */
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Only the chat screen should be locked to one viewport */
body.chat-page {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

/* Profile page must show all fields and buttons */
body.profile-page,
body.admin-page.profile-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.profile-page .admin-layout,
body.profile-page .admin-layout.narrow {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 80px !important;
}

body.profile-page .admin-card,
body.profile-page .auth-form {
    overflow: visible !important;
}

body.profile-page textarea {
    min-height: 110px;
}

body.profile-page button[type="submit"] {
    margin-bottom: 40px;
}

/* Keep admin pages scrollable too */
body.admin-page:not(.chat-page) {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
}

body.admin-page:not(.chat-page) .admin-shell {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
}

body.admin-page:not(.chat-page) .admin-layout {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 70px !important;
}


/* PROFESSIONAL MOBILE UI PACK */
:root {
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-menu-btn,
.mobile-close-sidebar,
.mobile-sidebar-overlay {
    display: none;
}

.chat-panel,
.chat-main {
    min-width: 0;
}

.message-bubble {
    max-width: min(680px, 76vw);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.message-actions {
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    html,
    body.chat-page {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .app-shell {
        display: grid !important;
        grid-template-columns: 1fr !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        background: #f4f7fb;
    }

    .mobile-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
        z-index: 8990;
        backdrop-filter: blur(4px);
    }

    body.mobile-sidebar-open .mobile-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(86vw, 360px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        transform: translateX(-105%);
        transition: transform .22s ease;
        z-index: 9000;
        background: #fff !important;
        box-shadow: 26px 0 70px rgba(15, 23, 42, .22);
        border-right: 1px solid #e2e8f0;
        padding-top: 54px !important;
    }

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

    .mobile-close-sidebar {
        display: grid !important;
        place-items: center;
        position: absolute;
        top: 12px;
        right: 14px;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: #eef4ff;
        color: #172033;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        z-index: 2;
    }

    .sidebar-header,
    .sidebar-header-with-avatar {
        padding-right: 34px !important;
        align-items: flex-start !important;
    }

    .current-user-avatar {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 16px !important;
    }

    .current-user-text h1,
    .sidebar h1 {
        font-size: 21px !important;
        line-height: 1.15 !important;
    }

    .top-links {
        flex-direction: row !important;
        justify-content: flex-start !important;
        width: 100%;
        margin-top: 10px;
    }

    .top-links .logout-link,
    .admin-link {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .room-item,
    .user-item {
        min-height: 58px;
        border-radius: 18px !important;
        padding: 12px 14px !important;
    }

    .chat-panel,
    .chat-main {
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        overflow: hidden !important;
        background: #f4f7fb !important;
    }

    .chat-header {
        min-height: auto !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        background: #fff !important;
        border-bottom: 1px solid #e2e8f0;
    }

    .mobile-menu-btn {
        display: grid !important;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 14px;
        background: #eef4ff;
        color: #172033;
        font-size: 23px;
        font-weight: 900;
        cursor: pointer;
    }

    .chat-header > div:first-of-type {
        min-width: 0;
    }

    .chat-header h2 {
        font-size: 20px !important;
        line-height: 1.1 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-header .muted,
    .chat-subtitle {
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .private-actions {
        grid-column: 1 / -1;
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .private-actions.hidden {
        display: none !important;
    }

    .private-actions button {
        flex: 0 0 auto;
        min-height: 40px;
        border-radius: 14px !important;
        padding: 0 13px !important;
        font-size: 13px !important;
    }

    .chat-top-controls {
        grid-column: 1 / -1;
        width: 100%;
        display: grid !important;
        grid-template-columns: 46px;
        gap: 10px;
        align-items: center;
        margin-left: 0 !important;
    }

    .dark-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        font-size: 19px !important;
        box-shadow: none !important;
    }

    .typing-indicator {
        padding: 0 14px 4px !important;
        height: 20px !important;
        font-size: 12px !important;
        background: #f4f7fb !important;
    }

    .messages {
        min-height: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 12px 18px !important;
        gap: 12px !important;
        background: #f4f7fb !important;
        -webkit-overflow-scrolling: touch;
    }

    .message-row {
        gap: 8px !important;
        align-items: flex-end !important;
    }

    .message-bubble {
        max-width: calc(100vw - 88px) !important;
        border-radius: 18px !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    .message-top {
        gap: 10px !important;
        flex-wrap: wrap;
    }

    .message-top strong {
        font-size: 13px;
    }

    .message-top time {
        font-size: 12px;
    }

    .chat-avatar,
    .chat-avatar-img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex-basis: 34px !important;
        font-size: 12px !important;
    }

    .message-actions {
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .message-actions button {
        min-height: 32px;
        border-radius: 10px;
        padding: 6px 8px;
        font-size: 12px;
    }

    .reaction-chip,
    .reaction-add {
        min-height: 30px;
    }

    .message-image-wrap {
        max-width: min(280px, calc(100vw - 100px)) !important;
    }

    .message-image-preview {
        max-height: 220px !important;
    }

    .voice-message {
        flex-direction: column;
        align-items: flex-start;
    }

    .voice-message audio {
        width: 100%;
        max-width: 230px;
    }

    .load-older-btn {
        min-height: 38px;
        padding: 9px 14px !important;
        font-size: 13px;
    }

    #messageForm,
    .message-form,
    .message-form.fixed-bottom-form {
        display: grid !important;
        grid-template-columns: repeat(3, 46px) minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 10px 12px calc(10px + var(--mobile-safe-bottom)) !important;
        background: #fff !important;
        border-top: 1px solid #dfe6f2 !important;
    }

    #messageForm:not(.private-mode) {
        grid-template-columns: repeat(2, 46px) minmax(0, 1fr) !important;
    }

    #attachBtn,
    #recordVoiceBtn,
    #emojiBtn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 20px !important;
    }

    #emojiBtn.hidden {
        display: none !important;
    }

    #messageInput {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 48px !important;
        border-radius: 15px !important;
        font-size: 16px !important;
    }

    #messageForm > button[type="submit"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 48px !important;
        border-radius: 15px !important;
        font-size: 15px !important;
    }

    .reply-bar {
        grid-column: 1 / -1 !important;
        font-size: 13px !important;
        border-radius: 14px !important;
        padding: 9px 10px !important;
    }

    .emoji-picker {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(150px + var(--mobile-safe-bottom)) !important;
        width: auto !important;
        grid-template-columns: repeat(6, 1fr) !important;
        z-index: 5000 !important;
    }

    .user-action-card,
    .modern-modal,
    .call-card {
        width: min(94vw, 430px) !important;
        border-radius: 22px !important;
        padding: 20px !important;
    }

    .user-popup-actions,
    .modern-modal-actions {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    .toast-stack {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
    }

    body.profile-page .admin-layout,
    body.admin-page:not(.chat-page) .admin-layout {
        padding: 16px !important;
    }

    body.profile-page .admin-header,
    body.admin-page:not(.chat-page) .admin-header {
        display: grid !important;
        gap: 12px !important;
    }

    body.profile-page .admin-card,
    body.admin-page:not(.chat-page) .admin-card {
        border-radius: 22px !important;
        padding: 18px !important;
    }

    .auth-form input,
    .auth-form textarea,
    .auth-form select,
    .auth-form button {
        min-height: 46px;
        font-size: 16px !important;
    }

    .profile-preview img,
    .profile-initial {
        width: 96px !important;
        height: 96px !important;
        border-radius: 28px !important;
    }
}

@media (max-width: 420px) {
    .sidebar {
        width: 90vw !important;
    }

    .chat-header h2 {
        font-size: 18px !important;
    }

    .private-actions button {
        font-size: 12px !important;
        padding: 0 10px !important;
    }

    .message-bubble {
        max-width: calc(100vw - 76px) !important;
    }

    .message-actions button {
        font-size: 11px;
        padding: 5px 7px;
    }

    .emoji-picker {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 900px) {
    body.dark-mode .sidebar,
    body.dark-mode .chat-header,
    body.dark-mode #messageForm {
        background: #111827 !important;
        border-color: #273449 !important;
    }

    body.dark-mode .mobile-menu-btn,
    body.dark-mode .mobile-close-sidebar,
    body.dark-mode #attachBtn,
    body.dark-mode #recordVoiceBtn,
    body.dark-mode #emojiBtn {
        background: #1f2937 !important;
        color: #e5e7eb !important;
    }
}


/* CLEAN MOBILE MODEL - overrides previous mobile layout */
.mobile-clean-topbar,
.mobile-clean-close {
    display: none;
}

@media (max-width: 760px) {
    html,
    body.chat-page {
        width: 100% !important;
        height: 100dvh !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    body.chat-page {
        background: #f4f7fb !important;
    }

    .mobile-clean-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 58px;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: #ffffff;
        border-bottom: 1px solid #dfe6f2;
        z-index: 10020;
        box-sizing: border-box;
    }

    .mobile-clean-btn {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 14px;
        background: #eef4ff;
        color: #172033;
        font-size: 22px;
        font-weight: 900;
        display: grid;
        place-items: center;
    }

    .mobile-clean-title {
        display: grid;
        min-width: 0;
        line-height: 1.12;
    }

    .mobile-clean-title strong {
        font-size: 16px;
        color: #101827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-clean-title span {
        font-size: 12px;
        color: #647087;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-shell {
        position: fixed !important;
        top: 58px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        overflow: hidden !important;
        background: #f4f7fb !important;
    }

    .mobile-sidebar-overlay {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
        z-index: 10000;
    }

    body.mobile-sidebar-open .mobile-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(86vw, 340px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease !important;
        z-index: 10010 !important;
        overflow-y: auto !important;
        background: #fff !important;
        box-shadow: 24px 0 70px rgba(15, 23, 42, .26) !important;
        padding: 58px 14px 18px !important;
        box-sizing: border-box !important;
    }

    body.mobile-sidebar-open .sidebar {
        transform: translateX(0) !important;
    }

    .mobile-clean-close,
    .mobile-close-sidebar {
        display: grid !important;
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 38px !important;
        height: 38px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #eef4ff !important;
        color: #172033 !important;
        font-size: 26px !important;
        place-items: center !important;
        z-index: 2 !important;
    }

    .chat-panel,
    .chat-main {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        overflow: hidden !important;
        background: #f4f7fb !important;
    }

    .chat-header {
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        min-height: 70px !important;
        padding: 10px 12px !important;
        background: #fff !important;
        border-bottom: 1px solid #dfe6f2 !important;
        box-sizing: border-box !important;
    }

    #mobileMenuBtn,
    .mobile-menu-btn {
        display: none !important;
    }

    .chat-header h2 {
        font-size: 19px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .chat-header .muted,
    .chat-subtitle {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .private-actions {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .private-actions.hidden {
        display: none !important;
    }

    .private-actions button {
        flex: 0 0 auto !important;
        height: 38px !important;
        padding: 0 12px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
    }

    .chat-top-controls {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .chat-header .dark-toggle {
        display: none !important;
    }

    .typing-indicator {
        display: none !important;
    }

    .messages {
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px 10px 16px !important;
        background: #f4f7fb !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    .message-row {
        gap: 7px !important;
        align-items: flex-end !important;
        max-width: 100% !important;
    }

    .message-row.mine {
        flex-direction: row-reverse !important;
    }

    .message-bubble {
        max-width: calc(100vw - 74px) !important;
        min-width: 0 !important;
        border-radius: 18px !important;
        padding: 11px 12px !important;
        font-size: 14px !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .chat-avatar,
    .chat-avatar-img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex: 0 0 32px !important;
        font-size: 11px !important;
    }

    .message-top {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .message-actions {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .message-actions button {
        min-height: 30px !important;
        font-size: 11px !important;
        padding: 5px 7px !important;
        border-radius: 10px !important;
    }

    .message-image-wrap {
        max-width: min(250px, calc(100vw - 86px)) !important;
    }

    .voice-message audio {
        width: 100% !important;
        max-width: 220px !important;
    }

    #messageForm,
    .message-form {
        grid-row: 3 !important;
        display: grid !important;
        grid-template-columns: 44px 44px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        background: #fff !important;
        border-top: 1px solid #dfe6f2 !important;
        box-sizing: border-box !important;
    }

    #messageForm.private-mode {
        grid-template-columns: 44px 44px 44px minmax(0, 1fr) !important;
    }

    #attachBtn,
    #recordVoiceBtn,
    #emojiBtn {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        font-size: 19px !important;
        padding: 0 !important;
    }

    #emojiBtn.hidden {
        display: none !important;
    }

    #messageInput {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 46px !important;
        border-radius: 15px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    #messageForm > button[type="submit"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 46px !important;
        border-radius: 15px !important;
        font-size: 15px !important;
    }

    .emoji-picker {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 150px !important;
        width: auto !important;
        grid-template-columns: repeat(5, 1fr) !important;
        z-index: 10030 !important;
    }

    .user-action-card,
    .modern-modal,
    .call-card {
        width: min(94vw, 420px) !important;
        border-radius: 22px !important;
        padding: 18px !important;
    }

    .toast-stack {
        top: 68px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }

    body.dark-mode .mobile-clean-topbar,
    body.dark-mode .chat-header,
    body.dark-mode #messageForm,
    body.dark-mode .sidebar {
        background: #111827 !important;
        border-color: #273449 !important;
        color: #e5e7eb !important;
    }

    body.dark-mode .mobile-clean-title strong,
    body.dark-mode .mobile-clean-title span {
        color: #e5e7eb !important;
    }

    body.dark-mode .mobile-clean-btn,
    body.dark-mode #attachBtn,
    body.dark-mode #recordVoiceBtn,
    body.dark-mode #emojiBtn {
        background: #1f2937 !important;
        color: #e5e7eb !important;
    }

    body.dark-mode .messages,
    body.dark-mode .chat-panel,
    body.dark-mode .chat-main {
        background: #0f172a !important;
    }
}

@media (max-width: 380px) {
    .sidebar {
        width: 92vw !important;
    }

    .emoji-picker {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .message-bubble {
        max-width: calc(100vw - 66px) !important;
    }
}


/* STABLE DESKTOP + WORKING MOBILE MENU FIX */
.current-user-avatar.fallback,
.chat-avatar.fallback {
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #4169e1, #80a1ff) !important;
    color: #fff !important;
    font-weight: 900 !important;
}

.current-user-avatar {
    object-fit: cover !important;
}

/* Hide mobile bar on desktop */
.mobile-clean-topbar,
.mobile-clean-close {
    display: none;
}

/* Use a wider breakpoint so phones/tablets actually get the mobile UI */
@media (max-width: 980px) {
    html,
    body.chat-page {
        height: 100dvh !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    body.chat-page {
        background: #f4f7fb !important;
    }

    .mobile-clean-topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 58px !important;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) 46px !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 12px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #dfe6f2 !important;
        z-index: 10020 !important;
        box-sizing: border-box !important;
    }

    .mobile-clean-btn {
        width: 42px !important;
        height: 42px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: #eef4ff !important;
        color: #172033 !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        display: grid !important;
        place-items: center !important;
        cursor: pointer !important;
    }

    .mobile-clean-title {
        display: grid !important;
        min-width: 0 !important;
        line-height: 1.12 !important;
    }

    .mobile-clean-title strong {
        font-size: 16px !important;
        color: #101827 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-clean-title span {
        font-size: 12px !important;
        color: #647087 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .app-shell {
        position: fixed !important;
        top: 58px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        overflow: hidden !important;
        background: #f4f7fb !important;
    }

    .mobile-sidebar-overlay {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, .45) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .18s ease !important;
        z-index: 10000 !important;
    }

    body.mobile-sidebar-open .mobile-sidebar-overlay {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(86vw, 340px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease !important;
        z-index: 10010 !important;
        overflow-y: auto !important;
        background: #fff !important;
        box-shadow: 24px 0 70px rgba(15, 23, 42, .26) !important;
        padding: 58px 14px 18px !important;
        box-sizing: border-box !important;
    }

    body.mobile-sidebar-open .sidebar {
        transform: translateX(0) !important;
    }

    .mobile-clean-close,
    .mobile-close-sidebar {
        display: grid !important;
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 38px !important;
        height: 38px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #eef4ff !important;
        color: #172033 !important;
        font-size: 26px !important;
        place-items: center !important;
        z-index: 2 !important;
        cursor: pointer !important;
    }

    .chat-panel,
    .chat-main {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        overflow: hidden !important;
        background: #f4f7fb !important;
    }

    .chat-header {
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        min-height: 70px !important;
        padding: 10px 12px !important;
        background: #fff !important;
        border-bottom: 1px solid #dfe6f2 !important;
        box-sizing: border-box !important;
    }

    #mobileMenuBtn,
    .mobile-menu-btn {
        display: none !important;
    }

    .chat-header h2 {
        font-size: 19px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .chat-header .muted,
    .chat-subtitle {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .private-actions {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .private-actions.hidden {
        display: none !important;
    }

    .private-actions button {
        flex: 0 0 auto !important;
        height: 38px !important;
        padding: 0 12px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
    }

    .chat-top-controls {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .chat-header .dark-toggle {
        display: none !important;
    }

    .typing-indicator {
        display: none !important;
    }

    .messages {
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px 10px 16px !important;
        background: #f4f7fb !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .message-row {
        gap: 7px !important;
        align-items: flex-end !important;
        max-width: 100% !important;
    }

    .message-row.mine {
        flex-direction: row-reverse !important;
    }

    .message-bubble {
        max-width: calc(100vw - 74px) !important;
        min-width: 0 !important;
        border-radius: 18px !important;
        padding: 11px 12px !important;
        font-size: 14px !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .chat-avatar,
    .chat-avatar-img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex: 0 0 32px !important;
        font-size: 11px !important;
    }

    .message-actions {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .message-actions button {
        min-height: 30px !important;
        font-size: 11px !important;
        padding: 5px 7px !important;
        border-radius: 10px !important;
    }

    #messageForm,
    .message-form {
        grid-row: 3 !important;
        display: grid !important;
        grid-template-columns: 44px 44px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        background: #fff !important;
        border-top: 1px solid #dfe6f2 !important;
        box-sizing: border-box !important;
    }

    #messageForm.private-mode {
        grid-template-columns: 44px 44px 44px minmax(0, 1fr) !important;
    }

    #attachBtn,
    #recordVoiceBtn,
    #emojiBtn {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        font-size: 19px !important;
        padding: 0 !important;
    }

    #emojiBtn.hidden {
        display: none !important;
    }

    #messageInput {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 46px !important;
        border-radius: 15px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    #messageForm > button[type="submit"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 46px !important;
        border-radius: 15px !important;
        font-size: 15px !important;
    }

    .emoji-picker {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 150px !important;
        width: auto !important;
        grid-template-columns: repeat(5, 1fr) !important;
        z-index: 10030 !important;
    }

    body.dark-mode .mobile-clean-topbar,
    body.dark-mode .chat-header,
    body.dark-mode #messageForm,
    body.dark-mode .sidebar {
        background: #111827 !important;
        border-color: #273449 !important;
        color: #e5e7eb !important;
    }

    body.dark-mode .mobile-clean-title strong,
    body.dark-mode .mobile-clean-title span {
        color: #e5e7eb !important;
    }

    body.dark-mode .mobile-clean-btn,
    body.dark-mode #attachBtn,
    body.dark-mode #recordVoiceBtn,
    body.dark-mode #emojiBtn {
        background: #1f2937 !important;
        color: #e5e7eb !important;
    }

    body.dark-mode .messages,
    body.dark-mode .chat-panel,
    body.dark-mode .chat-main {
        background: #0f172a !important;
    }
}

@media (max-width: 380px) {
    .sidebar {
        width: 92vw !important;
    }

    .emoji-picker {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .message-bubble {
        max-width: calc(100vw - 66px) !important;
    }
}


/* Avatar fallback parse-error-safe fix */
.js-avatar-fallback {
    display: none;
}


/* MOBILE MENU VISIBILITY FIX */
@media (max-width: 980px) {
    .mobile-clean-topbar {
        z-index: 12000 !important;
    }

    .mobile-sidebar-overlay {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, .42) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .18s ease !important;
        z-index: 10000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.mobile-sidebar-open .mobile-sidebar-overlay {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(86vw, 360px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease !important;
        z-index: 13000 !important;
        opacity: 1 !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        box-shadow: 24px 0 70px rgba(15, 23, 42, .30) !important;
        padding: 58px 14px 18px !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
    }

    body.mobile-sidebar-open .sidebar {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.mobile-sidebar-open .chat-panel,
    body.mobile-sidebar-open .chat-main {
        pointer-events: none !important;
    }

    body.mobile-sidebar-open .sidebar,
    body.mobile-sidebar-open .sidebar * {
        pointer-events: auto !important;
    }

    .mobile-clean-close,
    .mobile-close-sidebar {
        z-index: 13100 !important;
        display: grid !important;
        pointer-events: auto !important;
    }

    body.mobile-sidebar-open .sidebar .room-item,
    body.mobile-sidebar-open .sidebar .user-item,
    body.mobile-sidebar-open .sidebar a,
    body.mobile-sidebar-open .sidebar button {
        pointer-events: auto !important;
    }

    body.dark-mode .sidebar {
        background: #111827 !important;
        color: #e5e7eb !important;
    }
}


/* CLEAN LEFT SIDEBAR USER BAR */
.userbar-header {
    padding: 0 !important;
    margin: 0 0 18px !important;
    display: block !important;
}

.userbar-card {
    background: linear-gradient(135deg, #f8fbff, #eef4ff);
    border: 1px solid #e0e8f7;
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 14px 44px rgba(20, 35, 70, .08);
}

.userbar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.userbar-avatar {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 18px;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 28px rgba(20, 35, 70, .16);
    background: #eef4ff;
}

.userbar-avatar.fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4169e1, #80a1ff);
    color: #fff;
    font-weight: 900;
    font-size: 22px;
}

.userbar-info {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.userbar-info strong {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.userbar-info span {
    color: #647087;
    font-size: 13px;
    line-height: 1.2;
}

.userbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.userbar-actions a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #365bd6;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px #dbe6ff;
}

.userbar-actions a:hover {
    background: #4169e1;
    color: #fff;
}

/* Hide old floating profile/logout styles inside sidebar header */
.sidebar-header:not(.userbar-header) .top-links {
    display: none !important;
}

/* Make admin/room list line up under the user bar */
.sidebar .admin-link {
    margin-top: 8px;
}

body.dark-mode .userbar-card {
    background: linear-gradient(135deg, #111827, #1f2937);
    border-color: #273449;
}

body.dark-mode .userbar-info strong {
    color: #e5e7eb;
}

body.dark-mode .userbar-info span {
    color: #cbd5e1;
}

body.dark-mode .userbar-actions a {
    background: #0f172a;
    color: #dbeafe;
    box-shadow: inset 0 0 0 1px #273449;
}

body.dark-mode .userbar-actions a:hover {
    background: #4169e1;
    color: #fff;
}

/* Mobile userbar */
@media (max-width: 980px) {
    .userbar-card {
        border-radius: 20px !important;
        padding: 13px !important;
    }

    .userbar-avatar {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        border-radius: 16px !important;
    }

    .userbar-info strong {
        font-size: 17px !important;
    }

    .userbar-actions a {
        min-height: 40px !important;
        font-size: 13px !important;
    }
}


/* BRAND LEFT + USER AVATAR MENU RIGHT */
.brand-user-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    position: relative !important;
}

.brand-title {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.brand-title strong {
    font-size: 22px;
    line-height: 1.1;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-title span {
    font-size: 13px;
    color: #647087;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-menu {
    position: relative;
    flex: 0 0 auto;
}

.sidebar-user-menu-btn {
    width: 52px;
    height: 52px;
    border: 0;
    padding: 0;
    border-radius: 18px;
    background: #eef4ff;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 28px rgba(20, 35, 70, .12);
    overflow: hidden;
}

.sidebar-user-menu-btn img,
.sidebar-user-dropdown-head img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar-user-initial {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4169e1, #80a1ff);
    color: #fff;
    font-weight: 900;
    font-size: 20px;
}

.sidebar-user-initial.large {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 20px;
    flex: 0 0 48px;
}

.sidebar-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 238px;
    background: #fff;
    border: 1px solid #dfe7f5;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .18);
    padding: 12px;
    z-index: 3000;
}

.sidebar-user-dropdown.hidden {
    display: none !important;
}

.sidebar-user-dropdown-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f6f8fc;
    border-radius: 16px;
    margin-bottom: 8px;
}

.sidebar-user-dropdown-head img {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    flex: 0 0 48px;
}

.sidebar-user-dropdown-head div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.sidebar-user-dropdown-head strong {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-dropdown-head span {
    color: #647087;
    font-size: 12px;
}

.sidebar-user-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 13px;
    color: #365bd6;
    font-weight: 900;
    text-decoration: none;
}

.sidebar-user-dropdown a:hover {
    background: #eef4ff;
}

.userbar-header,
.userbar-card,
.userbar-actions {
    display: none !important;
}

/* Dark mode */
body.dark-mode .brand-title strong {
    color: #e5e7eb;
}

body.dark-mode .brand-title span {
    color: #cbd5e1;
}

body.dark-mode .sidebar-user-menu-btn {
    background: #1f2937;
}

body.dark-mode .sidebar-user-dropdown {
    background: #111827;
    border-color: #273449;
}

body.dark-mode .sidebar-user-dropdown-head {
    background: #1f2937;
}

body.dark-mode .sidebar-user-dropdown-head strong {
    color: #e5e7eb;
}

body.dark-mode .sidebar-user-dropdown-head span {
    color: #cbd5e1;
}

body.dark-mode .sidebar-user-dropdown a {
    color: #dbeafe;
}

body.dark-mode .sidebar-user-dropdown a:hover {
    background: #1f2937;
}

/* Mobile: keep website title left and avatar menu right inside drawer */
@media (max-width: 980px) {
    .brand-user-header {
        margin-bottom: 16px !important;
    }

    .brand-title strong {
        font-size: 21px !important;
    }

    .sidebar-user-menu-btn {
        width: 48px !important;
        height: 48px !important;
        border-radius: 16px !important;
    }

    .sidebar-user-dropdown {
        right: 0 !important;
        width: min(240px, 78vw) !important;
        z-index: 13200 !important;
    }
}


/* AVATAR NEXT TO NIGHT TOGGLE */
.chat-top-controls {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}


.header-user-avatar-link {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #eef4ff;
    box-shadow: 0 10px 30px rgba(20, 35, 70, .14);
    text-decoration: none;
}

.header-user-avatar {
    width: 46px;
    height: 46px;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.header-user-avatar.fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4169e1, #80a1ff);
    color: #fff;
    font-weight: 900;
    font-size: 17px;
}

.chat-top-controls .dark-toggle {
    position: static !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
}

/* mobile top bar: menu | title | avatar | dark toggle */
@media (max-width: 980px) {
    .mobile-clean-topbar {
        grid-template-columns: 46px minmax(0, 1fr) 42px 42px !important;
    }

    .mobile-top-avatar-link {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: #eef4ff;
        box-shadow: 0 8px 24px rgba(20, 35, 70, .12);
        text-decoration: none;
    }

    .mobile-top-avatar {
        width: 42px;
        height: 42px;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }

    .mobile-top-avatar.fallback {
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #4169e1, #80a1ff);
        color: #fff;
        font-weight: 900;
        font-size: 16px;
    }

    .chat-top-controls {
        display: grid !important;
        grid-template-columns: 42px 42px !important;
        gap: 9px !important;
        width: 100% !important;
    }

    .header-user-avatar-link {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .header-user-avatar {
        width: 42px !important;
        height: 42px !important;
    }
}

body.dark-mode .header-user-avatar-link,
body.dark-mode .mobile-top-avatar-link {
    background: #1f2937;
}


/* SIDEBAR TITLE ONLY, AVATAR NEXT TO TOGGLE */
.brand-only-header {
    display: block !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
}
.brand-only-header .brand-title {
    display: grid;
    gap: 3px;
}
.brand-only-header .brand-title strong {
    font-size: 22px;
    line-height: 1.1;
    color: #0f172a;
}
.brand-only-header .brand-title span {
    font-size: 13px;
    color: #647087;
}
.sidebar-user-menu,
.sidebar-user-dropdown,
.sidebar-user-menu-btn,
.userbar-header,
.userbar-card {
    display: none !important;
}
.chat-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: start;
    gap: 16px;
}
.chat-header > div:first-child {
    min-width: 0;
}
.chat-top-controls {
    align-self: start !important;
}
body.dark-mode .brand-only-header .brand-title strong {
    color: #e5e7eb;
}
body.dark-mode .brand-only-header .brand-title span {
    color: #cbd5e1;
}
@media (max-width: 980px) {
    .brand-only-header {
        margin-bottom: 16px !important;
    }
}


/* MOBILE MENU NO-GLASS FIX */
@media (max-width: 980px) {
    body.mobile-sidebar-open .sidebar {
        background: #ffffff !important;
        opacity: 1 !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: translateX(0) !important;
        z-index: 30000 !important;
        box-shadow: 18px 0 50px rgba(15, 23, 42, .18) !important;
    }

    body.mobile-sidebar-open .sidebar,
    body.mobile-sidebar-open .sidebar * {
        opacity: 1 !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.mobile-sidebar-open .mobile-sidebar-overlay {
        left: min(86vw, 360px) !important;
        right: 0 !important;
        top: 58px !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        background: rgba(15, 23, 42, .38) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 20000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mobile-sidebar-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mobile-clean-topbar {
        z-index: 31000 !important;
    }

    .mobile-clean-close,
    .mobile-close-sidebar {
        z-index: 32000 !important;
    }

    body.dark-mode.mobile-sidebar-open .sidebar {
        background: #111827 !important;
    }
}

@media (max-width: 380px) {
    body.mobile-sidebar-open .mobile-sidebar-overlay {
        left: 92vw !important;
    }
}


/* PRIVATE ACTION ICON BUTTONS */
.icon-only-btn {
    min-width: 42px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    border-radius: 14px !important;
}

.private-actions {
    gap: 10px !important;
}

.private-actions .icon-only-btn {
    flex: 0 0 42px !important;
}

@media (max-width: 980px) {
    .private-actions .icon-only-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        border-radius: 13px !important;
        font-size: 17px !important;
    }
}


/* MODERN ICON SYSTEM */
.icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.icon-svg svg {
    width: 18px;
    height: 18px;
    display: block;
}
.btn-label {
    display: inline-block;
}
.icon-only-btn .icon-svg,
#attachBtn .icon-svg,
#recordVoiceBtn .icon-svg,
#emojiBtn .icon-svg,
.header-user-avatar-link .icon-svg,
.mobile-top-avatar-link .icon-svg {
    width: 20px;
    height: 20px;
}
.icon-only-btn .icon-svg svg,
#attachBtn .icon-svg svg,
#recordVoiceBtn .icon-svg svg,
#emojiBtn .icon-svg svg {
    width: 20px;
    height: 20px;
}
.icon-only-btn {
    font-size: 0 !important;
}
.icon-only-btn .icon-svg {
    color: currentColor;
}
.load-older-btn,
.message-action-btn,
.reply-preview,
.pin-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.message-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pin-label .icon-svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}
.pin-label .icon-svg svg {
    width: 14px;
    height: 14px;
}
#attachBtn,
#recordVoiceBtn,
#emojiBtn,
.icon-only-btn,
.message-actions button,
.load-older-btn {
    transition: transform .15s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
#attachBtn:hover,
#recordVoiceBtn:hover,
#emojiBtn:hover,
.icon-only-btn:hover,
.message-actions button:hover,
.load-older-btn:hover {
    transform: translateY(-1px);
}

/* FINAL: move call/report/block controls beside the night-light toggle */
.chat-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
}

.chat-top-controls {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    min-width: max-content;
}

.chat-top-controls .header-user-avatar-link {
    order: 1;
}

.chat-top-controls .private-actions {
    order: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

.chat-top-controls .private-actions.hidden {
    display: none !important;
}

.chat-top-controls .dark-toggle {
    order: 3;
    flex: 0 0 46px !important;
}

@media (max-width: 980px) {
    .chat-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
    }

    .chat-top-controls {
        width: auto !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .chat-top-controls .private-actions {
        display: flex !important;
        gap: 7px !important;
        max-width: min(54vw, 230px) !important;
        overflow-x: auto !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch;
    }

    .chat-top-controls .private-actions.hidden {
        display: none !important;
    }

    .chat-top-controls .private-actions .icon-only-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .chat-top-controls .header-user-avatar-link,
    .chat-top-controls .dark-toggle {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }
}


/* Enhanced call controls: mute/camera/device selectors/timer */
.call-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #4169e1;
    font-weight: 900;
    font-size: 12px;
}

.call-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 22px 0;
    background: #fff;
}

.call-control-btn {
    border: 0;
    border-radius: 14px;
    padding: 11px 16px;
    font-weight: 900;
    cursor: pointer;
    background: #eef2f7;
    color: #172033;
}

.call-control-btn.active {
    background: #e13f55;
    color: #fff;
}

.call-device-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 22px 22px;
    background: #fff;
}

.call-device-grid label {
    display: grid;
    gap: 6px;
    color: #738096;
    font-weight: 800;
    font-size: 12px;
}

.call-device-grid select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dfe6f2;
    border-radius: 12px;
    padding: 0 10px;
    background: #fff;
    color: #172033;
    font-weight: 700;
}

#localVideo.camera-off {
    opacity: .35;
    filter: grayscale(1);
}

.user-item .busy-pill {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fff3cd;
    color: #946200;
    font-size: 11px;
    font-weight: 900;
}

.user-item.busy .status-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}

body.dark-mode .call-card,
body.dark-mode .call-controls,
body.dark-mode .call-device-grid {
    background: #101827;
    color: #e5e7eb;
}

body.dark-mode .call-header {
    border-color: rgba(148, 163, 184, .22);
}

body.dark-mode .call-header p,
body.dark-mode .call-device-grid label {
    color: #94a3b8;
}

body.dark-mode .call-timer,
body.dark-mode .call-control-btn {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark-mode .call-control-btn.active {
    background: #e13f55;
    color: #fff;
}

body.dark-mode .call-device-grid select {
    background: #0f172a;
    color: #e5e7eb;
    border-color: rgba(148, 163, 184, .24);
}

@media (max-width: 700px) {
    .call-controls {
        padding: 14px 16px 0;
    }

    .call-control-btn {
        flex: 1 1 130px;
    }

    .call-device-grid {
        grid-template-columns: 1fr;
        padding: 12px 16px 18px;
    }
}


/* Modern redesigned audio/video call modal */
.call-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(6, 12, 25, 0.62);
    backdrop-filter: blur(12px);
    z-index: 10020;
}

.call-overlay.hidden {
    display: none !important;
}

.call-card {
    width: min(920px, 96vw);
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    box-shadow: 0 28px 100px rgba(2, 8, 23, 0.6);
    color: #f8fafc;
}

.call-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.12));
}

.call-header-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.call-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4f46e5, #8b5cf6);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.call-header-icon .icon-svg {
    width: 24px;
    height: 24px;
}

.call-header-copy {
    min-width: 0;
}

.call-header h3 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
}

.call-status-line {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.call-status-badge,
.call-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}

.call-status-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.call-timer {
    background: rgba(15, 23, 42, 0.78);
    color: #cbd5e1;
    min-width: 72px;
}

.call-end-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 16px;
    padding: 13px 18px;
    background: linear-gradient(135deg, #fb7185, #ef4444);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.3);
}

.call-end-btn .icon-svg {
    width: 18px;
    height: 18px;
}

.call-video-area,
.call-audio-area {
    position: relative;
    min-height: 430px;
    background: radial-gradient(circle at top, rgba(59,130,246,.18), transparent 34%), linear-gradient(180deg, #081226, #0b1220 46%, #0a1020);
}

.call-video-area {
    display: block;
}

.call-video-area video#remoteVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

.call-remote-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #dbeafe;
    padding: 24px;
}

.call-placeholder-icon {
    width: 88px;
    height: 88px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(168,85,247,.95));
    box-shadow: 0 20px 40px rgba(79,70,229,.25);
}

.call-placeholder-icon .icon-svg {
    width: 36px;
    height: 36px;
}

.call-remote-placeholder strong {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

.call-remote-placeholder span {
    color: #cbd5e1;
    font-size: 15px;
}

.call-video-area.remote-ready .call-remote-placeholder {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.call-self-preview {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: min(220px, 28vw);
    aspect-ratio: 16 / 10;
    border-radius: 22px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.72);
    background: linear-gradient(135deg, rgba(129,140,248,.85), rgba(99,102,241,.72));
    box-shadow: 0 16px 34px rgba(2, 8, 23, 0.45);
}

.call-self-preview video,
#localVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

.call-audio-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 22px;
    text-align: center;
}

.call-audio-avatar {
    width: 110px;
    height: 110px;
    border-radius: 32px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    box-shadow: 0 22px 40px rgba(99, 102, 241, 0.32);
}

.call-audio-area strong {
    font-size: 30px;
    line-height: 1.1;
    color: #fff;
}

.call-audio-subtitle,
.call-audio-area span {
    color: #cbd5e1;
    font-size: 15px;
}

.call-bottom-bar {
    padding: 18px 22px 22px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(10, 16, 32, 0.98));
    border-top: 1px solid rgba(255,255,255,.08);
}

.call-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.call-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06);
    color: #f8fafc;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.call-control-btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.1);
}

.call-control-btn.active {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.38);
    color: #fde68a;
}

.call-control-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
}

.call-control-icon svg {
    width: 18px;
    height: 18px;
}

.call-control-label {
    line-height: 1;
}

.call-device-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.call-device-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255,255,255,.08);
}

.call-device-field span {
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.call-device-grid select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    padding: 10px 12px;
    outline: none;
    font: inherit;
}

.call-device-grid select:focus {
    border-color: rgba(96, 165, 250, 0.75);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.call-device-field.hidden,
.hidden {
    display: none !important;
}

.incoming-call-modal {
    width: min(500px, 100%);
    border-radius: 28px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.24);
}

.incoming-call-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.incoming-call-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4f46e5, #8b5cf6);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    flex: 0 0 auto;
}

.incoming-call-copy {
    min-width: 0;
}

.incoming-call-kicker {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4f46e5;
}

.incoming-call-modal h3 {
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.1;
    color: #0f172a;
}

.incoming-call-modal p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}

.incoming-call-actions {
    justify-content: flex-end;
}

.incoming-call-actions .modal-cancel,
.incoming-call-actions .modal-confirm {
    min-width: 120px;
    border-radius: 16px;
    padding: 13px 18px;
}

@media (max-width: 900px) {
    .call-card {
        width: min(98vw, 760px);
    }

    .call-video-area,
    .call-audio-area {
        min-height: 360px;
    }

    .call-device-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .call-overlay {
        padding: 12px;
    }

    .call-card {
        width: 100%;
        border-radius: 22px;
    }

    .call-header {
        flex-direction: column;
        align-items: stretch;
    }

    .call-header h3 {
        font-size: 22px;
    }

    .call-end-btn {
        width: 100%;
    }

    .call-video-area,
    .call-audio-area {
        min-height: 300px;
    }

    .call-self-preview {
        width: 140px;
        right: 14px;
        bottom: 14px;
        border-radius: 18px;
    }

    .call-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .call-control-btn {
        width: 100%;
    }

    .incoming-call-top {
        align-items: flex-start;
    }

    .incoming-call-modal h3 {
        font-size: 22px;
    }

    .incoming-call-actions {
        flex-direction: column-reverse;
    }

    .incoming-call-actions .modal-cancel,
    .incoming-call-actions .modal-confirm {
        width: 100%;
    }
}


/* Hard fix for call modal layout and cached old styles */
#callOverlay,
#callOverlay * {
    box-sizing: border-box;
}

#callOverlay.hidden {
    display: none !important;
}

#callOverlay:not(.hidden) {
    display: grid !important;
}

#callOverlay .call-card {
    width: min(920px, 96vw) !important;
    max-width: 920px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
    color: #f8fafc !important;
    box-shadow: 0 28px 100px rgba(2,8,23,.6) !important;
}

#callOverlay .call-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 20px 22px !important;
    background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(139,92,246,.12)) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

#callOverlay .call-header-main {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

#callOverlay .call-header-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #4f46e5, #8b5cf6) !important;
    color: #fff !important;
}

#callOverlay .call-header-icon .icon-svg,
#callOverlay .call-end-btn .icon-svg,
#callOverlay .call-placeholder-icon .icon-svg {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#callOverlay .call-header h3 {
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    color: #fff !important;
}

#callOverlay .call-status-line {
    margin-top: 8px !important;
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

#callOverlay .call-status-badge,
#callOverlay .call-timer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
}

#callOverlay .call-end-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 18px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #fb7185, #ef4444) !important;
    color: #fff !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

#callOverlay .call-video-area,
#callOverlay .call-audio-area {
    position: relative !important;
    min-height: 430px !important;
    background: radial-gradient(circle at top, rgba(59,130,246,.18), transparent 34%), linear-gradient(180deg, #081226, #0b1220 46%, #0a1020) !important;
}

#callOverlay .call-video-area video#remoteVideo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#callOverlay .call-remote-placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    padding: 24px !important;
}

#callOverlay .call-video-area.remote-ready .call-remote-placeholder {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#callOverlay .call-self-preview {
    position: absolute !important;
    right: 22px !important;
    bottom: 22px !important;
    width: min(220px, 28vw) !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 2px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 16px 34px rgba(2,8,23,.45) !important;
    background: linear-gradient(135deg, rgba(129,140,248,.85), rgba(99,102,241,.72)) !important;
}

#callOverlay .call-self-preview video,
#callOverlay #localVideo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#callOverlay .call-audio-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 40px 22px !important;
    text-align: center !important;
}

#callOverlay .call-audio-avatar {
    width: 110px !important;
    height: 110px !important;
    border-radius: 32px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #6366f1, #a855f7) !important;
    color: #fff !important;
    font-size: 36px !important;
    font-weight: 800 !important;
}

#callOverlay .call-bottom-bar {
    padding: 18px 22px 22px !important;
    background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(10,16,32,.98)) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

#callOverlay .call-controls {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
}

#callOverlay .call-control-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-width: 140px !important;
    min-height: 52px !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.06) !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#callOverlay .call-control-btn.active {
    background: rgba(251,191,36,.18) !important;
    border-color: rgba(251,191,36,.38) !important;
    color: #fde68a !important;
}

#callOverlay .call-control-btn .call-control-icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
}

#callOverlay .call-control-btn .call-control-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

#callOverlay .call-control-btn .call-control-label {
    display: inline-block !important;
    line-height: 1 !important;
}

#callOverlay .call-device-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

#callOverlay .call-device-field,
#callOverlay .call-device-grid label {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #cbd5e1 !important;
}

#callOverlay .call-device-grid label span,
#callOverlay .call-device-field span {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #cbd5e1 !important;
}

#callOverlay .call-device-grid select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    background: rgba(15,23,42,.88) !important;
    color: #fff !important;
    font: inherit !important;
    outline: none !important;
}

#callOverlay .hidden,
#callOverlay [hidden],
#callOverlay .call-device-field.hidden,
#callOverlay .call-device-grid label.hidden {
    display: none !important;
}

@media (max-width: 900px) {
    #callOverlay .call-device-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    #callOverlay {
        padding: 12px !important;
    }
    #callOverlay .call-card {
        width: 100% !important;
        border-radius: 22px !important;
    }
    #callOverlay .call-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #callOverlay .call-end-btn {
        width: 100% !important;
    }
    #callOverlay .call-video-area,
    #callOverlay .call-audio-area {
        min-height: 300px !important;
    }
    #callOverlay .call-self-preview {
        width: 140px !important;
        right: 14px !important;
        bottom: 14px !important;
        border-radius: 18px !important;
    }
    #callOverlay .call-controls {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #callOverlay .call-control-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* Extra visible color fix for call controls */
#callOverlay .call-bottom-bar,
#callOverlay .call-controls,
#callOverlay .call-device-grid {
    color: #f8fafc !important;
}

#callOverlay .call-control-btn,
#callOverlay button.call-control-btn {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148,163,184,.22) !important;
}

#callOverlay .call-control-btn .call-control-label,
#callOverlay .call-control-btn .call-control-icon,
#callOverlay .call-control-btn .call-control-icon svg {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
}

#callOverlay .call-control-btn.active,
#callOverlay button.call-control-btn.active {
    background: rgba(217,119,6,.22) !important;
    color: #fde68a !important;
    border-color: rgba(245,158,11,.35) !important;
}

#callOverlay .call-device-grid label,
#callOverlay .call-device-field {
    background: rgba(15,23,42,.85) !important;
}

#callOverlay .call-device-grid select,
#callOverlay select#microphoneSelect,
#callOverlay select#cameraSelect,
#callOverlay select#speakerSelect {
    background: #273449 !important;
    color: #ffffff !important;
}


/* Visible voice-recording state */
#recordVoiceBtn.is-recording {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.28) !important;
    animation: recordPulse 1.2s ease-in-out infinite;
}

#recordVoiceBtn.is-recording:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

.recording-indicator {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    margin-left: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.18);
    color: #991b1b;
    align-self: center;
}

.recording-indicator.hidden {
    display: none !important;
}

.recording-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
    animation: recordDotPulse 1.2s ease-in-out infinite;
    flex: 0 0 12px;
}

.recording-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.recording-copy strong {
    font-size: 13px;
    color: #7f1d1d;
}

.recording-copy span {
    font-size: 12px;
    color: #b91c1c;
}

.recording-timer {
    margin-left: auto;
    font-size: 13px;
    font-weight: 800;
    color: #991b1b;
    background: rgba(255,255,255,0.72);
    padding: 6px 10px;
    border-radius: 999px;
}

@keyframes recordPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes recordDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.52); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

body.dark-mode .recording-indicator {
    background: rgba(127, 29, 29, 0.32);
    border-color: rgba(248, 113, 113, 0.28);
    color: #fecaca;
}

body.dark-mode .recording-copy strong,
body.dark-mode .recording-timer {
    color: #fee2e2;
}

body.dark-mode .recording-copy span {
    color: #fca5a5;
}

body.dark-mode .recording-timer {
    background: rgba(15, 23, 42, 0.72);
}

@media (max-width: 900px) {
    .fixed-bottom-form {
        flex-wrap: wrap;
    }

    .recording-indicator {
        order: 10;
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }
}


/* Compact voice-recording pill */
.recording-indicator,
.fixed-bottom-form .recording-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 88px !important;
    width: auto !important;
    height: 36px !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(239, 68, 68, 0.10) !important;
    border: 1px solid rgba(239, 68, 68, 0.20) !important;
    color: #991b1b !important;
    align-self: center !important;
    flex: 0 0 auto !important;
}

.recording-indicator.hidden {
    display: none !important;
}

.recording-label {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    color: #991b1b !important;
}

.recording-dot {
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px !important;
}

.recording-timer {
    margin-left: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: #991b1b !important;
}

.recording-copy {
    display: none !important;
}

@media (max-width: 900px) {
    .fixed-bottom-form {
        flex-wrap: nowrap !important;
    }

    .recording-indicator,
    .fixed-bottom-form .recording-indicator {
        order: initial !important;
        width: auto !important;
        min-width: 76px !important;
        height: 34px !important;
        margin-left: 4px !important;
        margin-top: 0 !important;
        padding: 0 8px !important;
        gap: 5px !important;
    }

    .recording-label {
        font-size: 10px !important;
    }

    .recording-timer {
        font-size: 11px !important;
    }
}

body.dark-mode .recording-indicator,
body.dark-mode .fixed-bottom-form .recording-indicator {
    background: rgba(127, 29, 29, 0.32) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
    color: #fee2e2 !important;
}

body.dark-mode .recording-label,
body.dark-mode .recording-timer {
    color: #fee2e2 !important;
}


/* Hide the always-visible add-reaction emoji under messages */
.reaction-add,
button[data-reaction-menu] {
    display: none !important;
}

.reaction-row:empty {
    display: none !important;
}


/* Fix message input width in chat composer */
#messageForm,
.message-form.fixed-bottom-form,
.fixed-bottom-form {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
}

#messageForm .attachment-input {
    display: none !important;
}

#emojiBtn,
#attachBtn,
#recordVoiceBtn,
.fixed-bottom-form .recording-indicator,
#messageForm > button[type="submit"] {
    flex: 0 0 auto !important;
}

#emojiBtn,
#attachBtn,
#recordVoiceBtn {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
}

#messageInput,
.chat-panel #messageInput,
.chat-main #messageInput {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 280px !important;
    max-width: none !important;
    height: 52px !important;
    padding: 0 18px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

#messageInput::placeholder {
    font-size: 16px !important;
}

#messageForm > button[type="submit"],
.chat-panel #messageForm > button[type="submit"],
.chat-main #messageForm > button[type="submit"] {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 52px !important;
}

#messageForm .reply-bar,
.fixed-bottom-form .reply-bar {
    order: -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    #messageForm,
    .message-form.fixed-bottom-form,
    .fixed-bottom-form {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 10px 12px calc(10px + var(--mobile-safe-bottom)) !important;
    }

    #emojiBtn,
    #attachBtn,
    #recordVoiceBtn {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
    }

    #messageInput,
    .chat-panel #messageInput,
    .chat-main #messageInput {
        order: 2 !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        font-size: 16px !important;
    }

    #messageForm > button[type="submit"],
    .chat-panel #messageForm > button[type="submit"],
    .chat-main #messageForm > button[type="submit"] {
        order: 3 !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 48px !important;
    }

    .fixed-bottom-form .recording-indicator {
        order: 4 !important;
    }
}


/* Final fix: make public room composer match private chat layout */
.chat-main #messageForm,
.chat-panel #messageForm,
#messageForm {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.chat-main #emojiBtn,
.chat-main #attachBtn,
.chat-main #recordVoiceBtn,
.chat-panel #emojiBtn,
.chat-panel #attachBtn,
.chat-panel #recordVoiceBtn,
#emojiBtn,
#attachBtn,
#recordVoiceBtn {
    flex: 0 0 52px !important;
}

.chat-main #messageInput,
.chat-panel #messageInput,
#messageInput {
    display: block !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

.chat-main #messageForm > button[type="submit"],
.chat-panel #messageForm > button[type="submit"],
#messageForm > button[type="submit"] {
    flex: 0 0 132px !important;
    margin: 0 !important;
    align-self: center !important;
}

.chat-main #messageInput,
.chat-panel #messageInput,
#messageInput,
.chat-main #messageForm > button[type="submit"],
.chat-panel #messageForm > button[type="submit"],
#messageForm > button[type="submit"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

@media (max-width: 900px) {
    .chat-main #messageForm,
    .chat-panel #messageForm,
    #messageForm {
        display: grid !important;
        grid-template-columns: repeat(3, 46px) minmax(0, 1fr) !important;
        align-items: center !important;
    }

    .chat-main #messageInput,
    .chat-panel #messageInput,
    #messageInput {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .chat-main #messageForm > button[type="submit"],
    .chat-panel #messageForm > button[type="submit"],
    #messageForm > button[type="submit"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}


/* Message actions in 3-dots dropdown */
.message-actions {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 8px !important;
    position: relative !important;
}

.message-actions-dropdown {
    position: relative;
}

.message-menu-toggle {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: #eef2f7;
    color: #475569;
    cursor: pointer;
}

.message-menu-toggle:hover,
.message-menu-toggle.open {
    background: #dfe7f3;
    color: #0f172a;
}

.message-menu-toggle .icon-svg,
.message-menu-toggle .icon-svg svg {
    width: 18px;
    height: 18px;
    display: block;
}

.message-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 170px;
    padding: 8px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    z-index: 30;
}

.message-row.mine .message-menu {
    left: auto;
    right: 0;
}

.message-menu.open {
    display: grid;
    gap: 4px;
}

.message-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #0f172a;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.message-menu-item:hover {
    background: #f1f5f9;
}

.message-menu-item.danger {
    color: #0f172a;
}

.message-menu-item .icon-svg,
.message-menu-item .icon-svg svg {
    width: 16px;
    height: 16px;
    display: block;
}

body.dark-mode .message-menu {
    background: #172033;
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.42);
}

body.dark-mode .message-menu-toggle {
    background: #1e293b;
    color: #cbd5e1;
}

body.dark-mode .message-menu-toggle:hover,
body.dark-mode .message-menu-toggle.open {
    background: #334155;
    color: #ffffff;
}

body.dark-mode .message-menu-item {
    color: #e2e8f0;
}

body.dark-mode .message-menu-item:hover {
    background: #243043;
}

body.dark-mode .message-menu-item.danger {
    color: #e2e8f0;
}


/* Final visibility fix for 3-dots message menu */
.message-row,
.message-bubble,
.message-actions,
.message-actions-dropdown {
    overflow: visible !important;
}

.message-actions {
    z-index: 4 !important;
}

.message-actions-dropdown {
    isolation: isolate;
}

.message-menu {
    min-width: 190px !important;
    max-width: min(240px, calc(100vw - 32px)) !important;
    z-index: 999 !important;
}

.message-menu-item {
    justify-content: flex-start !important;
    white-space: nowrap !important;
}

.message-menu-item .btn-label {
    display: inline-block !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* Final alignment fix for message avatar and 3-dots button */
.message-row,
.message-row.mine {
    align-items: flex-start !important;
    gap: 10px !important;
}

.chat-avatar {
    align-self: flex-start !important;
    margin: 2px 0 0 0 !important;
}

.message-bubble {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.message-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.message-top {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
}

.message-top strong {
    display: block !important;
    line-height: 1.15 !important;
}

.message-top time {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

.message-actions {
    margin-top: 0 !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
}

.message-actions-dropdown {
    display: flex !important;
    align-items: flex-start !important;
}

.message-menu-toggle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
}

@media (max-width: 900px) {
    .message-row,
    .message-row.mine {
        gap: 8px !important;
    }

    .chat-avatar {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        margin-bottom: 2px !important;
    }

    .message-menu-toggle {
        width: 30px !important;
        height: 30px !important;
    }
}


/* Hide old per-message reaction bar (removes unwanted red X reactions) */
.reaction-row,
.reaction-chip,
.reaction-add,
button[data-react],
button[data-reaction-menu] {
    display: none !important;
}


/* Avatar position like reference image */
.message-row {
    align-items: flex-start !important;
}

.message-row .chat-avatar {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin-top: 2px !important;
}

.message-row .message-bubble {
    margin-top: 0 !important;
}

.message-row.mine .chat-avatar {
    order: 2 !important;
}

.message-row.mine .message-bubble {
    order: 1 !important;
}


/* Final fix: keep own avatar on the left like other users */
.message-row.mine {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.message-row.mine .chat-avatar {
    order: 0 !important;
    align-self: flex-start !important;
    margin: 2px 0 0 0 !important;
}

.message-row.mine .message-bubble {
    order: 0 !important;
    margin-top: 0 !important;
}

@media (max-width: 900px) {
    .message-row.mine {
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 560px) {
    .message-row.mine {
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
}

/* Hide empty message text blocks after removing ghost X content */
.message-text:empty {
    display: none !important;
}


/* Make Delete menu item same style as others */
.message-menu-item.danger,
.message-menu-item.danger .btn-label,
.message-menu-item.danger .icon-svg,
.message-menu-item.danger .icon-svg svg {
    color: inherit !important;
}

body.dark-mode .message-menu-item.danger,
body.dark-mode .message-menu-item.danger .btn-label,
body.dark-mode .message-menu-item.danger .icon-svg,
body.dark-mode .message-menu-item.danger .icon-svg svg {
    color: inherit !important;
}


/* Final clean menu styles */
.message-menu-item,
.message-menu-item.danger,
.message-menu-item[data-delete],
.message-menu button[data-delete] {
    background: transparent !important;
    color: #0f172a !important;
}

.message-menu-item:hover,
.message-menu-item.danger:hover,
.message-menu-item[data-delete]:hover,
.message-menu button[data-delete]:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

body.dark-mode .message-menu-item,
body.dark-mode .message-menu-item.danger,
body.dark-mode .message-menu-item[data-delete],
body.dark-mode .message-menu button[data-delete] {
    background: transparent !important;
    color: #e2e8f0 !important;
}

body.dark-mode .message-menu-item:hover,
body.dark-mode .message-menu-item.danger:hover,
body.dark-mode .message-menu-item[data-delete]:hover,
body.dark-mode .message-menu button[data-delete]:hover {
    background: #243043 !important;
    color: #e2e8f0 !important;
}

/* Admin report/message visibility improvements */
.report-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.report-help-text {
    margin-top: -8px;
    margin-bottom: 16px;
}

.report-number-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2f5fe4;
    font-weight: 900;
}

.report-detail-cell {
    min-width: 280px;
}

.report-meta-line {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.reported-message-box,
.report-reason-box {
    background: #f8fbff;
    border: 1px solid #e7edf6;
    border-radius: 14px;
    padding: 10px 12px;
    margin-top: 8px;
}

.reported-message-box p,
.report-reason-box p {
    margin: 6px 0 0;
}

.admin-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #4169e1;
    color: #fff !important;
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: 800;
    line-height: 1;
}

.admin-action-link:hover {
    filter: brightness(.96);
}

.target-message-row {
    background: #fff7ed;
    box-shadow: inset 4px 0 0 #f59e0b;
}

.target-message-row td {
    border-bottom-color: #fed7aa;
}


/* Admin report notification badge and reported-message opening fix */
.admin-side-nav a {
    justify-content: space-between;
}

.admin-nav-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e13f55;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(225, 63, 85, 0.25);
}

.admin-side-nav a.active .admin-nav-badge {
    background: #2f5fe4;
    box-shadow: 0 8px 18px rgba(47, 95, 228, 0.22);
}

.reported-message-summary {
    border: 2px solid #f59e0b !important;
    background: #fffaf0;
    scroll-margin-top: 24px;
}

.reported-message-summary h2 {
    margin-bottom: 10px;
}


/* Admin panel width setting: Boxed / Full Width */
body.admin-page.admin-layout-mode-boxed .admin-layout {
    width: min(100%, 1080px) !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

body.admin-page.admin-layout-mode-boxed .admin-header,
body.admin-page.admin-layout-mode-boxed .stats-grid,
body.admin-page.admin-layout-mode-boxed .admin-card,
body.admin-page.admin-layout-mode-boxed .alert {
    max-width: 100% !important;
}

body.admin-page.admin-layout-mode-boxed .admin-card#reports,
body.admin-page.admin-layout-mode-boxed .admin-card#messages,
body.admin-page.admin-layout-mode-boxed .reported-message-focus-card {
    border-radius: 22px !important;
    border: 1px solid #e7edf6 !important;
}

body.admin-page.admin-layout-mode-boxed .table-wrap {
    border-radius: 16px !important;
    border: 1px solid #eef2f7 !important;
    background: #ffffff !important;
}

body.admin-page.admin-layout-mode-full .admin-layout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

body.admin-page.admin-layout-mode-full .admin-card,
body.admin-page.admin-layout-mode-full .stats-grid,
body.admin-page.admin-layout-mode-full .admin-header,
body.admin-page.admin-layout-mode-full .alert {
    max-width: none !important;
}

@media (max-width: 920px) {
    body.admin-page.admin-layout-mode-boxed .admin-layout,
    body.admin-page.admin-layout-mode-full .admin-layout {
        width: 100% !important;
        max-width: none !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* Main chat width setting: Full Width / Boxed. Full Width remains default. */
body.chat-page.chat-layout-mode-full .app-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.chat-page.chat-layout-mode-boxed {
    background: #eaf0f8 !important;
    padding: 24px !important;
    overflow: hidden !important;
}

body.chat-page.chat-layout-mode-boxed .app-shell {
    width: min(100%, 1320px) !important;
    max-width: 1320px !important;
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16) !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
}

body.chat-page.chat-layout-mode-boxed .sidebar,
body.chat-page.chat-layout-mode-boxed .chat-panel,
body.chat-page.chat-layout-mode-boxed .chat-main {
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
}

body.chat-page.chat-layout-mode-boxed .chat-header {
    border-top-right-radius: 28px !important;
}

body.chat-page.chat-layout-mode-boxed .sidebar {
    border-top-left-radius: 28px !important;
    border-bottom-left-radius: 28px !important;
}

body.dark-mode.chat-page.chat-layout-mode-boxed {
    background: #0f172a !important;
}

@media (max-width: 920px) {
    body.chat-page.chat-layout-mode-boxed {
        padding: 0 !important;
        background: #f4f7fb !important;
    }

    body.chat-page.chat-layout-mode-boxed .app-shell {
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    body.chat-page.chat-layout-mode-boxed .sidebar,
    body.chat-page.chat-layout-mode-boxed .chat-panel,
    body.chat-page.chat-layout-mode-boxed .chat-main {
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
}


/* Site name/logo settings */
.site-logo-preview-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
}

.site-logo-preview {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.logo-remove-label {
    margin: 0 !important;
}

.admin-logo-img,
.admin-brand .admin-logo-img {
    object-fit: cover;
    padding: 0 !important;
    background: #fff !important;
}

.chat-brand-row,
.auth-site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-site-logo,
.auth-site-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    object-fit: cover;
    flex: 0 0 42px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.chat-site-logo.fallback,
.auth-site-logo.fallback {
    display: inline-grid;
    place-items: center;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.auth-site-brand {
    justify-content: center;
    margin-bottom: 18px;
    font-size: 20px;
    color: #0f172a;
}

body.dark-mode .site-logo-preview,
body.dark-mode .chat-site-logo,
body.dark-mode .auth-site-logo,
body.dark-mode .admin-logo-img {
    border-color: rgba(148, 163, 184, 0.18);
    background: #0f172a !important;
}

@media (max-width: 560px) {
    .chat-site-logo,
    .auth-site-logo {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 12px;
    }
}


/* Desktop reply composer fix: keep reply preview compact above the input row */
@media (min-width: 901px) {
    #messageForm.has-reply,
    .chat-main #messageForm.has-reply,
    .chat-panel #messageForm.has-reply,
    .message-form.fixed-bottom-form.has-reply,
    .fixed-bottom-form.has-reply {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        align-content: flex-start !important;
        gap: 8px 12px !important;
    }

    #messageForm.has-reply .reply-bar,
    .chat-main #messageForm.has-reply .reply-bar,
    .chat-panel #messageForm.has-reply .reply-bar,
    .fixed-bottom-form.has-reply .reply-bar {
        order: -10 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 42px !important;
        height: auto !important;
        margin: 0 0 2px 0 !important;
        padding: 8px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #messageForm.has-reply .reply-bar span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #messageForm.has-reply .reply-bar button,
    #messageForm.has-reply #cancelReply {
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    #messageForm.has-reply #emojiBtn,
    #messageForm.has-reply #attachBtn,
    #messageForm.has-reply #recordVoiceBtn {
        order: 1 !important;
        flex: 0 0 52px !important;
    }

    #messageForm.has-reply #messageInput {
        order: 2 !important;
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 260px !important;
        max-width: none !important;
    }

    #messageForm.has-reply > button[type="submit"] {
        order: 3 !important;
        flex: 0 0 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
    }

    #messageForm.has-reply .recording-indicator {
        order: 4 !important;
    }
}

/* Keep the working mobile reply layout unchanged, just make the preview tidy */
@media (max-width: 900px) {
    #messageForm.has-reply .reply-bar {
        flex: 1 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #messageForm.has-reply .reply-bar span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}


/* MOBILE TOP GAP FIX: remove blank/glass area below room title */
@media (max-width: 980px) {
    .chat-panel,
    .chat-main {
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    .chat-header {
        min-height: auto !important;
        padding: 8px 12px 6px !important;
        gap: 4px !important;
        margin: 0 !important;
    }

    .chat-header h2 {
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .chat-header .muted,
    .chat-subtitle,
    #chatSubtitle {
        margin: 2px 0 0 !important;
        line-height: 1.2 !important;
    }

    #typingIndicator,
    .typing-indicator {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    #messages,
    .messages,
    .chat-panel .messages,
    .chat-main .messages {
        grid-row: 2 !important;
        margin: 0 !important;
        padding: 6px 10px 12px !important;
        align-content: flex-start !important;
        align-items: stretch !important;
    }

    #messages > .load-older-btn,
    .messages > .load-older-btn {
        margin: 0 auto 6px !important;
    }
}


/* MOBILE RECORDING VISIBILITY FIX */
#messageForm,
.fixed-bottom-form {
    position: relative;
}

@media (max-width: 900px) {
    #messageForm.is-recording,
    .fixed-bottom-form.is-recording {
        padding-top: 52px !important;
    }

    #messageForm.is-recording .recording-indicator:not(.hidden),
    .fixed-bottom-form.is-recording .recording-indicator:not(.hidden) {
        display: inline-flex !important;
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        top: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 999px !important;
        background: rgba(239, 68, 68, 0.12) !important;
        border: 1px solid rgba(239, 68, 68, 0.24) !important;
        color: #991b1b !important;
        z-index: 6 !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
    }

    #messageForm.is-recording .recording-label,
    .fixed-bottom-form.is-recording .recording-label {
        display: inline-block !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: .08em !important;
    }

    #messageForm.is-recording .recording-timer,
    .fixed-bottom-form.is-recording .recording-timer {
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    body.dark-mode #messageForm.is-recording .recording-indicator:not(.hidden),
    body.dark-mode .fixed-bottom-form.is-recording .recording-indicator:not(.hidden) {
        background: rgba(127, 29, 29, 0.36) !important;
        border-color: rgba(248, 113, 113, 0.26) !important;
        color: #fee2e2 !important;
    }

    body.dark-mode #messageForm.is-recording .recording-label,
    body.dark-mode .fixed-bottom-form.is-recording .recording-label,
    body.dark-mode #messageForm.is-recording .recording-timer,
    body.dark-mode .fixed-bottom-form.is-recording .recording-timer {
        color: #fee2e2 !important;
    }
}


/* MOBILE VOICE PLAYER FIX: keep audio controls visible */
.voice-bubble {
    min-width: min(330px, calc(100vw - 96px)) !important;
}

.voice-message {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.voice-message audio {
    width: 260px !important;
    max-width: 100% !important;
    min-width: 240px !important;
    height: 40px !important;
    display: block !important;
}

@media (max-width: 900px) {
    .message-bubble.voice-bubble {
        width: min(300px, calc(100vw - 84px)) !important;
        min-width: min(300px, calc(100vw - 84px)) !important;
        max-width: calc(100vw - 84px) !important;
        padding: 10px 12px !important;
    }

    .message-bubble.voice-bubble .message-header {
        width: 100% !important;
    }

    .voice-message {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 6px !important;
        padding: 8px !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .voice-message audio {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 42px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .voice-message span {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        color: #475569 !important;
    }

    body.dark-mode .voice-message span {
        color: #cbd5e1 !important;
    }
}

@media (max-width: 380px) {
    .message-bubble.voice-bubble {
        width: calc(100vw - 74px) !important;
        min-width: calc(100vw - 74px) !important;
    }
}


/* MODERN PROFILE PAGE */
body.profile-page-modern {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(99, 102, 241, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 24%),
        linear-gradient(180deg, #eef3fb 0%, #e9eff8 100%);
    color: #0f172a;
}

body.profile-page-modern * {
    box-sizing: border-box;
}

.profile-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 28px auto;
}

.profile-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.profile-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #4f46e5;
}

.profile-topbar h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.05;
    color: #0f172a;
}

.profile-topbar p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 15px;
}

.profile-top-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    background: rgba(255, 255, 255, 0.92);
    color: #1e293b;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
}

.profile-link-btn.ghost {
    background: rgba(248, 250, 252, 0.9);
}

.profile-alert {
    margin-bottom: 16px;
    border-radius: 16px;
}

.profile-modern-form {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.profile-sidebar-card,
.profile-main-card {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
}

.profile-sidebar-card {
    padding: 26px;
    position: sticky;
    top: 24px;
}

.profile-main-card {
    padding: 28px;
}

.profile-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.profile-avatar-large {
    width: 128px;
    height: 128px;
    border-radius: 32px;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 35px rgba(79, 70, 229, 0.18);
    background: #dbe4f5;
}

.profile-avatar-large.fallback {
    display: grid;
    place-items: center;
    font-size: 46px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
}

.profile-user-meta {
    text-align: center;
    margin-bottom: 16px;
}

.profile-user-meta h2 {
    margin: 0;
    font-size: 24px;
    color: #0f172a;
}

.profile-user-meta p {
    margin: 6px 0 0;
    color: #64748b;
    word-break: break-word;
}

.profile-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 800;
    margin: 0 auto 18px;
}

.profile-status-pill .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.profile-status-pill.away {
    background: #fff7ed;
    color: #c2410c;
}

.profile-status-pill.busy {
    background: #fef2f2;
    color: #dc2626;
}

.profile-upload-box {
    padding: 16px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.profile-section-label,
.profile-field label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

.profile-upload-box input[type="file"] {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 16px;
    border: 1px dashed #c7d2fe;
    background: #fff;
    color: #334155;
}

.profile-upload-box small {
    display: block;
    margin-top: 8px;
    color: #64748b;
}

.profile-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.profile-section-head h3 {
    margin: 0;
    font-size: 20px;
    color: #0f172a;
}

.profile-section-head p {
    margin: 6px 0 0;
    color: #64748b;
}

.profile-grid.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.profile-field.full {
    margin-top: 4px;
}

.profile-field input,
.profile-field select,
.profile-field textarea {
    width: 100%;
    min-height: 54px;
    border-radius: 18px;
    border: 1px solid #d8e1ee;
    background: #fff;
    padding: 14px 16px;
    font-size: 15px;
    color: #0f172a;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.profile-field textarea {
    min-height: 140px;
    resize: vertical;
}

.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus,
.profile-upload-box input[type="file"]:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.profile-divider {
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.45), transparent);
}

.profile-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.profile-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 16px 30px rgba(59, 130, 246, 0.24);
    cursor: pointer;
}

.profile-save-btn:hover,
.profile-link-btn:hover {
    transform: translateY(-1px);
}

@media (max-width: 920px) {
    .profile-modern-form {
        grid-template-columns: 1fr;
    }

    .profile-sidebar-card {
        position: static;
    }
}

@media (max-width: 680px) {
    .profile-shell {
        width: min(100% - 18px, 1000px);
        margin: 12px auto 24px;
    }

    .profile-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-top-actions {
        width: 100%;
    }

    .profile-top-actions .profile-link-btn {
        flex: 1 1 0;
    }

    .profile-main-card,
    .profile-sidebar-card {
        padding: 18px;
        border-radius: 22px;
    }

    .profile-grid.two-col {
        grid-template-columns: 1fr;
    }

    .profile-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .profile-actions .profile-link-btn,
    .profile-save-btn {
        width: 100%;
    }
}

body.dark-mode.profile-page-modern {
    background:
        radial-gradient(circle at top left, rgba(99, 102, 241, 0.16), transparent 26%),
        linear-gradient(180deg, #0b1120 0%, #111827 100%);
    color: #e5eefb;
}

body.dark-mode.profile-page-modern .profile-topbar h1,
body.dark-mode.profile-page-modern .profile-section-head h3,
body.dark-mode.profile-page-modern .profile-user-meta h2,
body.dark-mode.profile-page-modern .profile-field label,
body.dark-mode.profile-page-modern .profile-section-label {
    color: #f8fafc;
}

body.dark-mode.profile-page-modern .profile-topbar p,
body.dark-mode.profile-page-modern .profile-user-meta p,
body.dark-mode.profile-page-modern .profile-section-head p,
body.dark-mode.profile-page-modern .profile-upload-box small {
    color: #94a3b8;
}

body.dark-mode.profile-page-modern .profile-sidebar-card,
body.dark-mode.profile-page-modern .profile-main-card {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.42);
}

body.dark-mode.profile-page-modern .profile-upload-box,
body.dark-mode.profile-page-modern .profile-link-btn,
body.dark-mode.profile-page-modern .profile-link-btn.ghost,
body.dark-mode.profile-page-modern .profile-field input,
body.dark-mode.profile-page-modern .profile-field select,
body.dark-mode.profile-page-modern .profile-field textarea,
body.dark-mode.profile-page-modern .profile-upload-box input[type="file"] {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #243244;
}

body.dark-mode.profile-page-modern .profile-field input::placeholder,
body.dark-mode.profile-page-modern .profile-field textarea::placeholder {
    color: #64748b;
}

body.dark-mode.profile-page-modern .profile-divider {
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.18), transparent);
}


/* PROFILE MOBILE COMPACT FIX */
@media (max-width: 680px) {
    html, body.profile-page-modern {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .profile-modern-form {
        gap: 12px;
    }

    .profile-topbar {
        margin-bottom: 12px;
        gap: 10px;
    }

    .profile-eyebrow {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .profile-topbar h1 {
        font-size: 22px;
    }

    .profile-topbar p {
        font-size: 13px;
        line-height: 1.35;
        margin-top: 4px;
    }

    .profile-top-actions {
        gap: 8px;
    }

    .profile-top-actions .profile-link-btn {
        min-height: 40px;
        padding: 0 12px;
        border-radius: 12px;
        font-size: 14px;
    }

    .profile-sidebar-card {
        padding: 14px;
        border-radius: 18px;
    }

    .profile-avatar-wrap {
        margin-bottom: 10px;
    }

    .profile-avatar-large {
        width: 88px;
        height: 88px;
        border-radius: 22px;
    }

    .profile-avatar-large.fallback {
        font-size: 32px;
    }

    .profile-user-meta {
        margin-bottom: 10px;
    }

    .profile-user-meta h2 {
        font-size: 17px;
    }

    .profile-user-meta p {
        font-size: 13px;
    }

    .profile-status-pill {
        min-height: 32px;
        padding: 0 10px;
        font-size: 13px;
        margin-bottom: 12px;
    }

    .profile-upload-box {
        padding: 12px;
        border-radius: 16px;
    }

    .profile-upload-box input[type="file"] {
        padding: 10px;
        border-radius: 12px;
        font-size: 13px;
    }

    .profile-upload-box small {
        font-size: 12px;
    }

    .profile-main-card {
        padding: 16px;
        border-radius: 18px;
    }

    .profile-section-head {
        margin-bottom: 12px;
    }

    .profile-section-head h3 {
        font-size: 17px;
    }

    .profile-section-head p {
        font-size: 12px;
        line-height: 1.4;
    }

    .profile-grid.two-col {
        gap: 12px;
        margin-bottom: 12px;
    }

    .profile-field label,
    .profile-section-label {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .profile-field input,
    .profile-field select,
    .profile-field textarea {
        min-height: 46px;
        border-radius: 14px;
        padding: 11px 13px;
        font-size: 14px;
    }

    .profile-field textarea {
        min-height: 100px;
    }

    .profile-divider {
        margin: 18px 0;
    }

    .profile-actions {
        gap: 10px;
        margin-top: 18px;
    }

    .profile-save-btn,
    .profile-actions .profile-link-btn {
        min-height: 46px;
        border-radius: 14px;
        font-size: 14px;
    }
}


/* PROFILE MOBILE TOUCH SCROLL FIX */
@media (max-width: 680px) {
    html,
    body.profile-page-modern {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: static !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
    }

    body.profile-page-modern {
        display: block !important;
    }

    body.profile-page-modern .profile-shell,
    body.profile-page-modern .profile-modern-form,
    body.profile-page-modern .profile-sidebar-card,
    body.profile-page-modern .profile-main-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.profile-page-modern .profile-shell {
        padding-bottom: 40px !important;
    }

    body.profile-page-modern .profile-sidebar-card {
        position: static !important;
        top: auto !important;
    }
}


/* Country selector/profile country pill */
.profile-country-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    margin: -8px auto 16px;
    border: 1px solid #e2e8f0;
}

body.dark-mode.profile-page-modern .profile-country-pill {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #243244;
}

@media (max-width: 680px) {
    .profile-country-pill {
        min-height: 30px;
        padding: 0 10px;
        font-size: 12px;
        margin: -4px auto 10px;
    }
}


/* Video call redesign: portrait chat-box style like reference */
#callOverlay,
#callOverlay * {
    box-sizing: border-box;
}

#callOverlay.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(2px);
}

#callOverlay.hidden {
    display: none !important;
}

#callOverlay .call-card,
#callOverlay .call-card.call-card-portrait {
    position: relative;
    width: min(100%, 414px);
    max-width: 414px;
    height: min(78vh, 680px);
    min-height: 620px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, #8257d7 0%, #401bb8 58%, #16073f 100%);
    color: #ffffff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.32);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.10);
}

#callOverlay .call-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

#callOverlay .call-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

#callOverlay .call-header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #8ab0a6;
    color: #253245;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    font-weight: 800;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    flex: 0 0 auto;
}

#callOverlay .call-header-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#callOverlay .call-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.3rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
}

#callOverlay .call-status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#callOverlay .call-status-badge {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
}

#callOverlay .call-timer {
    display: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
}

#callOverlay .call-timer.is-live {
    display: inline-flex;
}

#callOverlay .call-video-area,
#callOverlay .call-audio-area {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 24px 120px;
    background: transparent;
}

#callOverlay .call-video-area.hidden,
#callOverlay .call-audio-area.hidden,
#callOverlay .call-device-grid,
#callOverlay .call-device-field,
#callOverlay #microphoneSelect,
#callOverlay #cameraSelect,
#callOverlay #speakerSelect {
    display: none !important;
}

#callOverlay .call-video-area video#remoteVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgba(10, 8, 25, 0.18);
    z-index: 1;
}

#callOverlay .call-remote-placeholder,
#callOverlay .call-audio-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    position: relative;
    z-index: 2;
}

#callOverlay .call-hero-avatar,
#callOverlay .call-audio-avatar {
    width: 138px;
    height: 138px;
    border-radius: 999px;
    background: #8ab0a6;
    color: #253245;
    display: grid;
    place-items: center;
    font-size: 4.2rem;
    font-weight: 500;
    border: 4px solid rgba(255,255,255,0.72);
    box-shadow: 0 18px 40px rgba(9, 6, 30, 0.32);
}

#callOverlay .call-remote-placeholder strong,
#callOverlay .call-audio-area strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

#callOverlay .call-remote-placeholder span,
#callOverlay .call-audio-subtitle,
#callOverlay .call-audio-area span {
    font-size: 0.96rem;
    color: rgba(255,255,255,0.90);
    margin: 0;
}

#callOverlay .call-video-area.remote-ready .call-remote-placeholder {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#callOverlay .call-self-preview {
    position: absolute;
    right: 20px;
    top: 82px;
    width: 102px;
    height: 136px;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.35);
    background: rgba(15, 23, 42, 0.45);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    z-index: 3;
}

#callOverlay .call-self-preview video,
#callOverlay #localVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#callOverlay .call-bottom-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 20px 20px;
    background: linear-gradient(180deg, rgba(21,8,58,0.0) 0%, rgba(20,7,55,0.62) 22%, rgba(20,7,55,0.96) 100%);
    border: 0;
}

#callOverlay .call-controls,
#callOverlay .call-controls.call-controls-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: transparent;
    padding: 0;
    border: 0;
}

#callOverlay .call-control-btn,
#callOverlay .call-end-btn {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    box-shadow: none;
    padding: 0;
    transition: transform .16s ease, opacity .16s ease, background .16s ease;
}

#callOverlay .call-control-btn:hover,
#callOverlay .call-end-btn:hover {
    transform: translateY(-1px);
}

#callOverlay .call-control-btn {
    background: rgba(13, 24, 53, 0.92);
    color: #ffffff;
}

#callOverlay .call-control-btn.active {
    background: rgba(255,255,255,0.26);
    color: #ffffff;
}

#callOverlay .call-control-btn .call-control-label {
    display: none !important;
}

#callOverlay .call-control-btn .call-control-icon,
#callOverlay .call-end-btn .icon-svg {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
}

#callOverlay .call-control-btn .call-control-icon svg,
#callOverlay .call-end-btn .icon-svg svg {
    width: 22px;
    height: 22px;
}

#callOverlay .call-end-btn {
    background: #ff3b30;
    color: #ffffff;
}

#callOverlay .call-end-btn span:last-child {
    display: none !important;
}

#callOverlay[data-call-type="audio"] .call-self-preview,
#callOverlay[data-call-type="audio"] #toggleCameraBtn {
    display: none !important;
}

@media (max-width: 640px) {
    #callOverlay.call-overlay {
        padding: 12px;
        align-items: stretch;
    }

    #callOverlay .call-card,
    #callOverlay .call-card.call-card-portrait {
        width: 100%;
        max-width: none;
        min-height: 0;
        height: calc(100vh - 24px);
        border-radius: 24px;
    }

    #callOverlay .call-video-area,
    #callOverlay .call-audio-area {
        padding: 18px 18px 118px;
    }

    #callOverlay .call-self-preview {
        width: 88px;
        height: 118px;
        right: 16px;
        top: 86px;
    }

    #callOverlay .call-hero-avatar,
    #callOverlay .call-audio-avatar {
        width: 124px;
        height: 124px;
        font-size: 3.6rem;
    }
}

/* Instagram-style call layout with in-call chat panel */
#callOverlay:not(.hidden) {
    place-items: center !important;
    padding: 18px !important;
    background: rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(18px) !important;
}

#callOverlay .call-card.call-card-portrait,
#callOverlay .call-card {
    width: min(1180px, 96vw) !important;
    max-width: 1180px !important;
    height: min(820px, 92vh) !important;
    min-height: 560px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    background: #050505 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 28px 100px rgba(0, 0, 0, 0.64) !important;
}

#callOverlay .call-header {
    flex: 0 0 auto !important;
    min-height: 74px !important;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, rgba(16,16,18,0.96), rgba(5,5,5,0.78)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    position: relative !important;
    z-index: 10 !important;
}

#callOverlay .call-header-main {
    min-width: 0 !important;
}

#callOverlay .call-header-avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #f58529, #dd2a7b 48%, #8134af 76%, #515bd4) !important;
    box-shadow: 0 8px 26px rgba(221,42,123,0.28) !important;
}

#callOverlay .call-header h3 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: 280px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#callOverlay .call-status-line {
    margin-top: 5px !important;
    gap: 8px !important;
}

#callOverlay .call-status-badge,
#callOverlay .call-timer {
    min-height: 26px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 0.76rem !important;
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.88) !important;
}

#callOverlay .call-timer.is-live {
    background: rgba(34,197,94,0.16) !important;
    color: #bbf7d0 !important;
}

#callOverlay .call-chat-toggle,
#callOverlay .call-chat-close {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    cursor: pointer !important;
}

#callOverlay .call-chat-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.11) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

#callOverlay .call-chat-toggle:hover {
    background: rgba(255,255,255,0.18) !important;
}

#callOverlay .call-chat-toggle .icon-svg,
#callOverlay .call-chat-toggle svg {
    width: 18px !important;
    height: 18px !important;
}

#callOverlay .call-content-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    background: #000 !important;
}

#callOverlay.call-chat-collapsed .call-content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

#callOverlay .call-stage {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 30% 12%, rgba(131,52,175,0.22), transparent 34%), #000 !important;
}

#callOverlay .call-video-area,
#callOverlay .call-audio-area {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0 108px !important;
    background: radial-gradient(circle at top, rgba(221,42,123,0.18), transparent 34%), linear-gradient(180deg, #050505, #0c0c0e) !important;
}

#callOverlay .call-video-area video#remoteVideo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: #000 !important;
}

#callOverlay .call-remote-placeholder,
#callOverlay .call-audio-area {
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;
    text-align: center !important;
}

#callOverlay .call-hero-avatar,
#callOverlay .call-audio-avatar {
    width: 132px !important;
    height: 132px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #f58529, #dd2a7b 48%, #8134af 76%, #515bd4) !important;
    color: #fff !important;
    border: 4px solid rgba(255,255,255,0.75) !important;
    font-size: 3.6rem !important;
    font-weight: 900 !important;
    box-shadow: 0 18px 46px rgba(0,0,0,0.48) !important;
}

#callOverlay .call-remote-placeholder strong,
#callOverlay .call-audio-area strong {
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
}

#callOverlay .call-remote-placeholder span,
#callOverlay .call-audio-area span,
#callOverlay .call-audio-subtitle {
    color: rgba(255,255,255,0.78) !important;
    font-size: 0.95rem !important;
}

#callOverlay .call-self-preview {
    top: 18px !important;
    right: 18px !important;
    bottom: auto !important;
    width: 132px !important;
    height: 176px !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 2px solid rgba(255,255,255,0.58) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.42) !important;
    z-index: 5 !important;
}

#callOverlay .call-bottom-bar {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 6 !important;
    padding: 30px 22px 22px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.68) 34%, rgba(0,0,0,0.92)) !important;
    border: 0 !important;
}

#callOverlay .call-controls,
#callOverlay .call-controls.call-controls-centered {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#callOverlay .call-control-btn,
#callOverlay button.call-control-btn,
#callOverlay .call-end-btn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #fff !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28) !important;
}

#callOverlay .call-control-btn,
#callOverlay button.call-control-btn {
    background: rgba(255,255,255,0.16) !important;
}

#callOverlay .call-control-btn:hover,
#callOverlay .call-end-btn:hover {
    transform: translateY(-2px) !important;
}

#callOverlay .call-control-btn.active,
#callOverlay button.call-control-btn.active {
    background: rgba(255,255,255,0.34) !important;
    border-color: rgba(255,255,255,0.28) !important;
    color: #fff !important;
}

#callOverlay .call-end-btn {
    background: #ff3040 !important;
    border-color: rgba(255,48,64,0.8) !important;
}

#callOverlay .call-control-btn .call-control-label,
#callOverlay .call-end-btn span:last-child {
    display: none !important;
}

#callOverlay .call-control-btn .call-control-icon,
#callOverlay .call-end-btn .icon-svg,
#callOverlay .call-control-btn .call-control-icon svg,
#callOverlay .call-end-btn .icon-svg svg {
    width: 23px !important;
    height: 23px !important;
}

#callOverlay .call-device-grid,
#callOverlay .call-device-field,
#callOverlay #microphoneSelect,
#callOverlay #cameraSelect,
#callOverlay #speakerSelect {
    display: none !important;
}

#callOverlay .call-chat-panel {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0f0f11 !important;
    border-left: 1px solid rgba(255,255,255,0.10) !important;
    overflow: hidden !important;
}

#callOverlay.call-chat-collapsed .call-chat-panel {
    display: none !important;
}

#callOverlay .call-chat-head {
    flex: 0 0 auto !important;
    min-height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.09) !important;
    background: rgba(255,255,255,0.03) !important;
}

#callOverlay .call-chat-kicker {
    display: block !important;
    color: rgba(255,255,255,0.48) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 4px !important;
}

#callOverlay .call-chat-head strong {
    display: block !important;
    max-width: 250px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff !important;
}

#callOverlay .call-chat-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
}

#callOverlay .call-chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overscroll-behavior: contain !important;
}

#callOverlay .call-chat-empty {
    margin: auto !important;
    max-width: 220px !important;
    color: rgba(255,255,255,0.52) !important;
    text-align: center !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
}

#callOverlay .call-chat-row {
    display: flex !important;
    justify-content: flex-start !important;
}

#callOverlay .call-chat-row.mine {
    justify-content: flex-end !important;
}

#callOverlay .call-chat-bubble {
    max-width: 84% !important;
    padding: 10px 12px !important;
    border-radius: 18px 18px 18px 6px !important;
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
}

#callOverlay .call-chat-row.mine .call-chat-bubble {
    border-radius: 18px 18px 6px 18px !important;
    background: linear-gradient(135deg, #dd2a7b, #8134af) !important;
}

#callOverlay .call-chat-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 4px !important;
    color: rgba(255,255,255,0.62) !important;
    font-size: 0.72rem !important;
}

#callOverlay .call-chat-meta strong,
#callOverlay .call-chat-meta time {
    color: rgba(255,255,255,0.72) !important;
    font-size: inherit !important;
    font-weight: 800 !important;
}

#callOverlay .call-chat-body {
    color: #fff !important;
    line-height: 1.35 !important;
    font-size: 0.94rem !important;
}

#callOverlay .call-chat-attachment {
    margin-top: 8px !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 0.86rem !important;
}

#callOverlay .call-chat-image img {
    display: block !important;
    max-width: 180px !important;
    max-height: 150px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

#callOverlay .call-chat-voice audio {
    width: 210px !important;
    max-width: 100% !important;
    margin-top: 8px !important;
}

#callOverlay .call-chat-form {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 10px !important;
    padding: 14px !important;
    border-top: 1px solid rgba(255,255,255,0.09) !important;
    background: rgba(0,0,0,0.34) !important;
}

#callOverlay .call-chat-form input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.09) !important;
    color: #fff !important;
    padding: 0 15px !important;
    outline: none !important;
}

#callOverlay .call-chat-form input::placeholder {
    color: rgba(255,255,255,0.48) !important;
}

#callOverlay .call-chat-form input:focus {
    border-color: rgba(221,42,123,0.72) !important;
    box-shadow: 0 0 0 3px rgba(221,42,123,0.18) !important;
}

#callOverlay .call-chat-form button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 999px !important;
    border: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: linear-gradient(135deg, #f58529, #dd2a7b 52%, #8134af) !important;
    cursor: pointer !important;
}

#callOverlay .call-chat-form button:disabled,
#callOverlay .call-chat-form input:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

#callOverlay .call-chat-form button svg {
    width: 19px !important;
    height: 19px !important;
}

@media (max-width: 900px) {
    #callOverlay:not(.hidden) {
        padding: 12px !important;
        align-items: stretch !important;
    }

    #callOverlay .call-card.call-card-portrait,
    #callOverlay .call-card {
        width: 100% !important;
        height: calc(100svh - 24px) !important;
        min-height: 0 !important;
        border-radius: 24px !important;
    }

    #callOverlay .call-content-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        position: relative !important;
    }

    #callOverlay .call-chat-panel {
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 92px !important;
        height: min(380px, 46vh) !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        border-radius: 24px !important;
        background: rgba(15,15,17,0.94) !important;
        backdrop-filter: blur(16px) !important;
        box-shadow: 0 22px 62px rgba(0,0,0,0.50) !important;
        z-index: 8 !important;
    }

    #callOverlay.call-chat-collapsed .call-chat-panel {
        display: none !important;
    }

    #callOverlay .call-header {
        flex-direction: row !important;
        align-items: center !important;
        min-height: 68px !important;
    }

    #callOverlay .call-chat-toggle .btn-label {
        display: none !important;
    }

    #callOverlay .call-chat-toggle {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
    }

    #callOverlay .call-self-preview {
        width: 104px !important;
        height: 138px !important;
        top: 14px !important;
        right: 14px !important;
    }

    #callOverlay .call-hero-avatar,
    #callOverlay .call-audio-avatar {
        width: 116px !important;
        height: 116px !important;
        font-size: 3.1rem !important;
    }

    #callOverlay .call-bottom-bar {
        padding: 24px 16px 18px !important;
    }

    #callOverlay .call-controls,
    #callOverlay .call-controls.call-controls-centered {
        display: flex !important;
        gap: 13px !important;
    }

    #callOverlay .call-control-btn,
    #callOverlay button.call-control-btn,
    #callOverlay .call-end-btn {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
}

@media (max-width: 460px) {
    #callOverlay .call-header h3 {
        max-width: 150px !important;
    }

    #callOverlay .call-status-badge {
        max-width: 144px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #callOverlay .call-chat-panel {
        bottom: 86px !important;
        height: min(360px, 44vh) !important;
    }

    #callOverlay .call-chat-messages {
        padding: 12px !important;
    }

    #callOverlay .call-chat-head {
        min-height: 58px !important;
        padding: 11px 12px !important;
    }

    #callOverlay .call-chat-form {
        padding: 11px !important;
    }
}

/* Alignment fix: keep the local camera perfectly inside the rounded preview frame. */
#callOverlay .call-self-preview {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    line-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    clip-path: inset(0 round 22px) !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
}

#callOverlay .call-self-preview::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border: 2px solid rgba(255,255,255,0.62) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
}

#callOverlay .call-self-preview video,
#callOverlay #localVideo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #050505 !important;
    z-index: 1 !important;
}


/* Phone call chat fix: keep the person visible, avoid forced keyboard open, and provide a visible reopen button. */
#callOverlay .call-chat-reopen {
    display: none !important;
    position: absolute !important;
    right: 18px !important;
    bottom: 104px !important;
    z-index: 11 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em !important;
    background: linear-gradient(135deg, #f58529, #dd2a7b 52%, #8134af) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.16) inset !important;
    cursor: pointer !important;
}

#callOverlay .call-chat-reopen .icon-svg,
#callOverlay .call-chat-reopen svg {
    width: 18px !important;
    height: 18px !important;
}

@media (max-width: 900px) {
    #callOverlay:not(.hidden) {
        min-height: var(--call-visual-height, 100dvh) !important;
        height: var(--call-visual-height, 100dvh) !important;
        overflow: hidden !important;
    }

    #callOverlay .call-card.call-card-portrait,
    #callOverlay .call-card {
        height: calc(var(--call-visual-height, 100dvh) - 24px) !important;
        max-height: calc(var(--call-visual-height, 100dvh) - 24px) !important;
    }

    #callOverlay .call-video-area,
    #callOverlay .call-audio-area {
        padding-bottom: 104px !important;
    }

    #callOverlay .call-chat-panel {
        left: 14px !important;
        right: 14px !important;
        top: auto !important;
        bottom: 92px !important;
        height: min(286px, 36dvh) !important;
        max-height: min(286px, 36dvh) !important;
        z-index: 12 !important;
    }

    #callOverlay.call-chat-collapsed .call-chat-reopen {
        display: inline-flex !important;
    }

    #callOverlay.call-chat-collapsed .call-chat-toggle {
        background: linear-gradient(135deg, #f58529, #dd2a7b 52%, #8134af) !important;
        box-shadow: 0 10px 24px rgba(221,42,123,0.26) !important;
    }

    #callOverlay .call-chat-messages {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    #callOverlay .call-chat-bubble {
        max-width: 78% !important;
        padding: 8px 10px !important;
        font-size: 0.9rem !important;
    }

    #callOverlay .call-chat-form {
        padding: 10px !important;
    }

    #callOverlay .call-chat-form input,
    #callOverlay .call-chat-form button {
        height: 42px !important;
    }

    #callOverlay .call-chat-form button {
        width: 42px !important;
        min-width: 42px !important;
    }

    #callOverlay.call-keyboard-open .call-bottom-bar {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(20px) !important;
    }

    #callOverlay.call-keyboard-open .call-chat-panel {
        bottom: 10px !important;
        height: min(218px, 42dvh) !important;
        max-height: min(218px, 42dvh) !important;
    }

    #callOverlay.call-keyboard-open .call-chat-head {
        min-height: 48px !important;
        padding: 8px 12px !important;
    }

    #callOverlay.call-keyboard-open .call-chat-kicker {
        margin-bottom: 1px !important;
    }

    #callOverlay.call-keyboard-open .call-chat-messages {
        padding: 8px 10px !important;
    }

    #callOverlay.call-keyboard-open .call-chat-form {
        padding: 8px 10px 10px !important;
    }
}

@media (max-width: 460px) {
    #callOverlay .call-chat-panel {
        bottom: 88px !important;
        height: min(250px, 34dvh) !important;
        max-height: min(250px, 34dvh) !important;
        border-radius: 22px !important;
    }

    #callOverlay.call-keyboard-open .call-chat-panel {
        bottom: 8px !important;
        height: min(200px, 40dvh) !important;
        max-height: min(200px, 40dvh) !important;
    }

    #callOverlay .call-chat-reopen {
        right: 14px !important;
        bottom: 98px !important;
        height: 42px !important;
        padding: 0 14px !important;
    }
}

/* Mobile preview tune-up: move the self camera higher, make it larger, and free more room for chat messages. */
@media (max-width: 900px) {
    #callOverlay .call-self-preview {
        width: 120px !important;
        height: 164px !important;
        top: 8px !important;
        right: 12px !important;
        border-radius: 22px !important;
    }

    #callOverlay .call-chat-panel {
        height: min(270px, 34dvh) !important;
        max-height: min(270px, 34dvh) !important;
    }

    #callOverlay .call-chat-messages {
        padding: 10px 12px 8px !important;
    }
}

@media (max-width: 460px) {
    #callOverlay .call-self-preview {
        width: 124px !important;
        height: 170px !important;
        top: 6px !important;
        right: 10px !important;
    }

    #callOverlay .call-chat-panel {
        bottom: 88px !important;
        height: min(235px, 31dvh) !important;
        max-height: min(235px, 31dvh) !important;
    }

    #callOverlay.call-keyboard-open .call-chat-panel {
        height: min(190px, 38dvh) !important;
        max-height: min(190px, 38dvh) !important;
    }
}


/* Mobile full-screen call chat: open chat as a full-screen panel with the X close button visible. */
@media (max-width: 900px) {
    #callOverlay .call-chat-panel {
        position: absolute !important;
        inset: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: 0 !important;
        z-index: 40 !important;
        background: #0f0f11 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    #callOverlay .call-chat-head {
        min-height: 64px !important;
        padding: 12px 16px !important;
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        background: rgba(15,15,17,0.98) !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }

    #callOverlay .call-chat-close {
        display: inline-grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,0.12) !important;
        color: #fff !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
    }

    #callOverlay .call-chat-messages {
        flex: 1 1 auto !important;
        padding: 14px 14px 10px !important;
        overflow-y: auto !important;
    }

    #callOverlay .call-chat-form {
        padding: 12px 14px max(14px, env(safe-area-inset-bottom)) !important;
        background: rgba(15,15,17,0.98) !important;
        border-top: 1px solid rgba(255,255,255,0.10) !important;
    }

    #callOverlay.call-keyboard-open .call-chat-panel {
        inset: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        max-height: none !important;
    }

    #callOverlay.call-keyboard-open .call-chat-head {
        min-height: 58px !important;
        padding: 10px 14px !important;
        padding-top: max(10px, env(safe-area-inset-top)) !important;
    }

    #callOverlay.call-keyboard-open .call-chat-messages {
        padding: 10px 12px 8px !important;
    }

    #callOverlay.call-keyboard-open .call-chat-form {
        padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
    }

    #callOverlay.call-chat-collapsed .call-chat-panel {
        display: none !important;
    }
}

@media (max-width: 460px) {
    #callOverlay .call-chat-panel {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
}


/* Blocked users list in the sidebar */
.blocked-users-section.hidden {
    display: none !important;
}

.blocked-sidebar-title {
    margin-top: 18px;
}

.blocked-user-list {
    display: grid;
    gap: 10px;
}

.blocked-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background: rgba(239, 68, 68, .08);
    padding: 8px;
}

.blocked-user-open {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.unblock-user-btn,
.user-item .blocked-pill {
    border: 0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.unblock-user-btn {
    padding: 7px 10px;
    background: #fff;
    color: #dc2626;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
    cursor: pointer;
}

.user-item.blocked {
    background: rgba(239, 68, 68, .06);
}

.user-item .blocked-pill {
    margin-left: auto;
    padding: 3px 7px;
    background: #fee2e2;
    color: #b91c1c;
}

body.dark-mode .blocked-user-item,
body.dark-mode .user-item.blocked {
    background: rgba(239, 68, 68, .14);
}

body.dark-mode .unblock-user-btn {
    background: #1f2937;
    color: #fca5a5;
}

body.dark-mode .user-item .blocked-pill {
    background: rgba(239, 68, 68, .2);
    color: #fca5a5;
}
/* PROFILE DASHBOARD LAYOUT V2 - left menu like the requested mockup */
body.profile-dashboard-page {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 25% 0%, rgba(99, 102, 241, 0.12), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(37, 99, 235, 0.08), transparent 24%),
        linear-gradient(180deg, #f6f8fd 0%, #eef4fc 100%);
    color: #111827;
}

.profile-dashboard-layout,
.profile-dashboard-layout * {
    box-sizing: border-box;
}

.profile-dashboard-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 100vh;
}

.profile-app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 28px 16px 24px;
    background: rgba(255, 255, 255, 0.92);
    border-right: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 14px 0 45px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(20px);
}

.profile-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: -0.03em;
}

.profile-brand-mark {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #2563eb);
    color: #fff;
    box-shadow: 0 14px 26px rgba(79, 70, 229, 0.24);
}

.profile-brand-mark svg,
.profile-nav-icon svg,
.profile-heading-icon svg {
    width: 22px;
    height: 22px;
}

.profile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    color: #344256;
    text-decoration: none;
    font-size: 15px;
    font-weight: 750;
    border: 1px solid transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.profile-nav-item:hover {
    background: #f8fafc;
    color: #3730a3;
    transform: translateX(2px);
}

.profile-nav-item.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.13), rgba(255, 255, 255, 0.9));
    color: #3730a3;
    border-color: rgba(99, 102, 241, 0.14);
    box-shadow: inset -3px 0 0 #6366f1;
}

.profile-nav-icon {
    width: 24px;
    min-width: 24px;
    display: inline-grid;
    place-items: center;
    color: currentColor;
}

.profile-logout-link {
    margin-top: auto;
    border-top: 1px solid #eef2f7;
    padding-top: 18px;
    border-radius: 0;
}

.profile-logout-link:hover {
    border-radius: 14px;
}

.profile-dashboard-main {
    min-width: 0;
    padding: 32px clamp(18px, 4vw, 64px) 40px;
}

.profile-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.profile-dashboard-header h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.04;
    font-weight: 950;
    color: #0f172a;
    letter-spacing: -0.04em;
}

.profile-dashboard-header p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 15px;
}

.profile-header-chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: #1e293b;
    border: 1px solid rgba(203, 213, 225, 0.8);
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.profile-dashboard-form {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.profile-summary-card-v2,
.profile-form-card-v2 {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 28px;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(18px);
}

.profile-summary-card-v2 {
    position: sticky;
    top: 28px;
    padding: 34px 28px 28px;
    min-height: 650px;
}

.profile-avatar-panel {
    text-align: center;
}

.profile-avatar-ring {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 0 auto 18px;
}

.profile-avatar-large-v2 {
    width: 132px;
    height: 132px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: #e2e8f0;
    border: 5px solid #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.profile-avatar-large-v2.fallback {
    display: grid;
    place-items: center;
    font-size: 48px;
    font-weight: 950;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #2563eb);
}

.profile-online-dot {
    position: absolute;
    right: 7px;
    bottom: 13px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 4px solid #fff;
    background: #22c55e;
}

.profile-online-dot.away { background: #f97316; }
.profile-online-dot.busy { background: #ef4444; }

.profile-avatar-panel h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.profile-avatar-panel p {
    margin: 8px 0 18px;
    color: #64748b;
    word-break: break-word;
}

.profile-status-pill-v2 {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-weight: 900;
}

.profile-status-pill-v2 span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
}

.profile-status-pill-v2.away {
    background: #ffedd5;
    color: #c2410c;
}

.profile-status-pill-v2.busy {
    background: #fee2e2;
    color: #b91c1c;
}

.profile-status-pill-v2.dot-only {
    min-height: 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    justify-content: center;
    gap: 0;
}

.profile-status-pill-v2.dot-only > span {
    width: 11px;
    height: 11px;
}

.profile-status-pill-v2.mini-dot {
    display: inline-flex;
    vertical-align: middle;
}

.profile-mini-info-list {
    display: grid;
    gap: 14px;
    margin: 28px 0 24px;
}

.profile-mini-info {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: center;
}

.profile-mini-icon {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: #eef2ff;
    color: #4f46e5;
    font-weight: 900;
}

.profile-mini-info strong {
    display: block;
    font-size: 13px;
    color: #475569;
}

.profile-mini-info small {
    display: block;
    margin-top: 2px;
    color: #334155;
    font-size: 14px;
    line-height: 1.25;
}

.profile-avatar-upload-btn {
    width: fit-content;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px auto 0;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #4f46e5;
    background: #fff;
    font-weight: 900;
    cursor: pointer;
}

.profile-avatar-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.profile-upload-help {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #64748b;
    font-size: 12px;
}

.profile-content-stack-v2 {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.profile-form-card-v2 {
    padding: 28px;
}

.profile-card-heading-v2 {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.profile-heading-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: 18px;
    background: #eef2ff;
    color: #4f46e5;
}

.profile-card-heading-v2 h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 950;
    color: #111827;
    letter-spacing: -0.02em;
}

.profile-card-heading-v2 p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 14px;
}

.profile-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.profile-security-grid-v2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-field-v2.full {
    grid-column: 1 / -1;
}

.profile-field-v2 label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 900;
    color: #334155;
}

.profile-field-v2 input,
.profile-field-v2 select,
.profile-field-v2 textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid #dce5f2;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font-size: 15px;
    padding: 12px 14px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.profile-field-v2 textarea {
    min-height: 106px;
    resize: vertical;
}

.profile-field-v2 input:focus,
.profile-field-v2 select:focus,
.profile-field-v2 textarea:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.profile-card-actions-v2 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.profile-card-actions-v2.compact {
    margin-top: 16px;
}

.profile-primary-btn-v2,
.profile-outline-btn-v2,
.profile-secondary-btn-v2 {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.profile-primary-btn-v2 {
    border: 0;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    color: #fff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.profile-outline-btn-v2 {
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #4f46e5;
    background: #fff;
}

.profile-secondary-btn-v2 {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
}

.profile-primary-btn-v2:hover,
.profile-outline-btn-v2:hover,
.profile-secondary-btn-v2:hover,
.profile-header-chat-btn:hover,
.profile-avatar-upload-btn:hover {
    transform: translateY(-1px);
}

.profile-security-card-v2 {
    scroll-margin-top: 24px;
}

@media (max-width: 1180px) {
    .profile-dashboard-layout {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .profile-dashboard-form {
        grid-template-columns: 1fr;
    }

    .profile-summary-card-v2 {
        position: static;
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .profile-dashboard-layout {
        display: block;
    }

    .profile-app-sidebar {
        position: static;
        height: auto;
        padding: 14px;
        gap: 14px;
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .profile-brand {
        font-size: 21px;
    }

    .profile-nav-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .profile-nav-item {
        min-height: 44px;
        padding: 0 12px;
        font-size: 14px;
    }

    .profile-logout-link {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .profile-dashboard-main {
        padding: 20px 14px 34px;
    }

    .profile-dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-header-chat-btn {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .profile-nav-list {
        grid-template-columns: 1fr;
    }

    .profile-dashboard-header h1 {
        font-size: 27px;
    }

    .profile-form-card-v2,
    .profile-summary-card-v2 {
        border-radius: 22px;
        padding: 18px;
    }

    .profile-grid-v2,
    .profile-security-grid-v2 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .profile-field-empty {
        display: none;
    }

    .profile-card-actions-v2 {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .profile-primary-btn-v2,
    .profile-outline-btn-v2,
    .profile-secondary-btn-v2 {
        width: 100%;
    }
}

body.dark-mode.profile-dashboard-page {
    background:
        radial-gradient(circle at 25% 0%, rgba(99, 102, 241, 0.14), transparent 28%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

body.dark-mode.profile-dashboard-page .profile-app-sidebar,
body.dark-mode.profile-dashboard-page .profile-summary-card-v2,
body.dark-mode.profile-dashboard-page .profile-form-card-v2,
body.dark-mode.profile-dashboard-page .profile-header-chat-btn,
body.dark-mode.profile-dashboard-page .profile-secondary-btn-v2,
body.dark-mode.profile-dashboard-page .profile-outline-btn-v2,
body.dark-mode.profile-dashboard-page .profile-avatar-upload-btn {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(71, 85, 105, 0.8);
}

body.dark-mode.profile-dashboard-page .profile-brand,
body.dark-mode.profile-dashboard-page .profile-dashboard-header h1,
body.dark-mode.profile-dashboard-page .profile-avatar-panel h2,
body.dark-mode.profile-dashboard-page .profile-card-heading-v2 h3,
body.dark-mode.profile-dashboard-page .profile-field-v2 label {
    color: #f8fafc;
}

body.dark-mode.profile-dashboard-page .profile-dashboard-header p,
body.dark-mode.profile-dashboard-page .profile-avatar-panel p,
body.dark-mode.profile-dashboard-page .profile-card-heading-v2 p,
body.dark-mode.profile-dashboard-page .profile-upload-help {
    color: #94a3b8;
}

body.dark-mode.profile-dashboard-page .profile-nav-item,
body.dark-mode.profile-dashboard-page .profile-header-chat-btn,
body.dark-mode.profile-dashboard-page .profile-secondary-btn-v2,
body.dark-mode.profile-dashboard-page .profile-mini-info small {
    color: #cbd5e1;
}

body.dark-mode.profile-dashboard-page .profile-nav-item:hover,
body.dark-mode.profile-dashboard-page .profile-nav-item.active,
body.dark-mode.profile-dashboard-page .profile-mini-icon,
body.dark-mode.profile-dashboard-page .profile-heading-icon {
    background: rgba(99, 102, 241, 0.16);
    color: #c4b5fd;
}

body.dark-mode.profile-dashboard-page .profile-field-v2 input,
body.dark-mode.profile-dashboard-page .profile-field-v2 select,
body.dark-mode.profile-dashboard-page .profile-field-v2 textarea {
    background: #111827;
    border-color: #334155;
    color: #e5e7eb;
}

/* User dashboard pages: messages, calls, blocked users */
.user-dashboard-page .profile-form-card-v2 {
    overflow: hidden;
}

.user-page-main {
    max-width: 1500px;
    width: 100%;
}

.user-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.compact-heading {
    margin-bottom: 18px;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-list-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e6edf7;
    border-radius: 18px;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.dashboard-list-item:hover,
.dashboard-list-item.active {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
    background: linear-gradient(135deg, #ffffff, #f8fbff);
}

.dashboard-list-avatar,
.dashboard-detail-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #6366f1, #2563eb);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.15);
}

.dashboard-detail-avatar {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    font-size: 20px;
}

.dashboard-list-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-list-main strong,
.dashboard-table-user strong,
.user-detail-title h3,
.blocked-user-main-page h3 {
    color: #0f172a;
    font-weight: 900;
}

.dashboard-list-main small {
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-list-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
    color: #94a3b8;
    font-size: 12px;
}

.dashboard-list-side em {
    font-style: normal;
    color: #4f46e5;
    font-weight: 850;
}

.user-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eef2f7;
}

.user-detail-title,
.blocked-user-main-page,
.dashboard-table-user {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.user-detail-title h3,
.blocked-user-main-page h3 {
    margin: 0 0 4px;
    font-size: 20px;
}

.user-detail-title p,
.blocked-user-main-page p,
.dashboard-table-user span {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.small-action {
    min-height: 40px;
    padding: 0 16px;
    white-space: nowrap;
}

.user-message-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - 255px);
    min-height: 420px;
    overflow: auto;
    padding: 4px 2px 8px;
}

.thread-message {
    max-width: 76%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.thread-message.mine {
    align-self: flex-end;
    align-items: flex-end;
}

.thread-message.theirs {
    align-self: flex-start;
    align-items: flex-start;
}

.thread-message-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #94a3b8;
    font-size: 12px;
}

.thread-message-meta strong {
    color: #334155;
}

.thread-message-bubble {
    padding: 12px 14px;
    border-radius: 18px;
    background: #f5f7fb;
    color: #1e293b;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.thread-message.mine .thread-message-bubble {
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    color: #fff;
}

.thread-message-bubble p {
    margin: 0;
    line-height: 1.45;
}

.thread-message-bubble a {
    display: inline-flex;
    margin-top: 8px;
    color: inherit;
    font-weight: 850;
}

.dashboard-empty-state {
    min-height: 300px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
    padding: 32px;
    border: 1px dashed #dbe4f0;
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.72);
    color: #64748b;
}

.dashboard-empty-state.compact {
    min-height: 150px;
    padding: 22px;
}

.dashboard-empty-state strong {
    color: #0f172a;
    font-size: 18px;
}

.dashboard-empty-state p,
.dashboard-empty-state span {
    margin: 0;
}

.empty-state-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

.empty-state-icon svg {
    width: 28px;
    height: 28px;
}

.blocked-grid-page {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 16px;
}

.blocked-user-card-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
    border: 1px solid #e6edf7;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
}

.dashboard-mini-dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.dashboard-mini-dl div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.dashboard-mini-dl dt {
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
}

.dashboard-mini-dl dd {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
    word-break: break-word;
}

.dashboard-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
}

.dashboard-card-actions form {
    margin: 0;
}

.dashboard-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.dashboard-stat-card {
    padding: 18px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
}

.dashboard-stat-card strong {
    display: block;
    font-size: 30px;
    line-height: 1;
    color: #0f172a;
    font-weight: 950;
}

.dashboard-stat-card span {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
}

.calls-table-wrap {
    overflow-x: auto;
}

.dashboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.dashboard-table th {
    padding: 0 12px 6px;
    color: #64748b;
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dashboard-table td {
    padding: 12px;
    background: #fff;
    border-top: 1px solid #e6edf7;
    border-bottom: 1px solid #e6edf7;
    color: #334155;
    font-size: 14px;
}

.dashboard-table td:first-child {
    border-left: 1px solid #e6edf7;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.dashboard-table td:last-child {
    border-right: 1px solid #e6edf7;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.dashboard-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 900;
}

.dashboard-pill.incoming {
    background: #ecfdf5;
    color: #047857;
}

.dashboard-pill.outgoing {
    background: #eff6ff;
    color: #1d4ed8;
}

.dashboard-pill.status-missed,
.dashboard-pill.status-declined,
.dashboard-pill.status-cancelled {
    background: #fef2f2;
    color: #b91c1c;
}

.dashboard-pill.status-completed,
.dashboard-pill.status-ended {
    background: #ecfdf5;
    color: #047857;
}

.dashboard-link {
    color: #4f46e5;
    font-weight: 900;
    text-decoration: none;
}

.dashboard-link:hover {
    text-decoration: underline;
}

@media (max-width: 1050px) {
    .user-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .user-message-thread {
        max-height: none;
        min-height: 320px;
    }

    .dashboard-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-list-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .dashboard-list-side {
        grid-column: 2;
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .user-detail-header,
    .dashboard-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .thread-message {
        max-width: 92%;
    }

    .dashboard-stat-row {
        grid-template-columns: 1fr;
    }

    .dashboard-mini-dl div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

body.dark-mode.profile-dashboard-page .dashboard-list-item,
body.dark-mode.profile-dashboard-page .blocked-user-card-page,
body.dark-mode.profile-dashboard-page .dashboard-stat-card,
body.dark-mode.profile-dashboard-page .dashboard-table td {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(71, 85, 105, 0.8);
}

body.dark-mode.profile-dashboard-page .dashboard-list-main strong,
body.dark-mode.profile-dashboard-page .dashboard-table-user strong,
body.dark-mode.profile-dashboard-page .user-detail-title h3,
body.dark-mode.profile-dashboard-page .blocked-user-main-page h3,
body.dark-mode.profile-dashboard-page .dashboard-stat-card strong,
body.dark-mode.profile-dashboard-page .dashboard-empty-state strong,
body.dark-mode.profile-dashboard-page .dashboard-mini-dl dd {
    color: #f8fafc;
}

body.dark-mode.profile-dashboard-page .dashboard-list-main small,
body.dark-mode.profile-dashboard-page .dashboard-list-side,
body.dark-mode.profile-dashboard-page .user-detail-title p,
body.dark-mode.profile-dashboard-page .blocked-user-main-page p,
body.dark-mode.profile-dashboard-page .dashboard-table-user span,
body.dark-mode.profile-dashboard-page .dashboard-stat-card span,
body.dark-mode.profile-dashboard-page .dashboard-mini-dl dt,
body.dark-mode.profile-dashboard-page .dashboard-table th,
body.dark-mode.profile-dashboard-page .dashboard-table td {
    color: #94a3b8;
}

body.dark-mode.profile-dashboard-page .thread-message-bubble,
body.dark-mode.profile-dashboard-page .dashboard-empty-state {
    background: rgba(30, 41, 59, 0.84);
    border-color: rgba(71, 85, 105, 0.8);
    color: #e5e7eb;
}


/* Clear Back-to-chat navigation for profile/dashboard pages */
.profile-back-chat-link {
    background: #eef4ff;
    color: #3730a3;
    border-color: rgba(99, 102, 241, 0.18);
    font-weight: 900;
}

.profile-back-chat-link:hover {
    background: #e0e7ff;
    color: #312e81;
}

@media (max-width: 900px) {
    .profile-back-chat-link {
        order: -1;
        min-height: 50px;
        background: linear-gradient(135deg, #4f46e5, #2563eb);
        color: #ffffff;
        justify-content: center;
        box-shadow: 0 12px 24px rgba(37, 99, 235, 0.20);
    }

    .profile-back-chat-link:hover {
        background: linear-gradient(135deg, #4338ca, #1d4ed8);
        color: #ffffff;
    }
}

/* FIX: readable private user names in the left sidebar when night/dark mode is enabled only */
body.dark-mode .sidebar .user-item,
body.dark-mode .sidebar .blocked-user-open,
body.dark-mode .sidebar .room-item {
    color: #e5e7eb !important;
}

body.dark-mode .sidebar .user-item .user-meta strong,
body.dark-mode .sidebar .blocked-user-open .user-meta strong,
body.dark-mode .sidebar .current-user-box strong,
body.dark-mode .sidebar .room-item strong {
    color: #ffffff !important;
}

body.dark-mode .sidebar .user-item .user-meta small,
body.dark-mode .sidebar .blocked-user-open .user-meta small,
body.dark-mode .sidebar .current-user-box small,
body.dark-mode .sidebar .room-item small {
    color: #cbd5e1 !important;
}

body.dark-mode .sidebar .sidebar-title {
    color: #94a3b8 !important;
}

body.dark-mode .sidebar .user-item.active .user-meta strong,
body.dark-mode .sidebar .room-item.active strong {
    color: #ffffff !important;
}

/* Global saved theme support: keep dark mode consistent outside chat.php too */
html.dark-mode body,
body.dark-mode {
    background: #0f172a !important;
    color: #e5e7eb !important;
}

html.dark-mode body.profile-dashboard-page,
body.dark-mode.profile-dashboard-page {
    background:
        radial-gradient(circle at 25% 0%, rgba(99, 102, 241, 0.14), transparent 28%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
    color: #e5e7eb !important;
}

html.dark-mode body.profile-dashboard-page .profile-app-sidebar,
html.dark-mode body.profile-dashboard-page .profile-summary-card-v2,
html.dark-mode body.profile-dashboard-page .profile-form-card-v2,
html.dark-mode body.profile-dashboard-page .profile-header-chat-btn,
html.dark-mode body.profile-dashboard-page .profile-secondary-btn-v2,
html.dark-mode body.profile-dashboard-page .profile-outline-btn-v2,
html.dark-mode body.profile-dashboard-page .profile-avatar-upload-btn,
body.dark-mode.profile-dashboard-page .profile-app-sidebar,
body.dark-mode.profile-dashboard-page .profile-summary-card-v2,
body.dark-mode.profile-dashboard-page .profile-form-card-v2,
body.dark-mode.profile-dashboard-page .profile-header-chat-btn,
body.dark-mode.profile-dashboard-page .profile-secondary-btn-v2,
body.dark-mode.profile-dashboard-page .profile-outline-btn-v2,
body.dark-mode.profile-dashboard-page .profile-avatar-upload-btn {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(71, 85, 105, 0.8) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode body.profile-dashboard-page .profile-brand,
html.dark-mode body.profile-dashboard-page .profile-dashboard-header h1,
html.dark-mode body.profile-dashboard-page .profile-avatar-panel h2,
html.dark-mode body.profile-dashboard-page .profile-card-heading-v2 h3,
html.dark-mode body.profile-dashboard-page .profile-field-v2 label,
html.dark-mode body.profile-dashboard-page .profile-mini-info strong,
body.dark-mode.profile-dashboard-page .profile-brand,
body.dark-mode.profile-dashboard-page .profile-dashboard-header h1,
body.dark-mode.profile-dashboard-page .profile-avatar-panel h2,
body.dark-mode.profile-dashboard-page .profile-card-heading-v2 h3,
body.dark-mode.profile-dashboard-page .profile-field-v2 label,
body.dark-mode.profile-dashboard-page .profile-mini-info strong {
    color: #f8fafc !important;
}

html.dark-mode body.profile-dashboard-page .profile-dashboard-header p,
html.dark-mode body.profile-dashboard-page .profile-avatar-panel p,
html.dark-mode body.profile-dashboard-page .profile-card-heading-v2 p,
html.dark-mode body.profile-dashboard-page .profile-upload-help,
html.dark-mode body.profile-dashboard-page .profile-mini-info small,
body.dark-mode.profile-dashboard-page .profile-dashboard-header p,
body.dark-mode.profile-dashboard-page .profile-avatar-panel p,
body.dark-mode.profile-dashboard-page .profile-card-heading-v2 p,
body.dark-mode.profile-dashboard-page .profile-upload-help,
body.dark-mode.profile-dashboard-page .profile-mini-info small {
    color: #94a3b8 !important;
}

html.dark-mode body.profile-dashboard-page .profile-nav-item,
body.dark-mode.profile-dashboard-page .profile-nav-item {
    color: #cbd5e1 !important;
}

html.dark-mode body.profile-dashboard-page .profile-nav-item:hover,
html.dark-mode body.profile-dashboard-page .profile-nav-item.active,
html.dark-mode body.profile-dashboard-page .profile-back-chat-link,
html.dark-mode body.profile-dashboard-page .profile-mini-icon,
html.dark-mode body.profile-dashboard-page .profile-heading-icon,
body.dark-mode.profile-dashboard-page .profile-nav-item:hover,
body.dark-mode.profile-dashboard-page .profile-nav-item.active,
body.dark-mode.profile-dashboard-page .profile-back-chat-link,
body.dark-mode.profile-dashboard-page .profile-mini-icon,
body.dark-mode.profile-dashboard-page .profile-heading-icon {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #c4b5fd !important;
    border-color: rgba(129, 140, 248, 0.35) !important;
}

html.dark-mode body.profile-dashboard-page input,
html.dark-mode body.profile-dashboard-page textarea,
html.dark-mode body.profile-dashboard-page select,
body.dark-mode.profile-dashboard-page input,
body.dark-mode.profile-dashboard-page textarea,
body.dark-mode.profile-dashboard-page select {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.dark-mode body.profile-dashboard-page input::placeholder,
html.dark-mode body.profile-dashboard-page textarea::placeholder,
body.dark-mode.profile-dashboard-page input::placeholder,
body.dark-mode.profile-dashboard-page textarea::placeholder {
    color: #64748b !important;
}

html.dark-mode body.profile-dashboard-page .dashboard-list-item,
html.dark-mode body.profile-dashboard-page .blocked-user-card-page,
html.dark-mode body.profile-dashboard-page .dashboard-stat-card,
html.dark-mode body.profile-dashboard-page .dashboard-table td,
html.dark-mode body.profile-dashboard-page .thread-message-bubble,
html.dark-mode body.profile-dashboard-page .dashboard-empty-state,
body.dark-mode.profile-dashboard-page .dashboard-list-item,
body.dark-mode.profile-dashboard-page .blocked-user-card-page,
body.dark-mode.profile-dashboard-page .dashboard-stat-card,
body.dark-mode.profile-dashboard-page .dashboard-table td,
body.dark-mode.profile-dashboard-page .thread-message-bubble,
body.dark-mode.profile-dashboard-page .dashboard-empty-state {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(71, 85, 105, 0.8) !important;
    color: #e5e7eb !important;
}

html.dark-mode body.profile-dashboard-page .dashboard-list-main strong,
html.dark-mode body.profile-dashboard-page .dashboard-table-user strong,
html.dark-mode body.profile-dashboard-page .user-detail-title h3,
html.dark-mode body.profile-dashboard-page .blocked-user-main-page h3,
html.dark-mode body.profile-dashboard-page .dashboard-stat-card strong,
html.dark-mode body.profile-dashboard-page .dashboard-empty-state strong,
html.dark-mode body.profile-dashboard-page .dashboard-mini-dl dd,
body.dark-mode.profile-dashboard-page .dashboard-list-main strong,
body.dark-mode.profile-dashboard-page .dashboard-table-user strong,
body.dark-mode.profile-dashboard-page .user-detail-title h3,
body.dark-mode.profile-dashboard-page .blocked-user-main-page h3,
body.dark-mode.profile-dashboard-page .dashboard-stat-card strong,
body.dark-mode.profile-dashboard-page .dashboard-empty-state strong,
body.dark-mode.profile-dashboard-page .dashboard-mini-dl dd {
    color: #f8fafc !important;
}

html.dark-mode body.profile-dashboard-page .dashboard-list-main small,
html.dark-mode body.profile-dashboard-page .dashboard-list-side,
html.dark-mode body.profile-dashboard-page .user-detail-title p,
html.dark-mode body.profile-dashboard-page .blocked-user-main-page p,
html.dark-mode body.profile-dashboard-page .dashboard-table-user span,
html.dark-mode body.profile-dashboard-page .dashboard-stat-card span,
html.dark-mode body.profile-dashboard-page .dashboard-mini-dl dt,
html.dark-mode body.profile-dashboard-page .dashboard-table th,
html.dark-mode body.profile-dashboard-page .dashboard-table td,
body.dark-mode.profile-dashboard-page .dashboard-list-main small,
body.dark-mode.profile-dashboard-page .dashboard-list-side,
body.dark-mode.profile-dashboard-page .user-detail-title p,
body.dark-mode.profile-dashboard-page .blocked-user-main-page p,
body.dark-mode.profile-dashboard-page .dashboard-table-user span,
body.dark-mode.profile-dashboard-page .dashboard-stat-card span,
body.dark-mode.profile-dashboard-page .dashboard-mini-dl dt,
body.dark-mode.profile-dashboard-page .dashboard-table th,
body.dark-mode.profile-dashboard-page .dashboard-table td {
    color: #94a3b8 !important;
}

html.dark-mode body.admin-page .admin-shell,
body.dark-mode.admin-page .admin-shell {
    background: #0f172a !important;
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page .admin-sidebar,
html.dark-mode body.admin-page .admin-layout,
html.dark-mode body.admin-page .admin-header,
html.dark-mode body.admin-page .admin-card,
html.dark-mode body.auth-page .auth-card,
body.dark-mode.admin-page .admin-sidebar,
body.dark-mode.admin-page .admin-layout,
body.dark-mode.admin-page .admin-header,
body.dark-mode.admin-page .admin-card,
body.dark-mode.auth-page .auth-card {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #273449 !important;
}

html.dark-mode body.admin-page a,
html.dark-mode body.auth-page a,
body.dark-mode.admin-page a,
body.dark-mode.auth-page a {
    color: #a5b4fc;
}

/* Strong global admin dark theme fix.
   This uses the saved chat/profile darkMode setting and applies it to every admin page. */
html.dark-mode body.admin-page,
body.admin-page.dark-mode,
html.dark-mode body.admin-page.admin-layout-mode-full,
body.admin-page.dark-mode.admin-layout-mode-full,
html.dark-mode body.admin-page.admin-layout-mode-boxed,
body.admin-page.dark-mode.admin-layout-mode-boxed {
    background: #0b1220 !important;
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page .admin-shell,
body.admin-page.dark-mode .admin-shell {
    background: #0b1220 !important;
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page .admin-sidebar,
body.admin-page.dark-mode .admin-sidebar {
    background: #0f172a !important;
    border-right-color: #1e293b !important;
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page .admin-layout,
body.admin-page.dark-mode .admin-layout {
    background: #0b1220 !important;
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page .admin-header,
body.admin-page.dark-mode .admin-header {
    background: transparent !important;
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page .admin-header h1,
html.dark-mode body.admin-page .admin-brand strong,
html.dark-mode body.admin-page .admin-card h2,
html.dark-mode body.admin-page .admin-page-card strong,
html.dark-mode body.admin-page .stat-card strong,
body.admin-page.dark-mode .admin-header h1,
body.admin-page.dark-mode .admin-brand strong,
body.admin-page.dark-mode .admin-card h2,
body.admin-page.dark-mode .admin-page-card strong,
body.admin-page.dark-mode .stat-card strong {
    color: #f8fafc !important;
}

html.dark-mode body.admin-page .muted,
html.dark-mode body.admin-page .admin-brand small,
html.dark-mode body.admin-page .admin-page-card span,
html.dark-mode body.admin-page .stat-card span,
body.admin-page.dark-mode .muted,
body.admin-page.dark-mode .admin-brand small,
body.admin-page.dark-mode .admin-page-card span,
body.admin-page.dark-mode .stat-card span {
    color: #94a3b8 !important;
}

html.dark-mode body.admin-page .admin-card,
html.dark-mode body.admin-page .stat-card,
html.dark-mode body.admin-page .admin-page-card,
html.dark-mode body.admin-page .table-wrap,
html.dark-mode body.admin-page.admin-layout-mode-boxed .table-wrap,
body.admin-page.dark-mode .admin-card,
body.admin-page.dark-mode .stat-card,
body.admin-page.dark-mode .admin-page-card,
body.admin-page.dark-mode .table-wrap,
body.admin-page.dark-mode.admin-layout-mode-boxed .table-wrap {
    background: #111827 !important;
    border-color: #273449 !important;
    color: #e5e7eb !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24) !important;
}

html.dark-mode body.admin-page .admin-page-card:hover,
html.dark-mode body.admin-page .stat-link:hover,
body.admin-page.dark-mode .admin-page-card:hover,
body.admin-page.dark-mode .stat-link:hover {
    background: #172033 !important;
    border-color: #3b4b68 !important;
    color: #c7d2fe !important;
}

html.dark-mode body.admin-page .admin-brand,
body.admin-page.dark-mode .admin-brand {
    border-bottom-color: #273449 !important;
}

html.dark-mode body.admin-page .admin-side-nav a,
body.admin-page.dark-mode .admin-side-nav a {
    color: #dbeafe !important;
}

html.dark-mode body.admin-page .admin-side-nav a:hover,
html.dark-mode body.admin-page .admin-side-nav a.active,
body.admin-page.dark-mode .admin-side-nav a:hover,
body.admin-page.dark-mode .admin-side-nav a.active {
    background: rgba(79, 70, 229, 0.22) !important;
    color: #c7d2fe !important;
}

html.dark-mode body.admin-page .admin-side-nav .logout-side-link,
body.admin-page.dark-mode .admin-side-nav .logout-side-link {
    background: rgba(127, 29, 29, 0.28) !important;
    color: #fecaca !important;
}

html.dark-mode body.admin-page table,
html.dark-mode body.admin-page th,
html.dark-mode body.admin-page td,
body.admin-page.dark-mode table,
body.admin-page.dark-mode th,
body.admin-page.dark-mode td {
    color: #e5e7eb !important;
    border-bottom-color: #273449 !important;
}

html.dark-mode body.admin-page th,
body.admin-page.dark-mode th {
    color: #cbd5e1 !important;
    background: #0f172a !important;
}

html.dark-mode body.admin-page tr:hover td,
body.admin-page.dark-mode tr:hover td {
    background: #172033 !important;
}

html.dark-mode body.admin-page input,
html.dark-mode body.admin-page textarea,
html.dark-mode body.admin-page select,
body.admin-page.dark-mode input,
body.admin-page.dark-mode textarea,
body.admin-page.dark-mode select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page input::placeholder,
html.dark-mode body.admin-page textarea::placeholder,
body.admin-page.dark-mode input::placeholder,
body.admin-page.dark-mode textarea::placeholder {
    color: #64748b !important;
}

.admin-theme-toggle {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid #dbe4f0;
    background: #ffffff;
    color: #172033;
    cursor: pointer;
    font-size: 19px;
    box-shadow: 0 12px 30px rgba(20, 35, 70, .08);
}

.admin-theme-toggle:hover {
    transform: translateY(-1px);
}

html.dark-mode body.admin-page .admin-theme-toggle,
body.admin-page.dark-mode .admin-theme-toggle {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode body.admin-page .alert,
body.admin-page.dark-mode .alert {
    background: #111827 !important;
    border-color: #273449 !important;
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page a.stat-link,
body.admin-page.dark-mode a.stat-link {
    color: #e5e7eb !important;
}

/* Admin compact log/user lists: keep long tables inside the card and load 20 at a time. */
.admin-list-title-row {
    align-items: flex-start;
    margin-bottom: 16px;
}

.admin-list-title-row h2 {
    margin-bottom: 6px;
}

.admin-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: min(360px, 100%);
}

.admin-search-input {
    width: 100%;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    padding: 12px 14px;
    outline: none;
    background: #fff;
    color: #172033;
    box-shadow: 0 8px 22px rgba(20, 35, 70, .05);
}

.admin-search-input:focus {
    border-color: #4f6ff5;
    box-shadow: 0 0 0 4px rgba(79, 111, 245, .12);
}

.table-wrap.admin-compact-scroll {
    max-height: 62vh;
    overflow: auto;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #fff;
}

.table-wrap.admin-compact-scroll table {
    min-width: 920px;
}

.table-wrap.admin-compact-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}

.admin-details-cell {
    max-width: 380px;
    white-space: normal;
    word-break: break-word;
}

.admin-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef2f7;
}

.admin-show-more-btn {
    min-width: 120px;
}

html.dark-mode body.admin-page .table-wrap.admin-compact-scroll,
body.admin-page.dark-mode .table-wrap.admin-compact-scroll {
    background: #111827 !important;
    border-color: #273449 !important;
}

html.dark-mode body.admin-page .table-wrap.admin-compact-scroll thead th,
body.admin-page.dark-mode .table-wrap.admin-compact-scroll thead th {
    background: #0f172a !important;
}

html.dark-mode body.admin-page .admin-list-footer,
body.admin-page.dark-mode .admin-list-footer {
    border-top-color: #273449 !important;
}

@media (max-width: 820px) {
    .admin-list-title-row {
        flex-direction: column;
    }

    .admin-toolbar-actions {
        width: 100%;
        min-width: 0;
    }

    .table-wrap.admin-compact-scroll {
        max-height: 58vh;
    }

    .admin-list-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-show-more-btn {
        width: 100%;
    }
}

/* Admin users/logs search and compact tables refinements. */
html.dark-mode body.admin-page .admin-search-input,
body.admin-page.dark-mode .admin-search-input {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.dark-mode body.admin-page .admin-search-input::placeholder,
body.admin-page.dark-mode .admin-search-input::placeholder {
    color: #94a3b8 !important;
}

.admin-card .admin-toolbar-actions form {
    margin: 0;
}

.table-wrap.admin-compact-scroll .actions {
    min-width: 260px;
}

/* Modern admin settings page */
.admin-settings-page {
    padding: 28px;
}

.settings-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 0 0 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e5ecf6;
}

.settings-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #335eea;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.settings-hero h2 {
    margin: 12px 0 8px;
    font-size: 32px;
}

.settings-hero p {
    margin: 0;
    max-width: 720px;
}

.settings-hero-badge {
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4169e1, #6f8eff);
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 18px 35px rgba(65, 105, 225, 0.22);
}

.admin-settings-form {
    gap: 22px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.settings-section-card {
    background: #f8fbff;
    border: 1px solid #e5ecf6;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.settings-section-card-wide {
    width: 100%;
}

.settings-section-head {
    margin-bottom: 18px;
}

.settings-section-head h3 {
    margin: 0 0 6px;
    font-size: 22px;
    color: #172033;
}

.settings-section-head p {
    margin: 0;
    color: #738096;
}

.settings-field {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.settings-field:last-child {
    margin-bottom: 0;
}

.settings-inline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-help {
    margin: 0;
    font-size: 13px;
    color: #738096;
    line-height: 1.5;
}

.admin-settings-form input,
.admin-settings-form select,
.admin-settings-form textarea {
    width: 100%;
    min-height: 52px;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #fff;
    padding: 14px 16px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}

.admin-settings-form input[type="file"] {
    padding: 12px 14px;
}

.admin-settings-form input:focus,
.admin-settings-form select:focus,
.admin-settings-form textarea:focus {
    border-color: #4f75e8;
    box-shadow: 0 0 0 4px rgba(79, 117, 232, 0.12);
}

.modern-site-logo-preview-row {
    align-items: stretch;
    padding: 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e5ecf6;
}

.site-logo-preview-copy {
    display: grid;
    gap: 6px;
}

.modern-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px !important;
}

.modern-inline-check span {
    font-weight: 600;
}

.settings-toggle-list {
    display: grid;
    gap: 14px;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #e5ecf6;
    background: #f8fbff;
    cursor: pointer;
}

.settings-toggle-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.settings-toggle-copy strong {
    color: #172033;
    font-size: 15px;
}

.settings-toggle-copy small {
    color: #738096;
    line-height: 1.5;
}

.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    pointer-events: none;
}

.toggle-slider {
    position: relative;
    width: 58px;
    height: 32px;
    border-radius: 999px;
    background: #cfd8e6;
    transition: all .2s ease;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.toggle-slider::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
    transition: all .2s ease;
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, #4169e1, #6f8eff);
}

.toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(26px);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 4px rgba(79, 117, 232, 0.15);
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.settings-actions button {
    min-width: 180px;
    min-height: 52px;
    border-radius: 16px;
    box-shadow: 0 18px 34px rgba(65, 105, 225, 0.24);
}

html.dark-mode body.admin-page .admin-settings-page,
body.admin-page.dark-mode .admin-settings-page {
    background: #111827 !important;
}

html.dark-mode body.admin-page .settings-hero,
body.admin-page.dark-mode .settings-hero {
    border-bottom-color: #273449 !important;
}

html.dark-mode body.admin-page .settings-kicker,
body.admin-page.dark-mode .settings-kicker {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #bfdbfe !important;
}

html.dark-mode body.admin-page .settings-section-card,
html.dark-mode body.admin-page .settings-toggle-row,
html.dark-mode body.admin-page .modern-site-logo-preview-row,
body.admin-page.dark-mode .settings-section-card,
body.admin-page.dark-mode .settings-toggle-row,
body.admin-page.dark-mode .modern-site-logo-preview-row {
    background: #0f172a !important;
    border-color: #273449 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
}

html.dark-mode body.admin-page .settings-section-head h3,
html.dark-mode body.admin-page .settings-toggle-copy strong,
body.admin-page.dark-mode .settings-section-head h3,
body.admin-page.dark-mode .settings-toggle-copy strong {
    color: #f8fafc !important;
}

html.dark-mode body.admin-page .settings-section-head p,
html.dark-mode body.admin-page .settings-help,
html.dark-mode body.admin-page .site-logo-preview-copy .muted,
html.dark-mode body.admin-page .settings-toggle-copy small,
body.admin-page.dark-mode .settings-section-head p,
body.admin-page.dark-mode .settings-help,
body.admin-page.dark-mode .site-logo-preview-copy .muted,
body.admin-page.dark-mode .settings-toggle-copy small {
    color: #94a3b8 !important;
}

html.dark-mode body.admin-page .admin-settings-form input,
html.dark-mode body.admin-page .admin-settings-form select,
html.dark-mode body.admin-page .admin-settings-form textarea,
body.admin-page.dark-mode .admin-settings-form input,
body.admin-page.dark-mode .admin-settings-form select,
body.admin-page.dark-mode .admin-settings-form textarea {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page .toggle-slider,
body.admin-page.dark-mode .toggle-slider {
    background: #334155 !important;
}

@media (max-width: 980px) {
    .settings-grid,
    .settings-inline-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .admin-settings-page {
        padding: 20px;
    }

    .settings-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .settings-hero h2 {
        font-size: 26px;
    }

    .settings-toggle-row {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .settings-section-card,
    .settings-toggle-row {
        padding: 16px;
        border-radius: 18px;
    }

    .settings-toggle-row {
        flex-direction: column;
        align-items: stretch;
    }

    .toggle-switch {
        justify-content: flex-end;
    }

    .settings-actions {
        justify-content: stretch;
    }

    .settings-actions button {
        width: 100%;
    }
}

/* Verified/user role badges */
.user-name-with-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    vertical-align: middle;
}

.verified-badge,
.user-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    min-width: 17px;
    border-radius: 999px;
    color: #fff;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28);
}

.verified-badge {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    font-size: 11px;
    font-weight: 900;
}

.user-role-badge {
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
}

.user-role-badge svg {
    width: 11px;
    height: 11px;
    display: block;
}

.user-role-badge-admin {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.user-role-badge-moderator {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.profile-avatar-panel h2 .user-name-with-badge,
.user-detail-title h3 .user-name-with-badge,
.blocked-user-main-page h3 .user-name-with-badge {
    justify-content: center;
}

.message-top .user-name-with-badge,
.reply-preview .user-name-with-badge,
.thread-message-meta .user-name-with-badge,
.dashboard-table-user .user-name-with-badge,
.dashboard-list-main .user-name-with-badge {
    gap: 5px;
}

.message-top .verified-badge,
.reply-preview .verified-badge,
.thread-message-meta .verified-badge,
.dashboard-list-main .verified-badge,
.dashboard-table-user .verified-badge,
.message-top .user-role-badge,
.reply-preview .user-role-badge,
.thread-message-meta .user-role-badge,
.dashboard-list-main .user-role-badge,
.dashboard-table-user .user-role-badge {
    width: 15px;
    height: 15px;
    min-width: 15px;
    font-size: 10px;
}

.message-top .user-role-badge svg,
.reply-preview .user-role-badge svg,
.thread-message-meta .user-role-badge svg,
.dashboard-list-main .user-role-badge svg,
.dashboard-table-user .user-role-badge svg {
    width: 10px;
    height: 10px;
}

.badge.verified-status {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.muted-badge {
    background: #edf2f7;
    color: #64748b;
}

.admin-card button.verify-action,
button.verify-action {
    background: #2563eb !important;
    color: #fff !important;
}

html.dark-mode body .verified-badge,
body.dark-mode .verified-badge,
html.dark-mode body .user-role-badge,
body.dark-mode .user-role-badge {
    box-shadow: 0 3px 12px rgba(56, 189, 248, 0.24);
}

html.dark-mode body.admin-page .badge.verified-status,
body.admin-page.dark-mode .badge.verified-status {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #bfdbfe !important;
}

html.dark-mode body.admin-page .badge.muted-badge,
body.admin-page.dark-mode .badge.muted-badge {
    background: rgba(148, 163, 184, 0.16) !important;
    color: #cbd5e1 !important;
}

/* MOBILE COMPOSER INPUT VISIBILITY FIX
   Keep the typing box visible on phones in public rooms and private chats. */
@media (max-width: 900px) {
    body.chat-page #messageForm,
    body.chat-page .message-form.fixed-bottom-form,
    body.chat-page .fixed-bottom-form {
        display: grid !important;
        grid-template-columns: 42px 42px 42px minmax(90px, 1fr) 62px !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 8px 8px calc(8px + var(--mobile-safe-bottom)) !important;
        min-height: 58px !important;
        max-height: 112px !important;
        overflow: visible !important;
        background: #ffffff !important;
        border-top: 1px solid #dfe6f2 !important;
        box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08) !important;
    }

    body.chat-page #messageForm.private-mode,
    body.chat-page .message-form.private-mode {
        grid-template-columns: 42px 42px 42px minmax(90px, 1fr) 62px !important;
    }

    body.chat-page #emojiBtn,
    body.chat-page #attachBtn,
    body.chat-page #recordVoiceBtn {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.chat-page #emojiBtn {
        order: 1 !important;
    }

    body.chat-page #attachBtn {
        order: 2 !important;
    }

    body.chat-page #recordVoiceBtn {
        order: 3 !important;
    }

    body.chat-page #messageInput,
    body.chat-page .chat-panel #messageInput,
    body.chat-page .chat-main #messageInput {
        display: block !important;
        order: 4 !important;
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
        line-height: 42px !important;
        margin: 0 !important;
    }

    body.chat-page #messageForm > button[type="submit"],
    body.chat-page .chat-panel #messageForm > button[type="submit"],
    body.chat-page .chat-main #messageForm > button[type="submit"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 5 !important;
        grid-column: auto !important;
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    body.chat-page #messageForm .reply-bar,
    body.chat-page .fixed-bottom-form .reply-bar {
        order: 0 !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 0 0 2px !important;
    }

    body.chat-page #messageForm .recording-indicator:not(.hidden),
    body.chat-page .fixed-bottom-form .recording-indicator:not(.hidden) {
        order: 0 !important;
        grid-column: 1 / -1 !important;
    }

    body.chat-page #emojiPicker,
    body.chat-page .emoji-picker {
        order: 20 !important;
        grid-column: 1 / -1 !important;
    }

    body.chat-page .messages {
        padding-bottom: 12px !important;
    }

    body.dark-mode.chat-page #messageForm,
    body.dark-mode.chat-page .message-form.fixed-bottom-form,
    body.dark-mode.chat-page .fixed-bottom-form {
        background: #0f172a !important;
        border-top-color: #263348 !important;
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.24) !important;
    }
}

@media (max-width: 370px) {
    body.chat-page #messageForm,
    body.chat-page #messageForm.private-mode,
    body.chat-page .message-form.fixed-bottom-form,
    body.chat-page .fixed-bottom-form {
        grid-template-columns: 38px 38px 38px minmax(74px, 1fr) 56px !important;
        gap: 6px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body.chat-page #emojiBtn,
    body.chat-page #attachBtn,
    body.chat-page #recordVoiceBtn,
    body.chat-page #messageInput {
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 12px !important;
    }

    body.chat-page #emojiBtn,
    body.chat-page #attachBtn,
    body.chat-page #recordVoiceBtn {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }

    body.chat-page #messageForm > button[type="submit"] {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        height: 38px !important;
        min-height: 38px !important;
        font-size: 12px !important;
    }
}


/* FINAL iOS/Android mobile composer visibility fix
   Prevent mobile browser bars from hiding the typing input. */
:root {
    --chat-visual-height: 100dvh;
    --chat-visual-bottom-gap: 0px;
    --mobile-composer-height: 70px;
}

@supports not (height: 100dvh) {
    :root {
        --chat-visual-height: 100vh;
    }
}

@media (max-width: 900px) {
    html,
    body.chat-page {
        width: 100% !important;
        height: var(--chat-visual-height) !important;
        min-height: var(--chat-visual-height) !important;
        max-height: var(--chat-visual-height) !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.chat-page {
        position: fixed !important;
        inset: 0 !important;
        touch-action: manipulation;
        -webkit-text-size-adjust: 100%;
    }

    body.chat-page .app-shell {
        height: var(--chat-visual-height) !important;
        min-height: var(--chat-visual-height) !important;
        max-height: var(--chat-visual-height) !important;
        overflow: hidden !important;
    }

    body.chat-page .chat-panel,
    body.chat-page .chat-main {
        height: var(--chat-visual-height) !important;
        min-height: 0 !important;
        max-height: var(--chat-visual-height) !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) var(--mobile-composer-height) !important;
        padding-bottom: 0 !important;
    }

    body.chat-page .messages,
    body.chat-page #messages {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: calc(var(--mobile-composer-height) + 18px + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(var(--mobile-composer-height) + 18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.chat-page #messageForm,
    body.chat-page #messageForm.private-mode,
    body.chat-page .message-form.fixed-bottom-form,
    body.chat-page .message-form.fixed-bottom-form.private-mode,
    body.chat-page .fixed-bottom-form {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--chat-visual-bottom-gap) !important;
        z-index: 9999 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: var(--mobile-composer-height) !important;
        height: auto !important;
        max-height: calc(var(--chat-visual-height) * 0.42) !important;
        display: grid !important;
        grid-template-columns: 42px 42px 42px minmax(0, 1fr) 60px !important;
        grid-auto-rows: minmax(42px, auto) !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 9px 8px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        background: #ffffff !important;
        border-top: 1px solid #dfe6f2 !important;
        box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.10) !important;
        box-sizing: border-box !important;
    }

    body.chat-page #emojiBtn,
    body.chat-page #attachBtn,
    body.chat-page #recordVoiceBtn {
        display: inline-grid !important;
        place-items: center !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 14px !important;
        grid-column: auto !important;
        flex: none !important;
    }

    body.chat-page #emojiBtn.hidden {
        display: none !important;
    }

    body.chat-page #messageInput,
    body.chat-page .chat-panel #messageInput,
    body.chat-page .chat-main #messageInput {
        display: block !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 16px !important;
        line-height: 42px !important;
        flex: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        transform: none !important;
        box-sizing: border-box !important;
        -webkit-appearance: none;
    }

    body.chat-page #messageForm > button[type="submit"],
    body.chat-page .chat-panel #messageForm > button[type="submit"],
    body.chat-page .chat-main #messageForm > button[type="submit"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        flex: none !important;
        position: static !important;
        transform: none !important;
    }

    body.chat-page #messageForm .reply-bar,
    body.chat-page #messageForm .recording-indicator:not(.hidden),
    body.chat-page #emojiPicker,
    body.chat-page .emoji-picker {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    body.chat-page #emojiPicker,
    body.chat-page .emoji-picker {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(var(--mobile-composer-height) + var(--chat-visual-bottom-gap) + env(safe-area-inset-bottom, 0px) + 6px) !important;
        width: auto !important;
        max-height: min(240px, calc(var(--chat-visual-height) - 170px)) !important;
        overflow-y: auto !important;
        z-index: 10000 !important;
    }

    body.dark-mode.chat-page #messageForm,
    body.dark-mode.chat-page #messageForm.private-mode,
    body.dark-mode.chat-page .message-form.fixed-bottom-form,
    body.dark-mode.chat-page .fixed-bottom-form {
        background: #0f172a !important;
        border-top-color: #263348 !important;
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.30) !important;
    }
}

@media (max-width: 380px) {
    body.chat-page #messageForm,
    body.chat-page #messageForm.private-mode,
    body.chat-page .message-form.fixed-bottom-form,
    body.chat-page .fixed-bottom-form {
        grid-template-columns: 38px 38px 38px minmax(0, 1fr) 54px !important;
        gap: 6px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        --mobile-composer-height: 64px;
    }

    body.chat-page #emojiBtn,
    body.chat-page #attachBtn,
    body.chat-page #recordVoiceBtn,
    body.chat-page #messageInput,
    body.chat-page #messageForm > button[type="submit"] {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        border-radius: 12px !important;
    }

    body.chat-page #emojiBtn,
    body.chat-page #attachBtn,
    body.chat-page #recordVoiceBtn {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }

    body.chat-page #messageForm > button[type="submit"] {
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        font-size: 12px !important;
    }
}


/* ABSOLUTE MOBILE COMPOSER FIX - keep typing input visible.
   This override is intentionally last and stronger than earlier mobile rules. */
@media (max-width: 900px) {
    html,
    body.chat-page {
        width: 100% !important;
        overflow: hidden !important;
    }

    body.chat-page {
        position: fixed !important;
        inset: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }

    body.chat-page .app-shell,
    body.chat-page .chat-panel,
    body.chat-page .chat-main {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.chat-page .chat-panel,
    body.chat-page .chat-main {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        padding-bottom: 0 !important;
    }

    body.chat-page .messages,
    body.chat-page #messages {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html body.chat-page form#messageForm,
    html body.chat-page form#messageForm.private-mode,
    html body.chat-page .chat-main form#messageForm,
    html body.chat-page .chat-panel form#messageForm,
    html body.chat-page .message-form.fixed-bottom-form,
    html body.chat-page .fixed-bottom-form {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2147483000 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)) 6px !important;
        margin: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        transform: none !important;
        -webkit-transform: none !important;
        background: #ffffff !important;
        border-top: 1px solid #dfe6f2 !important;
        box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.12) !important;
    }

    html body.chat-page form#messageForm #emojiBtn,
    html body.chat-page form#messageForm #attachBtn,
    html body.chat-page form#messageForm #recordVoiceBtn,
    html body.chat-page form#messageForm .emoji-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 13px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        order: 1 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        position: static !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html body.chat-page form#messageForm #emojiBtn.hidden {
        display: inline-flex !important;
    }

    html body.chat-page form#messageForm input#messageInput,
    html body.chat-page .chat-main form#messageForm input#messageInput,
    html body.chat-page .chat-panel form#messageForm input#messageInput {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 1 auto !important;
        order: 2 !important;
        width: auto !important;
        min-width: 72px !important;
        max-width: none !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        border: 1px solid #dbe2ef !important;
        border-radius: 13px !important;
        background: #ffffff !important;
        color: #172033 !important;
        font-size: 16px !important;
        line-height: 38px !important;
        outline: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        position: static !important;
        transform: none !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
    }

    html body.chat-page form#messageForm input#messageInput::placeholder {
        color: #7d8797 !important;
        opacity: 1 !important;
    }

    html body.chat-page form#messageForm > button[type="submit"],
    html body.chat-page .chat-main form#messageForm > button[type="submit"],
    html body.chat-page .chat-panel form#messageForm > button[type="submit"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 52px !important;
        order: 3 !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 6px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        grid-column: auto !important;
        grid-row: auto !important;
        position: static !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html body.chat-page form#messageForm .attachment-input,
    html body.chat-page form#messageForm #recordingIndicator.hidden,
    html body.chat-page form#messageForm .recording-indicator.hidden,
    html body.chat-page form#messageForm #emojiPicker.hidden,
    html body.chat-page form#messageForm .emoji-picker.hidden {
        display: none !important;
    }

    html body.chat-page form#messageForm #recordingIndicator:not(.hidden),
    html body.chat-page form#messageForm .recording-indicator:not(.hidden),
    html body.chat-page form#messageForm .reply-bar {
        position: absolute !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(100% + 6px) !important;
        width: auto !important;
        z-index: 2147483001 !important;
    }

    html body.chat-page form#messageForm #emojiPicker:not(.hidden),
    html body.chat-page form#messageForm .emoji-picker:not(.hidden) {
        position: absolute !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(100% + 8px) !important;
        width: auto !important;
        max-height: min(240px, calc(100dvh - 170px)) !important;
        overflow-y: auto !important;
        z-index: 2147483001 !important;
    }

    body.dark-mode.chat-page form#messageForm,
    body.dark-mode.chat-page .message-form.fixed-bottom-form,
    body.dark-mode.chat-page .fixed-bottom-form {
        background: #0f172a !important;
        border-top-color: #263348 !important;
    }

    body.dark-mode.chat-page form#messageForm input#messageInput {
        background: #111827 !important;
        color: #e5e7eb !important;
        border-color: #334155 !important;
    }
}

@media (max-width: 360px) {
    html body.chat-page form#messageForm,
    html body.chat-page form#messageForm.private-mode {
        gap: 5px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    html body.chat-page form#messageForm #emojiBtn,
    html body.chat-page form#messageForm #attachBtn,
    html body.chat-page form#messageForm #recordVoiceBtn,
    html body.chat-page form#messageForm .emoji-button {
        flex-basis: 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    html body.chat-page form#messageForm input#messageInput {
        min-width: 60px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        line-height: 36px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    html body.chat-page form#messageForm > button[type="submit"] {
        flex-basis: 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        font-size: 11px !important;
    }
}

/* FINAL ADMIN/MODERATOR MOBILE SCROLL FIX
   Chat pages lock the viewport, but admin and moderator pages must scroll normally. */
html.admin-document,
html.admin-document body.admin-page {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
}

html.admin-document body.admin-page {
    min-height: 100svh !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

html.admin-document body.admin-page .admin-shell {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible !important;
}

html.admin-document body.admin-page .admin-layout,
html.admin-document body.admin-page .admin-layout.narrow,
html.admin-document body.admin-page .admin-layout-full,
html.admin-document body.admin-page.admin-layout-mode-full .admin-layout,
html.admin-document body.admin-page.admin-layout-mode-boxed .admin-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
}

html.admin-document body.admin-page .admin-card,
html.admin-document body.admin-page .stat-card,
html.admin-document body.admin-page .stats-grid,
html.admin-document body.admin-page .admin-page-grid,
html.admin-document body.admin-page .table-wrap {
    max-height: none !important;
}

@media (max-width: 920px) {
    html.admin-document,
    html.admin-document body.admin-page {
        position: static !important;
        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html.admin-document body.admin-page .admin-shell {
        display: block !important;
        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html.admin-document body.admin-page .admin-sidebar {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 18px 18px 16px !important;
    }

    html.admin-document body.admin-page .admin-side-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    html.admin-document body.admin-page .admin-side-nav a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    html.admin-document body.admin-page .admin-layout,
    html.admin-document body.admin-page.admin-layout-mode-full .admin-layout,
    html.admin-document body.admin-page.admin-layout-mode-boxed .admin-layout {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 18px 14px calc(140px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
    }

    html.admin-document body.admin-page .admin-header {
        position: static !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    html.admin-document body.admin-page .stats-grid,
    html.admin-document body.admin-page .admin-page-grid {
        grid-template-columns: 1fr !important;
    }

    html.admin-document body.admin-page .admin-card,
    html.admin-document body.admin-page .stat-card,
    html.admin-document body.admin-page .alert {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 20px !important;
    }

    html.admin-document body.admin-page .table-wrap,
    html.admin-document body.admin-page .table-wrap.admin-compact-scroll {
        max-height: 70svh !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

@media (max-width: 420px) {
    html.admin-document body.admin-page .admin-side-nav {
        grid-template-columns: 1fr 1fr !important;
    }

    html.admin-document body.admin-page .admin-brand strong {
        font-size: 15px !important;
    }

    html.admin-document body.admin-page .admin-header h1 {
        font-size: 26px !important;
    }
}

/* FINAL MOBILE LAST MESSAGE VISIBILITY FIX
   Keep newest public/private messages above the fixed composer on phones. */
@media (max-width: 900px) {
    html body.chat-page #messages,
    html body.chat-page .messages,
    html body.chat-page .chat-main #messages,
    html body.chat-page .chat-panel #messages {
        padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important;
        overscroll-behavior: contain !important;
    }

    html body.chat-page #messages::after,
    html body.chat-page .messages::after {
        content: "" !important;
        display: block !important;
        width: 100% !important;
        height: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
        flex: 0 0 auto !important;
        pointer-events: none !important;
    }

    html body.chat-page #messages .message-row:last-of-type,
    html body.chat-page .messages .message-row:last-of-type {
        margin-bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html body.chat-page #typingIndicator,
    html body.chat-page .typing-indicator {
        margin-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* MOBILE CHAT SCROLL ONLY FIX
   Allows the message list to scroll up/down on phones without changing other features. */
@media (max-width: 900px) {
    html,
    body.chat-page {
        width: 100% !important;
        height: var(--chat-visual-height, 100svh) !important;
        min-height: var(--chat-visual-height, 100svh) !important;
        max-height: var(--chat-visual-height, 100svh) !important;
        overflow: hidden !important;
        touch-action: auto !important;
        overscroll-behavior-y: none !important;
    }

    body.chat-page {
        position: fixed !important;
        inset: 0 !important;
    }

    body.chat-page .app-shell {
        position: fixed !important;
        top: 58px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: calc(var(--chat-visual-height, 100svh) - 58px) !important;
        min-height: 0 !important;
        max-height: calc(var(--chat-visual-height, 100svh) - 58px) !important;
        overflow: hidden !important;
        display: block !important;
    }

    body.chat-page .chat-panel,
    body.chat-page .chat-main {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.chat-page .chat-header {
        flex: 0 0 auto !important;
    }

    body.chat-page #typingIndicator,
    body.chat-page .typing-indicator {
        flex: 0 0 auto !important;
        display: none !important;
    }

    body.chat-page #messages,
    body.chat-page .messages,
    body.chat-page .chat-main #messages,
    body.chat-page .chat-panel #messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        pointer-events: auto !important;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.chat-page #messages::after,
    body.chat-page .messages::after {
        height: 18px !important;
    }

    body.chat-page #messages .message-row:last-of-type,
    body.chat-page .messages .message-row:last-of-type {
        margin-bottom: 12px !important;
    }

    html body.chat-page form#messageForm,
    html body.chat-page form#messageForm.private-mode,
    html body.chat-page .chat-main form#messageForm,
    html body.chat-page .chat-panel form#messageForm,
    html body.chat-page .message-form.fixed-bottom-form,
    html body.chat-page .fixed-bottom-form {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 20 !important;
        transform: none !important;
        -webkit-transform: none !important;
        margin: 0 !important;
    }
}


/* PROFILE.PHP MOBILE SCROLL FIX ONLY
   Chat pages intentionally lock html/body height for the fixed mobile composer.
   Profile.php is a normal form page, so it must override that lock and scroll. */
html.profile-document,
html.profile-document body.profile-page-modern,
html.profile-document body.profile-dashboard-page {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

html.profile-document body.profile-page-modern {
    display: block !important;
}

html.profile-document .profile-dashboard-layout {
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 900px) {
    html.profile-document,
    html.profile-document body.profile-page-modern,
    html.profile-document body.profile-dashboard-page {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: static !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html.profile-document .profile-dashboard-layout {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html.profile-document .profile-app-sidebar {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html.profile-document .profile-dashboard-main,
    html.profile-document .profile-dashboard-form,
    html.profile-document .profile-summary-card-v2,
    html.profile-document .profile-form-card-v2,
    html.profile-document .profile-content-stack-v2,
    html.profile-document .profile-modern-form,
    html.profile-document .profile-main-card,
    html.profile-document .profile-sidebar-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }

    html.profile-document .profile-summary-card-v2 {
        position: static !important;
        top: auto !important;
    }

    html.profile-document .profile-dashboard-main {
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }
}


/* ADMIN/MODERATOR ONLY: force desktop viewport/layout on phones.
   Chat, profile, user pages, and mobile composer are not changed. */
html.admin-document,
html.admin-document body.admin-page {
    min-width: 1280px !important;
    width: 1280px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

html.admin-document body.admin-page .admin-shell {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    min-width: 1280px !important;
    width: 1280px !important;
    min-height: 100vh !important;
}

html.admin-document body.admin-page .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 0 !important;
    padding: 22px !important;
}

html.admin-document body.admin-page .admin-side-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

html.admin-document body.admin-page .admin-side-nav a {
    display: block !important;
    min-height: auto !important;
    white-space: nowrap !important;
}

html.admin-document body.admin-page .admin-layout {
    width: 100% !important;
    max-width: 1180px !important;
    padding: 28px !important;
}

html.admin-document body.admin-page .admin-header {
    flex-direction: row !important;
    align-items: center !important;
}

html.admin-document body.admin-page .stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

html.admin-document body.admin-page .admin-page-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

html.admin-document body.admin-page .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.admin-document body.admin-page .settings-inline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Keep old mobile admin overrides disabled for admin/moderator pages only. */
@media (max-width: 920px) {
    html.admin-document,
    html.admin-document body.admin-page {
        min-width: 1280px !important;
        width: 1280px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    html.admin-document body.admin-page .admin-shell {
        display: grid !important;
        grid-template-columns: 260px minmax(0, 1fr) !important;
        min-width: 1280px !important;
        width: 1280px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html.admin-document body.admin-page .admin-sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        border-right: 1px solid #e2e8f0 !important;
        border-bottom: 0 !important;
        padding: 22px !important;
    }

    html.admin-document body.admin-page .admin-side-nav {
        grid-template-columns: 1fr !important;
    }

    html.admin-document body.admin-page .admin-layout {
        max-width: 1180px !important;
        padding: 28px !important;
    }

    html.admin-document body.admin-page .admin-header {
        flex-direction: row !important;
        align-items: center !important;
    }
}


/* ADMIN/MODERATOR ONLY: full desktop view on phones.
   This keeps admin/moderator in desktop layout but fits the whole right side too. */
html.admin-document,
html.admin-document body.admin-page {
    min-width: 1440px !important;
    width: 1440px !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

html.admin-document body.admin-page .admin-shell {
    display: grid !important;
    grid-template-columns: 260px 1180px !important;
    min-width: 1440px !important;
    width: 1440px !important;
    max-width: none !important;
    min-height: 100vh !important;
    overflow: visible !important;
}

html.admin-document body.admin-page .admin-sidebar {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
}

html.admin-document body.admin-page .admin-layout,
html.admin-document body.admin-page.admin-layout-mode-full .admin-layout,
html.admin-document body.admin-page.admin-layout-mode-boxed .admin-layout {
    width: 1180px !important;
    min-width: 1180px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 28px !important;
    overflow: visible !important;
}

@media (max-width: 920px) {
    html.admin-document,
    html.admin-document body.admin-page {
        min-width: 1440px !important;
        width: 1440px !important;
        max-width: none !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    html.admin-document body.admin-page .admin-shell {
        display: grid !important;
        grid-template-columns: 260px 1180px !important;
        min-width: 1440px !important;
        width: 1440px !important;
        max-width: none !important;
    }

    html.admin-document body.admin-page .admin-sidebar {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
    }

    html.admin-document body.admin-page .admin-layout,
    html.admin-document body.admin-page.admin-layout-mode-full .admin-layout,
    html.admin-document body.admin-page.admin-layout-mode-boxed .admin-layout {
        width: 1180px !important;
        min-width: 1180px !important;
        max-width: none !important;
        padding: 28px !important;
        margin: 0 !important;
    }

    html.admin-document body.admin-page .admin-header,
    html.admin-document body.admin-page .stats-grid,
    html.admin-document body.admin-page .admin-page-grid,
    html.admin-document body.admin-page .settings-grid,
    html.admin-document body.admin-page .settings-inline-grid {
        max-width: none !important;
    }
}


/* ADMIN/MODERATOR MOBILE READABILITY FIX
   Only admin/moderator pages use html.admin-document. This overrides the forced
   1440px desktop viewport that made the right side cut off on phones. */
@media (max-width: 920px) {
    html.admin-document,
    html.admin-document body.admin-page {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }

    html.admin-document body.admin-page {
        position: static !important;
    }

    html.admin-document body.admin-page .admin-shell {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html.admin-document body.admin-page .admin-sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    html.dark-mode body.admin-page .admin-sidebar,
    body.admin-page.dark-mode .admin-sidebar {
        border-bottom-color: #273449 !important;
    }

    html.admin-document body.admin-page .admin-brand {
        padding-bottom: 14px !important;
        margin-bottom: 14px !important;
    }

    html.admin-document body.admin-page .admin-side-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html.admin-document body.admin-page .admin-side-nav a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 46px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        padding: 12px 10px !important;
    }

    html.admin-document body.admin-page .admin-layout,
    html.admin-document body.admin-page.admin-layout-mode-full .admin-layout,
    html.admin-document body.admin-page.admin-layout-mode-boxed .admin-layout {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 18px 14px 96px !important;
        box-sizing: border-box !important;
    }

    html.admin-document body.admin-page .admin-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-bottom: 18px !important;
    }

    html.admin-document body.admin-page .admin-header h1 {
        font-size: 28px !important;
        line-height: 1.15 !important;
        word-break: break-word !important;
    }

    html.admin-document body.admin-page .stats-grid,
    html.admin-document body.admin-page .admin-page-grid,
    html.admin-document body.admin-page .settings-grid,
    html.admin-document body.admin-page .settings-inline-grid,
    html.admin-document body.admin-page .dashboard-grid,
    html.admin-document body.admin-page .rooms-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 14px !important;
    }

    html.admin-document body.admin-page .admin-card,
    html.admin-document body.admin-page .stat-card,
    html.admin-document body.admin-page .admin-page-card,
    html.admin-document body.admin-page .settings-section-card,
    html.admin-document body.admin-page .table-wrap,
    html.admin-document body.admin-page form,
    html.admin-document body.admin-page fieldset {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }

    html.admin-document body.admin-page .admin-card,
    html.admin-document body.admin-page .stat-card,
    html.admin-document body.admin-page .admin-page-card,
    html.admin-document body.admin-page .settings-section-card {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    html.admin-document body.admin-page input,
    html.admin-document body.admin-page select,
    html.admin-document body.admin-page textarea,
    html.admin-document body.admin-page button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html.admin-document body.admin-page .table-wrap,
    html.admin-document body.admin-page .admin-table-wrap,
    html.admin-document body.admin-page .logs-table-wrap {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }

    html.admin-document body.admin-page table {
        width: max-content !important;
        min-width: 720px !important;
        max-width: none !important;
    }
}

@media (max-width: 520px) {
    html.admin-document body.admin-page .admin-side-nav {
        grid-template-columns: 1fr !important;
    }

    html.admin-document body.admin-page .admin-layout,
    html.admin-document body.admin-page.admin-layout-mode-full .admin-layout,
    html.admin-document body.admin-page.admin-layout-mode-boxed .admin-layout {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    html.admin-document body.admin-page .admin-card,
    html.admin-document body.admin-page .stat-card,
    html.admin-document body.admin-page .admin-page-card,
    html.admin-document body.admin-page .settings-section-card {
        padding: 16px !important;
    }
}

/* Typing indicator + verified profile badge upgrade */
.chat-private-prefix {
    margin-right: 2px;
}

.profile-verified-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
}

.profile-verified-note::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    font-size: 10px;
}

html.dark-mode body .profile-verified-note,
body.dark-mode .profile-verified-note {
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
}

@media (max-width: 900px) {
    body.chat-page .chat-header {
        order: 1 !important;
    }

    body.chat-page #messages,
    body.chat-page .messages {
        order: 2 !important;
    }

    body.chat-page #typingIndicator,
    body.chat-page .typing-indicator {
        order: 3 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        min-height: 28px !important;
        height: auto !important;
        padding: 4px 14px 6px !important;
        margin: 0 !important;
        background: #f4f7fb !important;
        color: #4f68a8 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        pointer-events: none !important;
        z-index: 19 !important;
    }

    body.chat-page #typingIndicator:empty,
    body.chat-page .typing-indicator:empty {
        display: none !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    html.dark-mode body.chat-page #typingIndicator,
    body.chat-page.dark-mode #typingIndicator,
    html.dark-mode body.chat-page .typing-indicator,
    body.chat-page.dark-mode .typing-indicator {
        background: #0f172a !important;
        color: #93c5fd !important;
    }

    body.chat-page form#messageForm,
    body.chat-page .message-form.fixed-bottom-form {
        order: 4 !important;
    }
}

/* Friend and private-message notifications */
.notification-list {
    display: grid;
    gap: 9px;
}

.notification-empty {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.10);
    color: #6f7b91;
    font-size: 13px;
    font-weight: 700;
}

.notification-item {
    width: 100%;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(65, 105, 225, 0.14);
    border-radius: 16px;
    padding: 12px;
    text-align: left;
    background: rgba(238, 244, 255, 0.84);
    cursor: pointer;
    color: #24324a;
}

.notification-item:hover {
    transform: translateY(-1px);
    background: #eef4ff;
}

.notification-item.friend_request {
    border-color: rgba(16, 185, 129, 0.18);
    background: rgba(236, 253, 245, 0.90);
}

.notification-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4169e1;
    box-shadow: 0 0 0 4px rgba(65, 105, 225, 0.12);
}

.notification-item.friend_request .notification-dot {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

.notification-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.notification-copy strong,
.notification-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-copy strong {
    color: #14213d;
    font-size: 14px;
}

.notification-copy small {
    color: #64748b;
    font-size: 12px;
}

.clickable-toast {
    cursor: pointer;
}

.profile-sidebar-friends {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.82);
    border: 1px solid rgba(226, 232, 240, 0.86);
}

.profile-sidebar-friends-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-size: 14px;
}

.profile-sidebar-friend-list {
    display: grid;
    gap: 8px;
}

.profile-sidebar-friend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 14px;
    text-decoration: none;
    color: #24324a;
}

.profile-sidebar-friend:hover {
    background: rgba(99, 102, 241, 0.10);
}

.profile-sidebar-friend-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    background: linear-gradient(135deg, #6366f1, #2563eb);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.profile-sidebar-friend span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.profile-sidebar-friend strong,
.profile-sidebar-friend small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-sidebar-friend strong {
    font-size: 13px;
    color: #0f172a;
}

.profile-sidebar-friend small,
.profile-sidebar-empty-friends {
    color: #64748b;
    font-size: 12px;
}

.profile-sidebar-empty-friends {
    margin: 0;
    line-height: 1.4;
}

body.dark-mode .sidebar .notification-empty {
    background: rgba(30, 41, 59, 0.88);
    color: #94a3b8;
}

body.dark-mode .sidebar .notification-item {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(99, 102, 241, 0.30);
    color: #e5e7eb;
}

body.dark-mode .sidebar .notification-copy strong {
    color: #ffffff;
}

body.dark-mode .sidebar .notification-copy small {
    color: #cbd5e1;
}

body.dark-mode.profile-dashboard-page .profile-sidebar-friends {
    background: rgba(15, 23, 42, 0.76);
    border-color: rgba(71, 85, 105, 0.82);
}

body.dark-mode.profile-dashboard-page .profile-sidebar-friends-head,
body.dark-mode.profile-dashboard-page .profile-sidebar-friend,
body.dark-mode.profile-dashboard-page .profile-sidebar-friend strong {
    color: #f8fafc;
}

body.dark-mode.profile-dashboard-page .profile-sidebar-friend:hover {
    background: rgba(99, 102, 241, 0.18);
}

body.dark-mode.profile-dashboard-page .profile-sidebar-friend small,
body.dark-mode.profile-dashboard-page .profile-sidebar-empty-friends {
    color: #94a3b8;
}

@media (max-width: 900px) {
    .profile-sidebar-friends {
        padding: 12px;
    }
}

/* Bell notifications next to the user avatar */
.notification-bell-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.notification-bell-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    background: #eef4ff;
    color: #24324a;
    box-shadow: 0 10px 30px rgba(20, 35, 70, .14);
}

.notification-bell-btn:hover,
.notification-bell-btn.has-notifications {
    background: #e0ebff;
    transform: translateY(-1px);
}

.notification-bell-icon {
    font-size: 18px;
    line-height: 1;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    border: 2px solid #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.notification-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: min(360px, 88vw);
    max-height: min(480px, 70vh);
    overflow: auto;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(226, 232, 240, 0.96);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
    z-index: 18000;
}

.notification-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 12px;
    color: #0f172a;
}

.chat-top-controls .notification-bell-wrap { order: 1; }
.chat-top-controls .header-user-avatar-link { order: 2; }
.chat-top-controls .private-actions { order: 3; }
.chat-top-controls .dark-toggle { order: 4; }

body.dark-mode .notification-bell-btn {
    background: #1f2937;
    color: #f8fafc;
}

body.dark-mode .notification-bell-btn:hover,
body.dark-mode .notification-bell-btn.has-notifications {
    background: #263241;
}

body.dark-mode .notification-badge {
    border-color: #0f172a;
}

body.dark-mode .notification-panel {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(71, 85, 105, 0.92);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

body.dark-mode .notification-panel-head,
body.dark-mode .notification-panel .notification-copy strong {
    color: #f8fafc;
}

body.dark-mode .notification-panel .notification-copy small {
    color: #cbd5e1;
}

body.dark-mode .notification-panel .notification-empty,
body.dark-mode .notification-panel .notification-item {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(99, 102, 241, 0.30);
    color: #e5e7eb;
}

body.dark-mode .notification-panel .notification-item.friend_request {
    background: rgba(6, 78, 59, 0.45);
    border-color: rgba(16, 185, 129, 0.35);
}

/* Friends page */
.dashboard-status-dot,
.user-popup-status-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #c1cad8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.13);
    vertical-align: middle;
}

.dashboard-status-dot.online,
.user-popup-status-dot.online {
    background: #35c879;
    box-shadow: 0 0 0 4px rgba(53, 200, 121, 0.16);
}

.dashboard-user-dot-line,
.user-popup-meta-line {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.friends-page-card {
    margin-bottom: 18px;
}

.friends-grid-page {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 14px;
}

.friend-card-page,
.friend-request-card-page {
    border: 1px solid #e6edf7;
    border-radius: 22px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 16px 38px rgba(37, 99, 235, 0.07);
}

.friend-card-main,
.friend-request-card-page {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #0f172a;
    text-decoration: none;
}

.friend-card-copy,
.friend-request-card-page span {
    min-width: 0;
    display: grid;
    gap: 5px;
    flex: 1;
}

.friend-card-copy strong,
.friend-card-copy small,
.friend-request-card-page strong,
.friend-request-card-page small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-card-copy small,
.friend-request-card-page small {
    color: #64748b;
    font-size: 13px;
}

.friend-mini-dl {
    margin: 14px 0;
}

.friend-request-card-page em {
    color: #4f46e5;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.compact-friends-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

body.dark-mode.profile-dashboard-page .friend-card-page,
body.dark-mode.profile-dashboard-page .friend-request-card-page {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(71, 85, 105, 0.82);
    color: #f8fafc;
}

body.dark-mode.profile-dashboard-page .friend-card-main,
body.dark-mode.profile-dashboard-page .friend-request-card-page,
body.dark-mode.profile-dashboard-page .friend-card-copy strong,
body.dark-mode.profile-dashboard-page .friend-request-card-page strong {
    color: #f8fafc;
}

body.dark-mode.profile-dashboard-page .friend-card-copy small,
body.dark-mode.profile-dashboard-page .friend-request-card-page small {
    color: #94a3b8;
}

@media (max-width: 980px) {
    .mobile-clean-topbar {
        grid-template-columns: 46px minmax(0, 1fr) 42px 42px 42px !important;
    }

    .mobile-notification-bell,
    .mobile-top-avatar-link,
    .mobile-clean-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .header-notification-bell,
    .chat-top-controls .header-user-avatar-link,
    .chat-top-controls .dark-toggle {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .notification-panel {
        position: fixed;
        top: 66px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 92px);
    }
}

.profile-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-danger-btn-v2 {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(220, 38, 38, 0.18);
}

.profile-danger-btn-v2:hover {
    transform: translateY(-1px);
}

.friend-request-card-full .friend-card-main {
    text-decoration: none;
}

.request-action-row {
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* Gender avatar ring colors: male = blue, female = pink */
.gender-male {
    --gender-avatar-color: #2563eb;
    --gender-avatar-color-2: #60a5fa;
    --gender-avatar-shadow: rgba(37, 99, 235, 0.28);
}

.gender-female {
    --gender-avatar-color: #ec4899;
    --gender-avatar-color-2: #f9a8d4;
    --gender-avatar-shadow: rgba(236, 72, 153, 0.28);
}

.avatar.gender-male,
.chat-avatar.gender-male,
.dashboard-list-avatar.gender-male,
.dashboard-detail-avatar.gender-male,
.user-popup-avatar.fallback.gender-male,
.userbar-avatar.fallback.gender-male,
.current-user-avatar.fallback.gender-male,
.header-user-avatar.fallback.gender-male,
.mobile-top-avatar.fallback.gender-male,
.profile-avatar-large-v2.fallback.gender-male {
    background: linear-gradient(135deg, var(--gender-avatar-color), var(--gender-avatar-color-2)) !important;
}

.avatar.gender-female,
.chat-avatar.gender-female,
.dashboard-list-avatar.gender-female,
.dashboard-detail-avatar.gender-female,
.user-popup-avatar.fallback.gender-female,
.userbar-avatar.fallback.gender-female,
.current-user-avatar.fallback.gender-female,
.header-user-avatar.fallback.gender-female,
.mobile-top-avatar.fallback.gender-female,
.profile-avatar-large-v2.fallback.gender-female {
    background: linear-gradient(135deg, var(--gender-avatar-color), var(--gender-avatar-color-2)) !important;
}

img.gender-male,
img.gender-female,
.avatar.gender-male,
.avatar.gender-female,
.chat-avatar.gender-male,
.chat-avatar.gender-female,
.dashboard-list-avatar.gender-male,
.dashboard-list-avatar.gender-female,
.dashboard-detail-avatar.gender-male,
.dashboard-detail-avatar.gender-female,
.user-popup-avatar.gender-male,
.user-popup-avatar.gender-female,
.userbar-avatar.gender-male,
.userbar-avatar.gender-female,
.current-user-avatar.gender-male,
.current-user-avatar.gender-female,
.header-user-avatar.gender-male,
.header-user-avatar.gender-female,
.mobile-top-avatar.gender-male,
.mobile-top-avatar.gender-female,
.profile-avatar-large-v2.gender-male,
.profile-avatar-large-v2.gender-female {
    box-sizing: border-box;
    border: 3px solid var(--gender-avatar-color) !important;
    box-shadow: 0 10px 28px var(--gender-avatar-shadow) !important;
}

.profile-avatar-large-v2.gender-male,
.profile-avatar-large-v2.gender-female {
    border-width: 5px !important;
}

/* Force gender avatar colors in the main user list and blocked user list */
.user-list .user-item.gender-male .avatar,
.user-list .user-item.gender-male .sidebar-avatar-img,
.blocked-user-item.gender-male .avatar,
.blocked-user-item.gender-male .sidebar-avatar-img,
.blocked-user-open.gender-male .avatar,
.blocked-user-open.gender-male .sidebar-avatar-img {
    box-sizing: border-box;
    border: 3px solid var(--gender-avatar-color) !important;
    box-shadow: 0 10px 28px var(--gender-avatar-shadow) !important;
}

.user-list .user-item.gender-female .avatar,
.user-list .user-item.gender-female .sidebar-avatar-img,
.blocked-user-item.gender-female .avatar,
.blocked-user-item.gender-female .sidebar-avatar-img,
.blocked-user-open.gender-female .avatar,
.blocked-user-open.gender-female .sidebar-avatar-img {
    box-sizing: border-box;
    border: 3px solid var(--gender-avatar-color) !important;
    box-shadow: 0 10px 28px var(--gender-avatar-shadow) !important;
}

.user-list .user-item.gender-male .avatar:not(img),
.blocked-user-item.gender-male .avatar:not(img),
.blocked-user-open.gender-male .avatar:not(img) {
    background: linear-gradient(135deg, var(--gender-avatar-color), var(--gender-avatar-color-2)) !important;
}

.user-list .user-item.gender-female .avatar:not(img),
.blocked-user-item.gender-female .avatar:not(img),
.blocked-user-open.gender-female .avatar:not(img) {
    background: linear-gradient(135deg, var(--gender-avatar-color), var(--gender-avatar-color-2)) !important;
}

/* Private chat three-dots actions menu */
.private-more-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.private-more-btn .private-more-dots {
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    transform: translateY(-1px);
}

.private-more-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.18);
    z-index: 20000;
}

.private-more-menu.hidden {
    display: none !important;
}

.private-more-menu-item {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #24324a;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 11px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

.private-more-menu-item:hover {
    background: rgba(99, 102, 241, 0.10);
}

.private-more-menu-item.danger {
    color: #dc2626;
}

.private-more-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.10);
}

.private-more-menu-item.safe {
    color: #16a34a;
}

.private-more-menu-item.safe:hover {
    background: rgba(34, 197, 94, 0.11);
}

.private-more-menu-item .icon-svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.private-more-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.dark-mode .private-more-menu {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(71, 85, 105, 0.92);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
}

body.dark-mode .private-more-menu-item {
    color: #f8fafc;
}

body.dark-mode .private-more-menu-item:hover {
    background: rgba(99, 102, 241, 0.18);
}

body.dark-mode .private-more-menu-item.danger {
    color: #fca5a5;
}

body.dark-mode .private-more-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.18);
}

body.dark-mode .private-more-menu-item.safe {
    color: #86efac;
}

@media (max-width: 980px) {
    .chat-top-controls .private-actions {
        overflow: visible !important;
    }

    .private-more-menu {
        right: 0;
        min-width: 176px;
    }
}


/* FINAL MOBILE MESSAGE VISIBILITY FIX
   Keep newest/short chats visible above the fixed composer instead of hiding below it. */
@media (max-width: 900px) {
    body.chat-page .messages,
    body.chat-page #messages {
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 10px 10px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.chat-page .messages.short-mobile-chat,
    body.chat-page #messages.short-mobile-chat {
        justify-content: flex-end !important;
    }

    body.chat-page .messages.short-mobile-chat > .load-older-btn,
    body.chat-page #messages.short-mobile-chat > .load-older-btn {
        display: none !important;
    }

    body.chat-page .message-row:last-of-type {
        scroll-margin-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    }
}


/* FINAL FIX: newest chat messages stay at the bottom in mobile/narrow chat frames.
   This also works inside desktop phone-preview wrappers where @media width rules do not fire. */
body.chat-page .messages.short-mobile-chat,
body.chat-page #messages.short-mobile-chat {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

body.chat-page .messages.short-mobile-chat > .load-older-btn,
body.chat-page #messages.short-mobile-chat > .load-older-btn {
    display: none !important;
}

body.chat-page .messages.short-mobile-chat > .message-row:first-of-type,
body.chat-page #messages.short-mobile-chat > .message-row:first-of-type {
    margin-top: auto !important;
}

body.chat-page .messages > .message-row:last-of-type,
body.chat-page #messages > .message-row:last-of-type {
    margin-bottom: 10px !important;
    scroll-margin-bottom: 90px !important;
}

/* REAL FINAL FIX: keep newest chat messages at the bottom of the visible message area.
   A flexible spacer before the messages uses any empty space, so one/few messages sit
   above the input bar. When there are many messages, the spacer shrinks to 0 and the
   user can scroll up normally to older messages. */
html body.chat-page .chat-panel,
html body.chat-page .chat-main {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.chat-page #messages,
html body.chat-page .messages,
html body.chat-page .chat-main #messages,
html body.chat-page .chat-panel #messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    padding: 12px 14px 12px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

html body.chat-page #messages::before,
html body.chat-page .messages::before {
    content: "" !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    pointer-events: none !important;
}

html body.chat-page #messages::after,
html body.chat-page .messages::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

html body.chat-page #messages > *,
html body.chat-page .messages > * {
    flex: 0 0 auto !important;
}

html body.chat-page #messages > .message-row:first-of-type,
html body.chat-page .messages > .message-row:first-of-type,
html body.chat-page #messages.short-mobile-chat > .message-row:first-of-type,
html body.chat-page .messages.short-mobile-chat > .message-row:first-of-type {
    margin-top: 0 !important;
}

html body.chat-page #messages > .message-row:last-of-type,
html body.chat-page .messages > .message-row:last-of-type {
    margin-bottom: 10px !important;
    scroll-margin-bottom: 14px !important;
}

html body.chat-page #messages.short-mobile-chat,
html body.chat-page .messages.short-mobile-chat {
    justify-content: flex-start !important;
}

@media (min-width: 901px) {
    html body.chat-page #messages,
    html body.chat-page .messages,
    html body.chat-page .chat-main #messages,
    html body.chat-page .chat-panel #messages {
        padding: 18px 32px 18px !important;
        scroll-padding-bottom: 18px !important;
    }
}


/* Hide duplicate chat-header bell/avatar in both public rooms and private chats.
   The mobile top bar already contains these controls; keep the notification panel available. */
.chat-header #notificationBellBtn,
.chat-header .header-user-avatar-link {
    display: none !important;
}
.chat-header #notificationBellWrap {
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
}
.chat-header #notificationPanel {
    pointer-events: auto !important;
}


/* FINAL: move light/night toggle to profile only */
.chat-header .dark-toggle,
.chat-top-controls .dark-toggle,
#mobileDarkToggleClean {
    display: none !important;
}

@media (max-width: 980px) {
    .mobile-clean-topbar {
        grid-template-columns: 46px minmax(0, 1fr) 42px 42px !important;
    }
}

.profile-theme-toggle-card {
    width: 100%;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 18px;
    background: rgba(248, 250, 252, .85);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    box-sizing: border-box;
}

.profile-theme-toggle-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.profile-theme-toggle-copy strong {
    color: #172033;
    font-size: 14px;
    font-weight: 900;
}

.profile-theme-toggle-copy span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.profile-theme-toggle-btn {
    width: 46px;
    min-width: 46px;
    height: 46px;
    border: 0;
    border-radius: 16px;
    background: #eef4ff;
    color: #172033;
    font-size: 22px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(20, 35, 70, .12);
}

.profile-theme-toggle-btn:hover {
    transform: translateY(-1px);
}

body.dark-mode .profile-theme-toggle-card,
html.dark-mode body .profile-theme-toggle-card {
    background: rgba(17, 24, 39, .92);
    border-color: rgba(148, 163, 184, .22);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

body.dark-mode .profile-theme-toggle-copy strong,
html.dark-mode body .profile-theme-toggle-copy strong {
    color: #e5e7eb;
}

body.dark-mode .profile-theme-toggle-copy span,
html.dark-mode body .profile-theme-toggle-copy span {
    color: #94a3b8;
}

body.dark-mode .profile-theme-toggle-btn,
html.dark-mode body .profile-theme-toggle-btn {
    background: rgba(30, 41, 59, .95);
    color: #f8fafc;
}


/* FINAL FIX: rooms/private headers show only notification bell + user profile bar */
.chat-header #notificationBellWrap {
    width: auto !important;
    min-width: 42px !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
}
.chat-header #notificationBellBtn {
    display: inline-flex !important;
}
.chat-header .header-user-avatar-link {
    display: inline-flex !important;
}
.chat-top-controls .private-actions,
.chat-top-controls .private-actions:not(.hidden),
.chat-header #privateActions,
.chat-header #privateActions:not(.hidden) {
    display: none !important;
}
.chat-top-controls .dark-toggle,
.chat-header .dark-toggle,
#mobileDarkToggleClean {
    display: none !important;
}
@media (max-width: 980px) {
    .chat-top-controls {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }
}


/* FINAL FIX: restore private chat audio/video/three-dots actions only in private chats */
.chat-top-controls #privateActions:not(.hidden),
.chat-top-controls .private-actions:not(.hidden),
.chat-header #privateActions:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
.chat-top-controls #privateActions.hidden,
.chat-top-controls .private-actions.hidden,
.chat-header #privateActions.hidden {
    display: none !important;
}
@media (max-width: 980px) {
    .chat-top-controls #privateActions:not(.hidden),
    .chat-top-controls .private-actions:not(.hidden),
    .chat-header #privateActions:not(.hidden) {
        display: flex !important;
        gap: 7px !important;
        max-width: min(54vw, 230px) !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: auto !important;
        position: relative !important;
        z-index: 30000 !important;
    }

    .chat-top-controls,
    .chat-header,
    .private-more-wrap {
        overflow: visible !important;
    }

    .private-more-btn,
    .message-menu-toggle {
        touch-action: manipulation !important;
        pointer-events: auto !important;
    }

    .private-more-menu {
        position: absolute !important;
        right: 0 !important;
        top: calc(100% + 10px) !important;
        z-index: 30001 !important;
        pointer-events: auto !important;
    }
}

/* MOBILE: remove duplicate lower-header notification bell and user avatar.
   The mobile clean top bar already shows them. Keep private actions in private chat. */
@media (max-width: 980px) {
    .chat-header #notificationBellWrap,
    .chat-header .header-user-avatar-link {
        display: none !important;
    }
}


/* Compact mobile room info strip: keep rooms from covering too much chat area. */
.room-info-section {
    min-width: 0;
}

.room-info-content {
    min-width: 0;
}

.room-info-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 2px 0 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
}

.room-info-toggle-line {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #d9e2ef, #cbd7e8);
}

.room-info-toggle-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

.room-info-toggle-chevron {
    flex: 0 0 auto;
    font-size: 12px;
    transition: transform .18s ease;
}

.room-info-section.room-info-collapsible .room-info-toggle {
    display: inline-flex;
}

.room-info-section.room-info-collapsible.collapsed .room-info-content {
    display: none;
}

.room-info-section.room-info-collapsible:not(.collapsed) .room-info-toggle-chevron {
    transform: rotate(180deg);
}

@media (max-width: 980px) {
    .chat-header {
        align-items: flex-start !important;
    }

    .chat-header .room-info-section.room-info-collapsible {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-content {
        padding-top: 2px;
    }
}

body.dark-mode .room-info-toggle,
html.dark-mode body .room-info-toggle {
    color: #94a3b8;
}

body.dark-mode .room-info-toggle-line,
html.dark-mode body .room-info-toggle-line {
    background: linear-gradient(90deg, rgba(100, 116, 139, .85), rgba(71, 85, 105, .95));
}


/* Mobile room info: small centered line that opens a popup card. */
.room-info-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.room-info-popup {
    display: none;
}

@media (max-width: 980px) {
    .chat-header {
        position: relative !important;
        align-items: flex-start !important;
    }

    .chat-header .room-info-section.room-info-collapsible {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: 18px;
        padding-top: 2px;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-content {
        display: none !important;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: 3px 0 4px;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-toggle-line {
        width: 88px;
        height: 5px;
        border-radius: 999px;
        background: linear-gradient(90deg, #cfd9e7, #bcc9da);
        box-shadow: inset 0 1px 1px rgba(255,255,255,.7);
    }

    .chat-header .room-info-section.room-info-collapsible.popup-open .room-info-toggle-line {
        background: linear-gradient(90deg, #93c5fd, #60a5fa);
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-popup {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        display: none;
        width: min(88vw, 320px);
        padding: 14px 16px;
        border-radius: 18px;
        border: 1px solid rgba(148, 163, 184, .28);
        background: rgba(255,255,255,.98);
        box-shadow: 0 16px 36px rgba(15, 23, 42, .18);
        z-index: 35;
        text-align: left;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-popup::before {
        content: '';
        position: absolute;
        top: -7px;
        left: 50%;
        width: 14px;
        height: 14px;
        transform: translateX(-50%) rotate(45deg);
        background: rgba(255,255,255,.98);
        border-left: 1px solid rgba(148, 163, 184, .28);
        border-top: 1px solid rgba(148, 163, 184, .28);
    }

    .chat-header .room-info-section.room-info-collapsible.popup-open .room-info-popup {
        display: block;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-popup h3 {
        margin: 0 0 4px;
        font-size: 24px;
        line-height: 1.15;
        color: #1e293b;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-popup p {
        margin: 0;
        color: #64748b;
        font-size: 14px;
        line-height: 1.4;
    }
}

body.dark-mode .room-info-section.room-info-collapsible .room-info-toggle-line,
html.dark-mode body .room-info-section.room-info-collapsible .room-info-toggle-line {
    background: linear-gradient(90deg, rgba(148, 163, 184, .72), rgba(100, 116, 139, .88));
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .34);
}

body.dark-mode .room-info-section.room-info-collapsible.popup-open .room-info-toggle-line,
html.dark-mode body .room-info-section.room-info-collapsible.popup-open .room-info-toggle-line {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

@media (max-width: 980px) {
    body.dark-mode .chat-header .room-info-section.room-info-collapsible .room-info-popup,
    html.dark-mode body .chat-header .room-info-section.room-info-collapsible .room-info-popup {
        background: rgba(15, 23, 42, .98);
        border-color: rgba(71, 85, 105, .85);
        box-shadow: 0 16px 36px rgba(0, 0, 0, .34);
    }

    body.dark-mode .chat-header .room-info-section.room-info-collapsible .room-info-popup::before,
    html.dark-mode body .chat-header .room-info-section.room-info-collapsible .room-info-popup::before {
        background: rgba(15, 23, 42, .98);
        border-left-color: rgba(71, 85, 105, .85);
        border-top-color: rgba(71, 85, 105, .85);
    }

    body.dark-mode .chat-header .room-info-section.room-info-collapsible .room-info-popup h3,
    html.dark-mode body .chat-header .room-info-section.room-info-collapsible .room-info-popup h3 {
        color: #f8fafc;
    }

    body.dark-mode .chat-header .room-info-section.room-info-collapsible .room-info-popup p,
    html.dark-mode body .chat-header .room-info-section.room-info-collapsible .room-info-popup p {
        color: #94a3b8;
    }
}


/* FINAL: room info trigger should show only the small line, no visible extra box. */
@media (max-width: 980px) {
    .chat-header .room-info-section.room-info-collapsible {
        min-height: 12px !important;
        padding-top: 0 !important;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-toggle {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        height: 10px !important;
        min-height: 10px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-toggle::before,
    .chat-header .room-info-section.room-info-collapsible .room-info-toggle::after {
        display: none !important;
        content: none !important;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-toggle-line {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        height: 5px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: #cbd7e6 !important;
        box-shadow: none !important;
        display: block !important;
    }

    .chat-header .room-info-section.room-info-collapsible.popup-open .room-info-toggle-line {
        background: #a9b9cf !important;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-toggle-chevron,
    .chat-header .room-info-section.room-info-collapsible .room-info-toggle-text {
        display: none !important;
    }
}

body.dark-mode .chat-header .room-info-section.room-info-collapsible .room-info-toggle-line,
html.dark-mode body .chat-header .room-info-section.room-info-collapsible .room-info-toggle-line {
    background: rgba(148, 163, 184, .72) !important;
}

body.dark-mode .chat-header .room-info-section.room-info-collapsible.popup-open .room-info-toggle-line,
html.dark-mode body .chat-header .room-info-section.room-info-collapsible.popup-open .room-info-toggle-line {
    background: rgba(148, 163, 184, .9) !important;
}

/* FINAL CLEANUP: remove any visible box/container around the mobile room info line. */
@media (max-width: 980px) {
    .chat-header .room-info-section,
    .chat-header .room-info-section.room-info-collapsible {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        min-height: 6px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 auto !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
        flex: 0 0 88px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-content {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-toggle {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .chat-header .room-info-section.room-info-collapsible .room-info-popup {
        z-index: 50 !important;
    }
}


/* HARD FIX: on mobile public rooms, collapse the lower chat header to only the small line. */
@media (max-width: 980px) {
    html body.chat-page .chat-main .chat-header.room-line-only-mode,
    html body.chat-page .chat-panel .chat-header.room-line-only-mode,
    html body.chat-page .chat-header.room-line-only-mode {
        min-height: 12px !important;
        height: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        overflow: visible !important;
        z-index: 8 !important;
    }

    html body.chat-page .chat-header.room-line-only-mode > :not(.room-info-section) {
        display: none !important;
    }

    html body.chat-page .chat-header.room-line-only-mode .room-info-section,
    html body.chat-page .chat-header.room-line-only-mode .room-info-section.room-info-collapsible {
        position: relative !important;
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        height: 8px !important;
        min-height: 8px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 88px !important;
        overflow: visible !important;
    }

    html body.chat-page .chat-header.room-line-only-mode .room-info-toggle {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        height: 8px !important;
        min-height: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    html body.chat-page .chat-header.room-line-only-mode .room-info-toggle-line {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        height: 5px !important;
        background: #cbd7e6 !important;
        border-radius: 999px !important;
        display: block !important;
        box-shadow: none !important;
    }

    html body.chat-page .chat-header.room-line-only-mode .room-info-popup {
        top: 14px !important;
    }
}


/* FINAL REQUEST: public room header is already shown in the mobile top bar.
   Remove the lower room info box/line completely on mobile rooms. */
@media (max-width: 980px) {
    html body.chat-page .chat-main .chat-header.room-line-only-mode,
    html body.chat-page .chat-panel .chat-header.room-line-only-mode,
    html body.chat-page .chat-header.room-line-only-mode {
        display: none !important;
        visibility: hidden !important;
        min-height: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    html body.chat-page .chat-header.room-line-only-mode *,
    html body.chat-page .chat-header.room-line-only-mode .room-info-toggle,
    html body.chat-page .chat-header.room-line-only-mode .room-info-toggle-line,
    html body.chat-page .chat-header.room-line-only-mode .room-info-popup {
        display: none !important;
        visibility: hidden !important;
    }
}


/* Final fix: public room lower header is redundant because the top bar already shows the room.
   Hide the lower room header completely so no blank box/line covers the chat. */
@media (max-width: 980px) {
    html body.chat-page .chat-header.public-room-no-header {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    html body.chat-page .chat-header.public-room-no-header * {
        display: none !important;
    }
}


/* Composer + menu for emoji, file upload, and voice record */
#messageForm,
.chat-panel #messageForm,
.chat-main #messageForm {
    position: relative;
}

.composer-tools {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

#composerMoreBtn,
.chat-panel #composerMoreBtn,
.chat-main #composerMoreBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

#composerMoreBtn.is-open {
    transform: rotate(45deg);
}

.composer-quick-actions {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dbe5f0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    z-index: 35;
}

.composer-quick-actions.hidden {
    display: none !important;
}

.composer-quick-actions #emojiBtn,
.composer-quick-actions #attachBtn,
.composer-quick-actions #recordVoiceBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.composer-quick-actions #emojiBtn.hidden,
.composer-quick-actions #attachBtn.hidden,
.composer-quick-actions #recordVoiceBtn.hidden {
    display: none !important;
}

.recording-indicator {
    margin-left: 8px;
}

body.dark-mode .composer-quick-actions,
html.dark-mode body .composer-quick-actions {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(71, 85, 105, 0.95);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}

@media (max-width: 980px) {
    .composer-quick-actions {
        bottom: calc(100% + 8px);
        padding: 8px;
        gap: 7px;
        border-radius: 14px;
    }
}


/* Fix message action menu covering/clickability: raise the active message row above neighbors. */
.message-row {
    position: relative !important;
    overflow: visible !important;
}

.message-row.menu-open {
    z-index: 1200 !important;
}

.message-row.menu-open .message-bubble,
.message-row.menu-open .message-actions,
.message-row.menu-open .message-actions-dropdown {
    z-index: 1201 !important;
}

.message-actions-dropdown.menu-open {
    position: relative !important;
    z-index: 1202 !important;
}

.message-actions-dropdown.menu-open .message-menu,
.message-row.menu-open .message-menu {
    z-index: 1203 !important;
    pointer-events: auto !important;
}

/* Keep menu comfortably above nearby content on both desktop and mobile. */
.message-menu.open {
    display: grid !important;
}

@media (max-width: 900px) {
    .message-row.menu-open {
        z-index: 1300 !important;
    }

    .message-actions-dropdown.menu-open .message-menu,
    .message-row.menu-open .message-menu {
        z-index: 1301 !important;
    }
}

/* Dark mode fix for confirm/prompt popups */
body.dark-mode .modern-modal,
html.dark-mode body .modern-modal {
    background: #172033 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(71, 85, 105, 0.9) !important;
    box-shadow: 0 28px 90px rgba(2, 6, 23, 0.55) !important;
}

body.dark-mode .modern-modal h3,
html.dark-mode body .modern-modal h3 {
    color: #f8fafc !important;
}

body.dark-mode .modern-modal p,
html.dark-mode body .modern-modal p {
    color: #94a3b8 !important;
}

body.dark-mode .modern-modal-input,
html.dark-mode body .modern-modal-input {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: rgba(71, 85, 105, 0.95) !important;
}

body.dark-mode .modern-modal-input::placeholder,
html.dark-mode body .modern-modal-input::placeholder {
    color: #64748b !important;
}

body.dark-mode .modern-modal-input:focus,
html.dark-mode body .modern-modal-input:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16) !important;
}

body.dark-mode .modern-modal-icon,
html.dark-mode body .modern-modal-icon {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}

body.dark-mode .modern-modal-icon.danger,
html.dark-mode body .modern-modal-icon.danger {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}

body.dark-mode .modal-cancel,
html.dark-mode body .modal-cancel {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

body.dark-mode .modal-confirm,
html.dark-mode body .modal-confirm {
    background: #4169e1 !important;
    color: #ffffff !important;
}

body.dark-mode .modal-confirm.danger,
html.dark-mode body .modal-confirm.danger {
    background: #e84855 !important;
    color: #ffffff !important;
}

/* FINAL mobile video-call camera fix: show the full remote camera and keep self-preview small. */
@media (max-width: 900px) {
    #callOverlay .call-video-area,
    #callOverlay .call-audio-area {
        padding: 0 0 96px !important;
        background: #000 !important;
        overflow: hidden !important;
    }

    #callOverlay .call-video-area video#remoteVideo,
    #callOverlay #remoteVideo {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: #000 !important;
    }

    #callOverlay .call-self-preview {
        width: 74px !important;
        height: 98px !important;
        top: auto !important;
        right: 12px !important;
        bottom: 112px !important;
        border-radius: 16px !important;
        border: 2px solid rgba(255,255,255,0.72) !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.42) !important;
        z-index: 7 !important;
    }

    #callOverlay .call-self-preview video,
    #callOverlay #localVideo {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    #callOverlay .call-bottom-bar {
        padding: 18px 16px 16px !important;
        background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.72) 36%, rgba(0,0,0,0.96)) !important;
    }
}

@media (max-width: 460px) {
    #callOverlay .call-self-preview {
        width: 68px !important;
        height: 92px !important;
        right: 10px !important;
        bottom: 104px !important;
        border-radius: 15px !important;
    }

    #callOverlay .call-video-area,
    #callOverlay .call-audio-area {
        padding-bottom: 90px !important;
    }
}

/* Move call chat reopen button/icon to the left side. */
#callOverlay .call-chat-reopen {
    left: 18px !important;
    right: auto !important;
}

@media (max-width: 460px) {
    #callOverlay .call-chat-reopen {
        left: 14px !important;
        right: auto !important;
    }
}

/* FINAL MOBILE DASHBOARD SCROLL FIX
   Profile, Messages, Friends, Friend Requests and Calls are normal pages,
   so they must scroll on phones. Chat.php remains locked separately. */
html:has(body.profile-dashboard-page),
html:has(body.user-dashboard-page),
html.profile-document {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    overscroll-behavior-y: auto !important;
}

body.profile-dashboard-page,
body.user-dashboard-page,
html.profile-document body.profile-dashboard-page,
html.profile-document body.profile-page-modern {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

body.profile-dashboard-page .profile-dashboard-layout,
body.user-dashboard-page .profile-dashboard-layout,
html.profile-document .profile-dashboard-layout {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
}

body.profile-dashboard-page .profile-dashboard-main,
body.user-dashboard-page .profile-dashboard-main,
body.profile-dashboard-page .user-page-main,
body.user-dashboard-page .user-page-main,
body.profile-dashboard-page .profile-dashboard-form,
body.user-dashboard-page .profile-dashboard-form,
body.profile-dashboard-page .profile-form-card-v2,
body.user-dashboard-page .profile-form-card-v2,
body.profile-dashboard-page .profile-summary-card-v2,
body.user-dashboard-page .profile-summary-card-v2,
body.profile-dashboard-page .profile-content-stack-v2,
body.user-dashboard-page .profile-content-stack-v2,
body.profile-dashboard-page .user-dashboard-grid,
body.user-dashboard-page .user-dashboard-grid {
    max-height: none !important;
    overflow: visible !important;
}

body.user-dashboard-page .calls-table-wrap,
body.profile-dashboard-page .calls-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 900px) {
    html:has(body.profile-dashboard-page),
    html:has(body.user-dashboard-page),
    html.profile-document {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.profile-dashboard-page,
    body.user-dashboard-page,
    html.profile-document body.profile-dashboard-page,
    html.profile-document body.profile-page-modern {
        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.profile-dashboard-page .profile-dashboard-layout,
    body.user-dashboard-page .profile-dashboard-layout,
    html.profile-document .profile-dashboard-layout {
        display: block !important;
        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.profile-dashboard-page .profile-app-sidebar,
    body.user-dashboard-page .profile-app-sidebar,
    html.profile-document .profile-app-sidebar {
        position: static !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.profile-dashboard-page .profile-dashboard-main,
    body.user-dashboard-page .profile-dashboard-main,
    body.profile-dashboard-page .user-page-main,
    body.user-dashboard-page .user-page-main,
    html.profile-document .profile-dashboard-main {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.profile-dashboard-page .profile-summary-card-v2,
    body.user-dashboard-page .profile-summary-card-v2,
    html.profile-document .profile-summary-card-v2 {
        position: static !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.profile-dashboard-page .profile-form-card-v2,
    body.user-dashboard-page .profile-form-card-v2,
    body.profile-dashboard-page .friends-page-card,
    body.user-dashboard-page .friends-page-card,
    body.profile-dashboard-page .calls-page-card,
    body.user-dashboard-page .calls-page-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.user-dashboard-page .user-message-thread,
    body.profile-dashboard-page .user-message-thread {
        max-height: none !important;
        min-height: 260px !important;
        overflow: visible !important;
    }

    body.user-dashboard-page .dashboard-stat-row,
    body.profile-dashboard-page .dashboard-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.user-dashboard-page .dashboard-table,
    body.profile-dashboard-page .dashboard-table {
        min-width: 680px !important;
    }
}

@media (max-width: 560px) {
    body.user-dashboard-page .dashboard-stat-row,
    body.profile-dashboard-page .dashboard-stat-row {
        grid-template-columns: 1fr !important;
    }
}


/* Admin progressive lists: keep Show more inside the table area so the whole page does not jump down. */
.table-wrap.admin-compact-scroll {
    max-height: 62vh !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    scroll-behavior: auto !important;
}

.table-wrap.admin-compact-scroll tbody tr.admin-paged-row[style*="display: none"] {
    display: none !important;
}

.admin-list-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    z-index: 3;
}

@media (max-width: 920px) {
    .table-wrap.admin-compact-scroll {
        max-height: 62svh !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}


/* Admin show-more everywhere: keep long lists inside their cards. */
body.admin-page .table-wrap.admin-compact-scroll {
    max-height: 62vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

body.admin-page .admin-list-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    z-index: 3;
}

@media (max-width: 900px) {
    html.admin-document,
    html.admin-document body,
    body.admin-page {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: static !important;
    }

    body.admin-page .admin-shell,
    body.admin-page .admin-layout {
        min-height: 100dvh !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.admin-page .table-wrap.admin-compact-scroll {
        max-height: min(68vh, 560px) !important;
        overflow: auto !important;
    }

    body.admin-page .admin-list-footer {
        position: static !important;
        flex-direction: column;
        align-items: stretch;
    }

    body.admin-page .admin-show-more-btn {
        width: 100%;
    }
}

/* Admin-created site pages */
.page-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.page-admin-form textarea {
    min-height: 260px;
    resize: vertical;
    line-height: 1.6;
}

.page-toggle-list {
    margin: 14px 0;
}

.static-page-list {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.static-page-link {
    text-decoration: none;
}

.static-page-link .room-icon {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    margin-right: 8px;
}

.content-page {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #f6f8fb 0%, #eef2f7 100%);
    color: #172033;
}

.content-page-shell {
    width: min(960px, calc(100% - 28px));
    margin: 0 auto;
    padding: 28px 0 46px;
}

.content-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.content-page-brand,
.content-page-nav a,
.content-page-button {
    text-decoration: none;
}

.content-page-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    font-weight: 800;
}

.content-page-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.content-page-logo.fallback {
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: #2563eb;
}

.content-page-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.content-page-nav a,
.content-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    color: #1f2937;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}

.content-page-card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 26px;
    padding: clamp(22px, 4vw, 38px);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.content-page-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.content-page-card h1 {
    margin: 14px 0 18px;
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.05;
}

.content-page-body {
    font-size: 1.06rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.content-page-body a {
    color: #2563eb;
    font-weight: 700;
}

.content-page-updated {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, .24);
}

.content-page-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.content-page-list a {
    display: grid;
    gap: 5px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 18px;
    color: inherit;
    text-decoration: none;
    background: #f8fafc;
}

.content-page-list a:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
}

.content-page-list span {
    color: #64748b;
    font-size: .9rem;
}

body.dark-mode.content-page,
html.dark-mode body.content-page {
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
    color: #e5e7eb;
}

body.dark-mode.content-page .content-page-card,
html.dark-mode body.content-page .content-page-card,
body.dark-mode.content-page .content-page-nav a,
html.dark-mode body.content-page .content-page-nav a,
body.dark-mode.content-page .content-page-button,
html.dark-mode body.content-page .content-page-button {
    background: #111827;
    border-color: rgba(148, 163, 184, .22);
    color: #e5e7eb;
}

body.dark-mode.content-page .content-page-list a,
html.dark-mode body.content-page .content-page-list a {
    background: rgba(15, 23, 42, .72);
    border-color: rgba(148, 163, 184, .22);
}

@media (max-width: 700px) {
    .page-editor-grid {
        grid-template-columns: 1fr;
    }

    .content-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .content-page-nav {
        width: 100%;
    }

    .content-page-nav a {
        flex: 1;
    }
}


/* Room join/leave system notices */
.message-row.system-row {
    justify-content: center !important;
    align-items: center !important;
    margin: 10px 0 !important;
    padding: 0 12px;
    width: 100%;
}

.message-row.system-row .system-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(92%, 560px);
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.16);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.message-row.system-row .system-notice-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #22c55e;
}

.message-row.system-row[data-system-event="left"] .system-notice-dot {
    background: #94a3b8;
}

.message-row.system-row .system-notice time {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

body.dark-mode .message-row.system-row .system-notice,
html.dark-mode body .message-row.system-row .system-notice {
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.22);
    color: #e2e8f0;
}

body.dark-mode .message-row.system-row .system-notice time,
html.dark-mode body .message-row.system-row .system-notice time {
    color: #cbd5e1;
}

/* Room management and leave-room controls */
.room-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-actions.hidden {
    display: none !important;
}

.room-leave-btn {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
}

.room-main-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

body.dark-mode .room-main-badge,
html.dark-mode .room-main-badge {
    background: rgba(147, 197, 253, 0.18);
    color: #bfdbfe;
}

.room-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.inline-action-form {
    display: inline-flex;
    margin: 0;
}

.room-edit-row td {
    background: rgba(15, 23, 42, 0.03);
}

body.dark-mode .room-edit-row td,
html.dark-mode .room-edit-row td {
    background: rgba(255, 255, 255, 0.04);
}

.room-edit-form {
    align-items: center;
}

@media (max-width: 700px) {
    .room-actions {
        order: 4;
        width: auto;
    }

    .room-leave-btn {
        padding: 7px 10px;
        font-size: 12px;
    }

    .room-actions-cell {
        display: grid;
    }
}

/* Right rooms sidebar: shows the same room list on the right side without changing the left menu. */
body.chat-page .app-shell {
    grid-template-columns: 330px minmax(0, 1fr) 300px !important;
}

body.chat-page .right-rooms-sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    padding: 22px;
    color: #0f172a;
}

body.chat-page .right-rooms-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

body.chat-page .right-rooms-title {
    margin: 0;
}

body.chat-page .right-rooms-hint {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

body.chat-page .right-room-list {
    margin-bottom: 0;
}

body.chat-page .right-rooms-sidebar .room-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}

body.chat-page .right-rooms-sidebar .room-item:hover {
    background: #eef4ff;
    color: #2f5fe4;
}

body.chat-page .right-rooms-sidebar .room-item.active {
    background: #eef4ff;
    border-color: #b9ccff;
    color: #2f5fe4;
}

body.dark-mode.chat-page .right-rooms-sidebar,
html.dark-mode body.chat-page .right-rooms-sidebar {
    background: #0f172a !important;
    border-left-color: #1e293b !important;
    color: #e5e7eb !important;
}

body.dark-mode.chat-page .right-rooms-hint,
html.dark-mode body.chat-page .right-rooms-hint {
    color: #94a3b8 !important;
}

body.dark-mode.chat-page .right-rooms-sidebar .room-item,
html.dark-mode body.chat-page .right-rooms-sidebar .room-item {
    background: #111827 !important;
    border-color: #243244 !important;
    color: #e5e7eb !important;
}

body.dark-mode.chat-page .right-rooms-sidebar .room-item:hover,
body.dark-mode.chat-page .right-rooms-sidebar .room-item.active,
html.dark-mode body.chat-page .right-rooms-sidebar .room-item:hover,
html.dark-mode body.chat-page .right-rooms-sidebar .room-item.active {
    background: #1e293b !important;
    border-color: #365686 !important;
    color: #bfdbfe !important;
}

@media (max-width: 1280px) {
    body.chat-page .app-shell {
        grid-template-columns: 300px minmax(0, 1fr) 260px !important;
    }

    body.chat-page .right-rooms-sidebar {
        padding: 18px;
    }
}

@media (max-width: 980px) {
    body.chat-page .app-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.chat-page .right-rooms-sidebar {
        display: none !important;
    }
}

/* Mobile rooms popup: button beside notifications and room picker dialog. */
.mobile-rooms-top-btn,
.mobile-rooms-modal-overlay,
.mobile-rooms-popup {
    display: none;
}

@media (max-width: 980px) {
    body.chat-page .mobile-clean-topbar {
        grid-template-columns: 40px minmax(0, 1fr) 40px 40px 40px !important;
        gap: 6px !important;
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
    }

    body.chat-page .mobile-clean-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    body.chat-page .mobile-rooms-top-btn {
        display: grid !important;
        place-items: center;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    body.chat-page .mobile-rooms-top-btn .icon-svg,
    body.chat-page .mobile-rooms-top-btn .icon-svg svg {
        width: 21px !important;
        height: 21px !important;
    }

    body.chat-page .mobile-rooms-modal-overlay {
        position: fixed;
        inset: 0;
        display: block;
        opacity: 0;
        pointer-events: none;
        background: rgba(15, 23, 42, .48);
        z-index: 10030;
        transition: opacity .18s ease;
    }

    body.chat-page.mobile-rooms-popup-open .mobile-rooms-modal-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    body.chat-page .mobile-rooms-popup {
        position: fixed;
        left: 12px;
        right: 12px;
        top: calc(66px + env(safe-area-inset-top));
        display: block;
        max-height: calc(100dvh - 86px - env(safe-area-inset-top));
        overflow: hidden;
        background: #ffffff;
        color: #0f172a;
        border: 1px solid #dbe5f3;
        border-radius: 22px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .30);
        z-index: 10040;
        transform: translateY(-8px) scale(.98);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
    }

    body.chat-page.mobile-rooms-popup-open .mobile-rooms-popup {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    body.chat-page .mobile-rooms-popup-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 14px 12px;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
    }

    body.chat-page .mobile-rooms-popup-head strong {
        display: block;
        font-size: 17px;
        color: #0f172a;
        line-height: 1.1;
    }

    body.chat-page .mobile-rooms-popup-head span {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        color: #64748b;
        font-weight: 700;
    }

    body.chat-page .mobile-rooms-close {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 14px;
        background: #eef4ff;
        color: #172033;
        font-size: 26px;
        font-weight: 900;
        line-height: 1;
        display: grid;
        place-items: center;
    }

    body.chat-page .mobile-popup-room-list {
        max-height: calc(100dvh - 162px - env(safe-area-inset-top));
        overflow-y: auto;
        padding: 12px;
        margin: 0 !important;
        display: grid;
        gap: 8px;
    }

    body.chat-page .mobile-popup-room-list .room-item {
        width: 100%;
        min-height: 48px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #0f172a;
        text-align: left;
    }

    body.chat-page .mobile-popup-room-list .room-item:hover,
    body.chat-page .mobile-popup-room-list .room-item.active {
        background: #eef4ff;
        border-color: #b9ccff;
        color: #2f5fe4;
    }

    body.dark-mode.chat-page .mobile-rooms-popup,
    html.dark-mode body.chat-page .mobile-rooms-popup {
        background: #0f172a !important;
        color: #e5e7eb !important;
        border-color: #1e293b !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
    }

    body.dark-mode.chat-page .mobile-rooms-popup-head,
    html.dark-mode body.chat-page .mobile-rooms-popup-head {
        background: #111827 !important;
        border-bottom-color: #243244 !important;
    }

    body.dark-mode.chat-page .mobile-rooms-popup-head strong,
    html.dark-mode body.chat-page .mobile-rooms-popup-head strong {
        color: #f8fafc !important;
    }

    body.dark-mode.chat-page .mobile-rooms-popup-head span,
    html.dark-mode body.chat-page .mobile-rooms-popup-head span {
        color: #94a3b8 !important;
    }

    body.dark-mode.chat-page .mobile-rooms-close,
    html.dark-mode body.chat-page .mobile-rooms-close,
    body.dark-mode.chat-page .mobile-rooms-top-btn,
    html.dark-mode body.chat-page .mobile-rooms-top-btn {
        background: #1e293b !important;
        color: #e5e7eb !important;
    }

    body.dark-mode.chat-page .mobile-popup-room-list .room-item,
    html.dark-mode body.chat-page .mobile-popup-room-list .room-item {
        background: #111827 !important;
        border-color: #243244 !important;
        color: #e5e7eb !important;
    }

    body.dark-mode.chat-page .mobile-popup-room-list .room-item:hover,
    body.dark-mode.chat-page .mobile-popup-room-list .room-item.active,
    html.dark-mode body.chat-page .mobile-popup-room-list .room-item:hover,
    html.dark-mode body.chat-page .mobile-popup-room-list .room-item.active {
        background: #1e293b !important;
        border-color: #365686 !important;
        color: #bfdbfe !important;
    }
}

@media (max-width: 360px) {
    body.chat-page .mobile-clean-topbar {
        grid-template-columns: 38px minmax(0, 1fr) 38px 38px 38px !important;
        gap: 5px !important;
    }

    body.chat-page .mobile-clean-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    body.chat-page .mobile-rooms-top-btn {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }
}

/* Mobile notification fix: keep the hidden desktop wrapper alive because it owns
   the notification popup, while still hiding the duplicate desktop bell/avatar. */
@media (max-width: 980px) {
    .chat-header #notificationBellWrap {
        display: block !important;
        position: static !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        overflow: visible !important;
        pointer-events: none !important;
        flex: 0 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .chat-header #notificationBellBtn {
        display: none !important;
    }

    .chat-header #notificationPanel {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 92px) !important;
        overflow: auto !important;
        pointer-events: auto !important;
        z-index: 40000 !important;
    }

    .chat-header #notificationPanel.hidden {
        display: none !important;
    }
}

/* Custom requested fixes: use right-side rooms only, simpler user title, and reliable mobile notifications. */
body.chat-page .sidebar > #roomList {
    display: none !important;
}

body.chat-page #notificationPanel.mobile-fixed-panel {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top, 0px)) !important;
    overflow: auto !important;
    pointer-events: auto !important;
    z-index: 50000 !important;
}

body.chat-page #notificationPanel.mobile-fixed-panel.hidden {
    display: none !important;
}

@media (max-width: 980px) {
    body.chat-page #notificationPanel.mobile-fixed-panel {
        display: block;
    }

    body.chat-page #notificationPanel.mobile-fixed-panel.hidden {
        display: none !important;
    }
}

/* Room password/admin manager additions */
.admin-card-heading-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.room-create-form,
.room-edit-form {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.room-create-form button,
.room-edit-form button {
    min-height: 46px;
}

.room-password-help {
    margin-top: 10px;
}

.room-lock-badge,
.room-password-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(245, 158, 11, .14);
    color: #92400e;
    font-size: 12px;
    font-weight: 900;
}

html.dark-mode .room-lock-badge,
body.dark-mode .room-lock-badge,
html.dark-mode .room-password-badge,
body.dark-mode .room-password-badge {
    background: rgba(245, 158, 11, .18);
    color: #fbbf24;
}

@media (max-width: 980px) {
    .room-create-form,
    .room-edit-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .room-create-form,
    .room-edit-form {
        grid-template-columns: 1fr;
    }
}

/* Modern admin sidebar and Rooms modal workflow */
body.admin-page {
    background: #f3f6fb;
}

html.admin-document body.admin-page .admin-shell {
    background: linear-gradient(135deg, #f6f8fc 0%, #eef3fb 100%);
}

html.admin-document body.admin-page .admin-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #111c35 52%, #16213b 100%) !important;
    color: #e5edf8 !important;
    border-right: 0 !important;
    box-shadow: 18px 0 42px rgba(15, 23, 42, .14) !important;
}

html.admin-document body.admin-page .admin-brand {
    border-bottom-color: rgba(255, 255, 255, .11) !important;
}

html.admin-document body.admin-page .admin-brand strong {
    color: #ffffff !important;
    line-height: 1.25;
}

html.admin-document body.admin-page .admin-brand small {
    color: #a9b8d0 !important;
}

html.admin-document body.admin-page .admin-logo {
    background: linear-gradient(135deg, #60a5fa 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(96, 165, 250, .24) !important;
}

.admin-menu-icon {
    width: 19px;
    height: 19px;
    min-width: 19px;
    display: inline-block;
    vertical-align: -4px;
}

html.admin-document body.admin-page .admin-side-nav {
    gap: 7px !important;
}

html.admin-document body.admin-page .admin-side-nav a {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    justify-content: flex-start !important;
    min-height: 46px !important;
    padding: 11px 12px !important;
    border-radius: 16px !important;
    color: #cbd5e1 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}

html.admin-document body.admin-page .admin-side-nav a:hover,
html.admin-document body.admin-page .admin-side-nav a.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    transform: translateX(2px);
}

html.admin-document body.admin-page .admin-side-nav a.active {
    box-shadow: inset 3px 0 0 #60a5fa, 0 12px 26px rgba(15, 23, 42, .18) !important;
}

html.admin-document body.admin-page .admin-side-nav .logout-side-link {
    color: #fecdd3 !important;
    background: rgba(225, 63, 85, .12) !important;
}

html.admin-document body.admin-page .admin-nav-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html.admin-document body.admin-page .admin-nav-badge {
    margin-left: auto;
    background: #f43f5e !important;
    color: #ffffff !important;
}

html.admin-document body.admin-page .admin-header,
html.admin-document body.admin-page .admin-card,
html.admin-document body.admin-page .alert {
    border: 1px solid rgba(226, 232, 240, .9) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08) !important;
}

.admin-room-list-card {
    overflow: hidden;
}

.room-list-heading-row {
    align-items: center;
    margin-bottom: 18px;
}

.admin-primary-action,
.admin-secondary-action,
.admin-form-modal .modal-confirm,
.admin-form-modal .modal-cancel {
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 900;
}

.admin-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    background: linear-gradient(135deg, #4169e1, #7c3aed);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(65, 105, 225, .25);
}

.admin-secondary-action {
    background: #edf4ff;
    color: #315bdc;
    padding: 8px 12px;
}

.admin-rooms-table-wrap {
    border-radius: 18px !important;
    border: 1px solid #e5edf6 !important;
    background: #ffffff !important;
}

.admin-rooms-table th {
    background: #f8fbff;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-room-row.is-clickable {
    cursor: pointer;
}

.admin-room-row.is-clickable:hover td {
    background: #f6f9ff;
}

.admin-id-pill,
.room-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    padding: 4px 9px;
}

.admin-id-pill {
    background: #eef2ff;
    color: #315bdc;
}

.room-status-pill.main {
    background: #dcfce7;
    color: #166534;
}

.room-status-pill.public {
    background: #e0f2fe;
    color: #0369a1;
}

.room-status-pill.private {
    background: #fce7f3;
    color: #be185d;
}

.admin-form-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 80000;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(10px);
}

.admin-form-modal-overlay.hidden {
    display: none !important;
}

.admin-form-modal {
    width: min(720px, 100%);
    max-height: min(760px, calc(100dvh - 44px));
    overflow: auto;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 30px 90px rgba(2, 8, 23, .34);
    border: 1px solid rgba(255, 255, 255, .72);
    padding: 24px;
    animation: adminModalIn .18s ease-out;
}

.admin-form-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #edf2f7;
}

.admin-form-modal-header h2 {
    margin: 4px 0 6px;
}

.admin-modal-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #315bdc;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-modal-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    background: #f1f5f9;
    color: #334155;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.admin-modal-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-modal-form label {
    display: grid;
    gap: 7px;
    color: #334155;
    font-weight: 900;
}

.admin-modal-form input[type="text"],
.admin-modal-form input[type="password"] {
    width: 100%;
    border: 1px solid #dbe5f1;
    border-radius: 15px;
    padding: 13px 14px;
    background: #fbfdff;
    color: #0f172a;
    outline: none;
}

.admin-modal-form input:focus {
    border-color: #4169e1;
    box-shadow: 0 0 0 4px rgba(65, 105, 225, .13);
}

.admin-modal-field-wide,
.admin-modal-checks,
.admin-modal-actions {
    grid-column: 1 / -1;
}

.admin-modal-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #e7edf6;
}

.admin-modal-checks .check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
}

.admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
}

.admin-form-modal .modal-cancel,
.admin-form-modal .modal-confirm {
    min-height: 44px;
    padding: 0 16px;
}

.admin-form-modal .modal-cancel {
    background: #eef2f7;
    color: #334155;
}

.admin-form-modal .modal-confirm {
    background: linear-gradient(135deg, #4169e1, #7c3aed);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(65, 105, 225, .24);
}

body.admin-modal-open-state {
    overflow: hidden !important;
}

@keyframes adminModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

html.dark-mode body.admin-page .admin-card,
body.admin-page.dark-mode .admin-card,
html.dark-mode body.admin-page .admin-header,
body.admin-page.dark-mode .admin-header {
    background: #111827 !important;
    border-color: #263348 !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25) !important;
}

html.dark-mode body.admin-page .admin-rooms-table-wrap,
body.admin-page.dark-mode .admin-rooms-table-wrap,
html.dark-mode body.admin-page .admin-form-modal,
body.admin-page.dark-mode .admin-form-modal {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #263348 !important;
}

html.dark-mode body.admin-page .admin-rooms-table th,
body.admin-page.dark-mode .admin-rooms-table th,
html.dark-mode body.admin-page .admin-room-row.is-clickable:hover td,
body.admin-page.dark-mode .admin-room-row.is-clickable:hover td {
    background: #172033 !important;
}

html.dark-mode body.admin-page .admin-form-modal-header,
body.admin-page.dark-mode .admin-form-modal-header {
    border-bottom-color: #263348 !important;
}

html.dark-mode body.admin-page .admin-modal-form input[type="text"],
html.dark-mode body.admin-page .admin-modal-form input[type="password"],
body.admin-page.dark-mode .admin-modal-form input[type="text"],
body.admin-page.dark-mode .admin-modal-form input[type="password"] {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.dark-mode body.admin-page .admin-modal-checks,
body.admin-page.dark-mode .admin-modal-checks {
    background: #0f172a !important;
    border-color: #263348 !important;
}

@media (max-width: 920px) {
    html.admin-document body.admin-page .admin-sidebar {
        border-bottom: 0 !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .18) !important;
    }

    html.admin-document body.admin-page .admin-side-nav a:hover,
    html.admin-document body.admin-page .admin-side-nav a.active {
        transform: none;
    }

    .room-list-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-primary-action {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .admin-form-modal-overlay {
        padding: 10px;
        align-items: end;
    }

    .admin-form-modal {
        width: 100%;
        max-height: calc(100dvh - 20px);
        border-radius: 24px 24px 0 0;
        padding: 18px;
    }

    .admin-modal-form {
        grid-template-columns: 1fr;
    }

    .admin-modal-actions {
        flex-direction: column-reverse;
    }

    .admin-form-modal .modal-cancel,
    .admin-form-modal .modal-confirm {
        width: 100%;
    }
}

/* Batch bad-word filter form */
.admin-bad-words-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.admin-bad-words-form textarea {
    width: 100%;
    min-height: 280px;
    max-height: none;
    overflow-y: hidden;
    border: 1px solid #dbe2ef;
    border-radius: 16px;
    padding: 14px 15px;
    resize: vertical;
    outline: none;
    font: inherit;
    color: #172033;
    background: #fff;
}

.admin-bad-words-form textarea:focus {
    border-color: #4f75e8;
    box-shadow: 0 0 0 4px rgba(79, 117, 232, .12);
}


.admin-bulk-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.bad-words-counter {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(65, 105, 225, .1);
    color: #2744a0;
    font-size: 13px;
    font-weight: 800;
}

.dark-mode .bad-words-counter {
    background: rgba(96, 165, 250, .16);
    color: #bfdbfe;
}

.admin-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-form-actions button {
    border: 0;
    background: #4169e1;
    color: #fff;
    border-radius: 14px;
    padding: 13px 18px;
    font-weight: 800;
    cursor: pointer;
}

.small-text {
    font-size: 13px;
}

.dark-mode .admin-bad-words-form textarea {
    background: #111827;
    border-color: rgba(148, 163, 184, .26);
    color: #e5e7eb;
}

.user-list-empty {
    border: 1px dashed rgba(111, 123, 145, .35);
    border-radius: 14px;
    color: #7d8797;
    font-size: 13px;
    line-height: 1.4;
    padding: 14px;
    text-align: center;
}

body.dark-mode .user-list-empty,
html.dark-mode body .user-list-empty {
    border-color: rgba(148, 163, 184, .25);
    color: #94a3b8;
}

/* Admin Users modal workflow */
.admin-user-list-card,
.admin-data-table-wrap {
    overflow: hidden;
}

.admin-data-table-wrap {
    border-radius: 18px !important;
    border: 1px solid #e5edf6 !important;
    background: #ffffff !important;
}

.admin-data-table th {
    background: #f8fbff;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-data-row.is-clickable {
    cursor: pointer;
}

.admin-data-row.is-clickable:hover td {
    background: #f6f9ff;
}

.admin-username-open,
.admin-username-static {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font: inherit;
    font-weight: 900;
    text-align: left;
}

.admin-username-open {
    cursor: pointer;
}

.admin-username-open:hover {
    color: #4169e1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.admin-user-modal {
    width: min(780px, 100%);
}

.admin-user-modal-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.admin-user-modal-summary > div {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid #e7edf6;
    border-radius: 16px;
    background: #f8fbff;
    min-width: 0;
}

.admin-user-modal-summary span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-user-modal-summary strong {
    color: #0f172a;
    overflow-wrap: anywhere;
}

.admin-modal-form input[type="email"],
.admin-modal-form input[type="datetime-local"],
.admin-modal-form select,
.admin-modal-form textarea {
    width: 100%;
    border: 1px solid #dbe5f1;
    border-radius: 15px;
    padding: 13px 14px;
    background: #fbfdff;
    color: #0f172a;
    outline: none;
}

.admin-modal-form select:focus,
.admin-modal-form textarea:focus,
.admin-modal-form input[type="email"]:focus,
.admin-modal-form input[type="datetime-local"]:focus {
    border-color: #4169e1;
    box-shadow: 0 0 0 4px rgba(65, 105, 225, .13);
}

.admin-user-edit-form {
    margin-bottom: 18px;
}

.admin-user-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid #edf2f7;
}

.admin-user-actions-grid form {
    margin: 0;
}

.admin-user-actions-grid button {
    min-height: 38px;
    border-radius: 12px;
}

html.dark-mode body.admin-page .admin-data-table-wrap,
body.admin-page.dark-mode .admin-data-table-wrap,
html.dark-mode body.admin-page .admin-user-modal-summary > div,
body.admin-page.dark-mode .admin-user-modal-summary > div {
    background: #111827 !important;
    border-color: #263348 !important;
}

html.dark-mode body.admin-page .admin-data-table th,
body.admin-page.dark-mode .admin-data-table th,
html.dark-mode body.admin-page .admin-data-row.is-clickable:hover td,
body.admin-page.dark-mode .admin-data-row.is-clickable:hover td {
    background: #172033 !important;
}

html.dark-mode body.admin-page .admin-user-modal-summary strong,
body.admin-page.dark-mode .admin-user-modal-summary strong {
    color: #e5e7eb !important;
}

html.dark-mode body.admin-page .admin-modal-form input[type="email"],
html.dark-mode body.admin-page .admin-modal-form input[type="datetime-local"],
html.dark-mode body.admin-page .admin-modal-form select,
html.dark-mode body.admin-page .admin-modal-form textarea,
body.admin-page.dark-mode .admin-modal-form input[type="email"],
body.admin-page.dark-mode .admin-modal-form input[type="datetime-local"],
body.admin-page.dark-mode .admin-modal-form select,
body.admin-page.dark-mode .admin-modal-form textarea {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.dark-mode body.admin-page .admin-user-actions-grid,
body.admin-page.dark-mode .admin-user-actions-grid {
    border-top-color: #263348 !important;
}

@media (max-width: 760px) {
    .admin-user-modal-summary {
        grid-template-columns: 1fr;
    }
}


/* User privacy dashboard */
.profile-privacy-toggle-list {
    display: grid;
    gap: 14px;
}

.profile-privacy-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid #e5ecf6;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.profile-privacy-toggle-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.profile-privacy-toggle-copy strong {
    color: #172033;
    font-size: 15px;
}

.profile-privacy-toggle-copy small {
    color: #738096;
    line-height: 1.5;
}

.user-popup-privacy-note {
    margin: 8px 0 0;
    font-size: 13px;
}

.user-popup-actions button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

body.dark-mode.profile-dashboard-page .profile-privacy-toggle-row,
html.dark-mode body.profile-dashboard-page .profile-privacy-toggle-row {
    background: #0f172a !important;
    border-color: #273449 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
}

body.dark-mode.profile-dashboard-page .profile-privacy-toggle-copy strong,
html.dark-mode body.profile-dashboard-page .profile-privacy-toggle-copy strong {
    color: #f8fafc !important;
}

body.dark-mode.profile-dashboard-page .profile-privacy-toggle-copy small,
html.dark-mode body.profile-dashboard-page .profile-privacy-toggle-copy small {
    color: #94a3b8 !important;
}

@media (max-width: 560px) {
    .profile-privacy-toggle-row {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        border-radius: 18px;
    }

    .profile-privacy-toggle-row .toggle-switch {
        justify-content: flex-end;
    }
}

/* Polished privacy dashboard to match the requested settings mockup */
body.profile-dashboard-page.user-dashboard-page {
    background:
        radial-gradient(circle at 84% 6%, rgba(79, 70, 229, 0.10), transparent 25%),
        radial-gradient(circle at 33% 2%, rgba(59, 130, 246, 0.08), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.profile-app-sidebar {
    padding: 28px 22px 24px;
    gap: 18px;
}

.profile-brand {
    min-height: 52px;
    padding: 0 4px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.profile-sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 4px 16px;
    color: #172033;
    text-decoration: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.profile-sidebar-avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    object-fit: cover;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 16px 32px rgba(79, 70, 229, 0.22);
}

.profile-sidebar-user-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.profile-sidebar-user-copy strong {
    overflow: hidden;
    color: #172033;
    font-size: 16px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-sidebar-user-copy small {
    color: #7b8798;
    font-size: 13px;
    font-weight: 700;
}

.profile-sidebar-user-card:hover .profile-sidebar-user-copy strong {
    color: #4f46e5;
}

.profile-back-chat-link {
    display: none;
}

.privacy-dashboard-main {
    position: relative;
    padding: 52px clamp(22px, 4vw, 72px) 56px;
    isolation: isolate;
}

.privacy-dashboard-main::after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 380px;
    height: 320px;
    opacity: .55;
    background-image: radial-gradient(rgba(37, 99, 235, .16) 1.2px, transparent 1.2px);
    background-size: 18px 18px;
    pointer-events: none;
}

.privacy-dashboard-header {
    max-width: 1084px;
    margin: 0 auto 28px;
}

.privacy-dashboard-header h1 {
    font-size: clamp(40px, 4.2vw, 58px);
    line-height: .98;
    letter-spacing: -0.055em;
}

.privacy-dashboard-header p {
    margin-top: 16px;
    color: #63708a;
    font-size: 16px;
    font-weight: 650;
}

.privacy-back-chat-btn {
    min-width: 214px;
    min-height: 52px;
    gap: 10px;
    border-radius: 14px;
    color: #1f2a44;
    font-size: 15px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.privacy-back-chat-btn svg {
    width: 21px;
    height: 21px;
    color: #315cf4;
}

.privacy-settings-form {
    display: block;
    max-width: 1084px;
    margin: 0 auto;
}

.privacy-card-v2 {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(226, 232, 240, 0.86);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(22px);
}

.privacy-card-body {
    padding: 30px;
}

.privacy-card-intro {
    position: relative;
    overflow: hidden;
    align-items: center;
    min-height: 124px;
    margin: 0 0 30px;
    padding: 26px 28px;
    border-radius: 16px;
    background:
        linear-gradient(110deg, rgba(242, 246, 255, .98) 0%, rgba(248, 251, 255, .96) 62%, rgba(239, 246, 255, .92) 100%);
}

.privacy-card-intro::after {
    content: "";
    position: absolute;
    top: 6px;
    right: -72px;
    width: 500px;
    height: 156px;
    opacity: .48;
    background:
        repeating-radial-gradient(ellipse at 100% 50%, transparent 0 13px, rgba(79, 70, 229, .13) 14px 15px, transparent 16px 26px);
    pointer-events: none;
    transform: rotate(-3deg);
}

.privacy-card-intro > * {
    position: relative;
    z-index: 1;
}

.privacy-heading-icon,
.profile-privacy-option-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 22px;
    background: linear-gradient(180deg, #edf3ff, #eaf0ff);
    color: #4169e1;
    box-shadow: 0 18px 36px rgba(65, 105, 225, 0.10);
}

.privacy-heading-icon svg,
.profile-privacy-option-icon svg {
    width: 34px;
    height: 34px;
}

.privacy-card-intro h3 {
    color: #111a2e;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.025em;
}

.privacy-card-intro p {
    max-width: 520px;
    margin-top: 8px;
    color: #778297;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.55;
}

.profile-privacy-toggle-list {
    gap: 16px;
}

.profile-privacy-toggle-row {
    gap: 24px;
    min-height: 118px;
    padding: 22px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.profile-privacy-toggle-row:hover {
    border-color: rgba(99, 102, 241, 0.30);
    box-shadow: 0 20px 46px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.profile-privacy-toggle-copy {
    flex: 1 1 auto;
    gap: 8px;
}

.profile-privacy-toggle-copy strong {
    color: #111827;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.profile-privacy-toggle-copy small {
    max-width: 650px;
    color: #7a8498;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.5;
}

.profile-privacy-toggle-row .toggle-slider {
    width: 68px;
    height: 38px;
    background: #d7deeb;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.08);
}

.profile-privacy-toggle-row .toggle-slider::after {
    top: 4px;
    left: 4px;
    width: 30px;
    height: 30px;
}

.profile-privacy-toggle-row .toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, #4169e1, #315cf4);
    box-shadow: 0 14px 28px rgba(49, 92, 244, 0.28);
}

.profile-privacy-toggle-row .toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(30px);
}

.privacy-card-actions-v2 {
    margin: 0;
    padding: 20px 30px 24px;
    border-top: 1px solid rgba(226, 232, 240, 0.88);
    background: rgba(248, 250, 252, 0.80);
}

.privacy-card-actions-v2 .profile-secondary-btn-v2,
.privacy-card-actions-v2 .profile-primary-btn-v2 {
    min-width: 164px;
    min-height: 56px;
    border-radius: 12px;
    font-size: 16px;
}

.privacy-card-actions-v2 .profile-secondary-btn-v2 {
    border-color: #dbe3ef;
    color: #202b43;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.privacy-card-actions-v2 .profile-primary-btn-v2 {
    background: linear-gradient(135deg, #4169e1, #315cf4);
    box-shadow: 0 18px 36px rgba(49, 92, 244, 0.28);
}

body.dark-mode.profile-dashboard-page.user-dashboard-page {
    background:
        radial-gradient(circle at 84% 6%, rgba(79, 70, 229, 0.18), transparent 25%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

body.dark-mode.profile-dashboard-page .profile-sidebar-user-card,
html.dark-mode body.profile-dashboard-page .profile-sidebar-user-card,
body.dark-mode.profile-dashboard-page .profile-brand,
html.dark-mode body.profile-dashboard-page .profile-brand {
    border-color: #263348;
}

body.dark-mode.profile-dashboard-page .profile-sidebar-user-copy strong,
html.dark-mode body.profile-dashboard-page .profile-sidebar-user-copy strong {
    color: #f8fafc;
}

body.dark-mode.profile-dashboard-page .profile-sidebar-user-copy small,
html.dark-mode body.profile-dashboard-page .profile-sidebar-user-copy small {
    color: #94a3b8;
}

body.dark-mode.profile-dashboard-page .privacy-card-v2,
html.dark-mode body.profile-dashboard-page .privacy-card-v2 {
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: #263348 !important;
}

body.dark-mode.profile-dashboard-page .privacy-card-intro,
html.dark-mode body.profile-dashboard-page .privacy-card-intro {
    background: linear-gradient(110deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .96)) !important;
}

body.dark-mode.profile-dashboard-page .privacy-card-actions-v2,
html.dark-mode body.profile-dashboard-page .privacy-card-actions-v2 {
    background: rgba(2, 6, 23, 0.38);
    border-top-color: #263348;
}

body.dark-mode.profile-dashboard-page .privacy-card-intro h3,
body.dark-mode.profile-dashboard-page .profile-privacy-toggle-copy strong,
html.dark-mode body.profile-dashboard-page .privacy-card-intro h3,
html.dark-mode body.profile-dashboard-page .profile-privacy-toggle-copy strong {
    color: #f8fafc !important;
}

body.dark-mode.profile-dashboard-page .privacy-card-intro p,
body.dark-mode.profile-dashboard-page .profile-privacy-toggle-copy small,
html.dark-mode body.profile-dashboard-page .privacy-card-intro p,
html.dark-mode body.profile-dashboard-page .profile-privacy-toggle-copy small {
    color: #a9b6ca !important;
}

body.dark-mode.profile-dashboard-page .profile-privacy-option-icon,
body.dark-mode.profile-dashboard-page .privacy-heading-icon,
html.dark-mode body.profile-dashboard-page .profile-privacy-option-icon,
html.dark-mode body.profile-dashboard-page .privacy-heading-icon {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #8fb2ff !important;
}

@media (max-width: 1180px) {
    .privacy-dashboard-main {
        padding: 34px 24px 42px;
    }

    .privacy-settings-form,
    .privacy-dashboard-header {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .profile-app-sidebar {
        padding: 16px;
    }

    .profile-brand,
    .profile-sidebar-user-card {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .profile-sidebar-user-card {
        padding: 10px 4px;
    }

    .profile-back-chat-link {
        display: flex;
    }

    .privacy-dashboard-main {
        padding: 24px 14px 34px !important;
    }

    .privacy-dashboard-header {
        margin-bottom: 18px;
    }

    .privacy-dashboard-header h1 {
        font-size: 36px;
    }
}

@media (max-width: 680px) {
    .privacy-card-body {
        padding: 16px;
    }

    .privacy-card-intro {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .privacy-heading-icon,
    .profile-privacy-option-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        border-radius: 18px;
    }

    .privacy-heading-icon svg,
    .profile-privacy-option-icon svg {
        width: 28px;
        height: 28px;
    }

    .profile-privacy-toggle-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        min-height: 0;
        padding: 18px;
    }

    .profile-privacy-toggle-copy {
        flex: 1 1 calc(100% - 84px);
    }

    .profile-privacy-toggle-copy strong {
        font-size: 18px;
    }

    .profile-privacy-toggle-copy small {
        font-size: 14px;
    }

    .profile-privacy-toggle-row .toggle-switch {
        width: 100%;
        justify-content: flex-end;
    }

    .privacy-card-actions-v2 {
        padding: 16px;
    }
}

.privacy-heading-icon,
.profile-privacy-option-icon {
    display: inline-grid;
    place-items: center;
}


/* Admin impersonation */
button.impersonate-action,
.admin-user-actions-grid button.impersonate-action {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    border: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

button.impersonate-action:hover,
.admin-user-actions-grid button.impersonate-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .28);
}

.impersonation-banner {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(640px, calc(100vw - 28px));
    padding: 12px 14px;
    border: 1px solid rgba(37, 99, 235, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .2);
    backdrop-filter: blur(14px);
}

.impersonation-banner-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.impersonation-banner-copy strong {
    color: #0f172a;
    font-size: 14px;
}

.impersonation-banner-copy span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.impersonation-banner form,
.profile-impersonation-card form {
    margin: 0;
}

.impersonation-banner button,
.profile-impersonation-card button {
    border: 0;
    border-radius: 12px;
    padding: 10px 13px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.impersonation-banner button:hover,
.profile-impersonation-card button:hover {
    background: #1d4ed8;
}

.profile-impersonation-card {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding: 12px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(124, 58, 237, .08));
}

.profile-impersonation-card strong {
    color: #0f172a;
    font-size: 13px;
}

.profile-impersonation-card span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.profile-impersonation-card button {
    width: 100%;
}

html.dark-mode .impersonation-banner,
body.dark-mode .impersonation-banner,
html.dark-mode body.profile-dashboard-page .profile-impersonation-card,
body.dark-mode.profile-dashboard-page .profile-impersonation-card {
    background: rgba(15, 23, 42, .94);
    border-color: rgba(96, 165, 250, .28);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}

html.dark-mode .impersonation-banner-copy strong,
body.dark-mode .impersonation-banner-copy strong,
html.dark-mode body.profile-dashboard-page .profile-impersonation-card strong,
body.dark-mode.profile-dashboard-page .profile-impersonation-card strong {
    color: #e5e7eb;
}

html.dark-mode .impersonation-banner-copy span,
body.dark-mode .impersonation-banner-copy span,
html.dark-mode body.profile-dashboard-page .profile-impersonation-card span,
body.dark-mode.profile-dashboard-page .profile-impersonation-card span {
    color: #94a3b8;
}

@media (max-width: 640px) {
    .impersonation-banner {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        bottom: 12px;
    }

    .impersonation-banner button {
        width: 100%;
    }
}