* {
    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;
}

.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;
}

.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;
}

@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;
    }
}



/* Sidebar radio player */
.sidebar-radio-player {
    margin-top: 22px;
    padding: 16px;
    border: 1px solid #dbe5ff;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff, #eef4ff);
    box-shadow: 0 10px 24px rgba(47, 95, 228, 0.08);
}

.sidebar-radio-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sidebar-radio-head strong,
.sidebar-radio-head span {
    display: block;
}

.sidebar-radio-head strong {
    font-size: 15px;
}

.sidebar-radio-head div > span {
    color: #6f7b91;
    font-size: 12px;
    font-weight: 700;
}

.sidebar-radio-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(47, 95, 228, 0.10);
}

.sidebar-radio-label {
    display: block;
    margin: 8px 0 6px;
    color: #6f7b91;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sidebar-radio-select {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #dbe2ef;
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    background: #fff;
}

.sidebar-radio-audio {
    width: 100%;
    display: block;
    height: 42px;
}

.sidebar-radio-note {
    margin: 8px 0 0;
    color: #6f7b91;
    font-size: 12px;
    line-height: 1.35;
}

body.dark-mode .sidebar-radio-player {
    border-color: rgba(143, 168, 255, .28);
    background: linear-gradient(135deg, rgba(31, 41, 55, .96), rgba(15, 23, 42, .96));
    box-shadow: none;
}

body.dark-mode .sidebar-radio-icon,
body.dark-mode .sidebar-radio-select {
    background: #111827;
    color: #e5e7eb;
    border-color: rgba(143, 168, 255, .28);
}

body.dark-mode .sidebar-radio-head div > span,
body.dark-mode .sidebar-radio-label,
body.dark-mode .sidebar-radio-note {
    color: #9ca3af;
}