@font-face {
    font-family: 'Yekan';
    src: url('/fonts/Yekan/Yekan.eot');
    src: url('/fonts/Yekan/Yekan.eot?#iefix') format('embedded-opentype'), url('/fonts/Yekan/Yekan.woff') format('woff'), url('/fonts/Yekan/Yekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Yekan', Tahoma, sans-serif;
    direction: rtl;
    background: #f5f8fa;
}

/* Pre Loader */
.preloader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 999;
}

.hidePreloader {
    display: none !important;
}
/* end Pre Loader */

/* public */
.no-shadow:focus {
    box-shadow: none !important;
}
.No-Border {
    border: none !important;
}
.list-group-item {
    background-color: transparent !important;
    padding-inline: 5px !important;
    padding-block: 3px !important;
}
.log-Message {
    background-color: white !important;
    padding-inline: 20px !important;
    padding-block: 8px !important;
    border-radius: 0px !important;
}
.chat-img {
    width: 100%;
    max-width: 200px;
    border: 2px solid #ddd;
    border-radius: 10px;
}
.btnSend {
    border-radius: 0px 0px 0px 0px !important;
}
.File-DropUp {
    border-radius: 0px 0px 0px 0px;
}
.File-DropUp::after {
    display: none !important;
}
/* end public */

/* Headers */
.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 220px;
    margin: 0 auto 25px;
    padding: 12px 28px;
    direction: rtl;
    position: relative;
    overflow: hidden;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: center;
    background: linear-gradient( 135deg, rgba(59,130,246,.30), rgba(14,165,233,.22), rgba(6,182,212,.18) );
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* Border */
    border: 2px solid rgba(125, 211, 252, 0.45);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(59,130,246,.25), 0 0 12px rgba(14,165,233,.20), inset 0 1px 1px rgba(255,255,255,.35);
    transition: all .35s ease;
}

.section-header::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient( 135deg, rgba(255,255,255,.35), rgba(255,255,255,.08) 45%, transparent 75% );
    pointer-events: none;
}

.section-header:hover {
    transform: translateY(-3px);
    border-color: rgba(186, 230, 253, .8);
    box-shadow: 0 16px 40px rgba(59,130,246,.35), 0 0 24px rgba(56,189,248,.45), inset 0 1px 1px rgba(255,255,255,.45);
}

.section-header span {
    font-size: 20px;
    font-weight: bold;
    color: #3a7bd5; /* رنگ متن */
    white-space: nowrap;
}
/* End Header */

/* Main */
.navbar {
    border-bottom: 2px solid #2563eb !important;
}

.main-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.room-btn {
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 10px;
    transition: all 0.2s ease-in-out;
}

.room-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.site-footer {
    font-size: 13px;
    color: #666;
}
/* End Main */

/* Chatroom styles */
.ChatroomBody {
    background: #34e89e;
    background: -webkit-linear-gradient(to right, #0f3443, #34e89e);
    background: linear-gradient(to right, #0f3443, #34e89e);
}

.full-width-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 90vh;
}

#ChatroomHeader {
    height:60px;
    padding-top: 13px;
    border: 1px solid lightgrey;
    padding-inline: 20px;
    text-align: center;
}

#roomName{
    font: bold;
    margin-left: 40px;
    font-size: 0.9rem;
}

.ChatroomReturnButton {
    margin-left: 20px;
}

#messagesList {
    position: relative;
    height: 0px;
    flex-grow: 1;
    overflow-y: auto;
    padding: 5px;
    border-radius: 0px;
}

.date-divider {
    z-index: 10;
    position: absolute;
    top: 65px;
    width: 100%;
}

#currentDate {
    background: rgba(255,255,255,0.6);
    color: gray;
    display: inline-block;
    padding: 2px;
    padding-inline: 10px;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: bold;
}

.date-separator-badge {
    background: rgba(255,255,255,0.6);
    color: gray;
    display: inline-block;
    padding-block: 3px;
    padding-inline: 8px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: bold;
}

#scrollToBottomBtn {
    position: absolute;
    bottom: 40px;
    right: 15px;
    z-index: 10;
    opacity: 0.85;
    width: 30px;
    border-radius: 100px;
}

.date {
    background: rgba(255,255,255,0.6);
    font-size: 12px;
    display: inline-block
}

.my-message {
    text-align: right;
}

.their-message {
    text-align: left;
}

.their-message .message-header {
    text-align: right;
}

.their-message .message-footer {
    text-align: right;
}

.their-message .message-edited {
    text-align: right;
}

.message-bubble {
    position: relative;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 15px;
    margin: 5px;
    max-width: 70%;
    word-wrap: break-word;
    background-color: #dcf8c6;
}

@media (min-width: 768px) {
    .message-bubble {
        max-width: 350px;
    }
}

.my-message .message-bubble {
    background-color: #dcf8c6;
    color: #000;
}

.their-message .message-bubble {
    background-color: #ffffff;
    color: #000;
    border: 1px solid #ccc;
}

.message-header {
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.message-text {
    font-size: 0.9rem;
    text-align: right;
    overflow: hidden;
}

.message-footer {
    font-size: 0.6rem;
    margin-top: 5px;
}

.message-edited {
    font-size: 0.6rem;
    margin-top: 5px;
}

.message-removing {
    opacity: 0;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    transform: translateX(1.5rem) scale(0.96);
    transition: opacity 0.28s ease, max-height 0.38s ease, margin 0.38s ease, padding 0.38s ease, transform 0.28s ease;
}

/* Attachment upload dialogs */
.chat-shell ~ .modal .upload-picker-card,
.ChatroomBody > .modal .upload-picker-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem;
    margin: .15rem 0 1rem;
    border: 1px solid rgba(37, 99, 235, .15);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(239, 246, 255, .9), rgba(248, 250, 252, .95));
}
.upload-picker-icon { display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: .9rem; color: #fff; font-size: 1.35rem; }
.upload-picker-icon.image { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.upload-picker-icon.video { background: linear-gradient(135deg, #db2777, #9333ea); }
.upload-picker-icon.audio { background: linear-gradient(135deg, #0f766e, #0891b2); }
.upload-picker-icon.file { background: linear-gradient(135deg, #d97706, #ea580c); }
.upload-submit { display: flex; justify-content: center; align-items: center; gap: .5rem; min-height: 2.8rem; font-weight: 700; }
#audioUploadProgress { margin-top: 1rem !important; }
.upload-preview { overflow: hidden; margin: 0 0 1rem; border: 1px solid rgba(100, 116, 139, .2); border-radius: 1rem; background: #f8fafc; }
.upload-preview-image img { display: block; width: 100%; max-height: 19rem; object-fit: contain; background: #0f172a; }
.upload-preview-video video { display: block; width: 100%; max-height: 19rem; background: #020617; }
.upload-preview-audio { padding: .8rem; }
.upload-preview-audio audio { display: block; width: 100%; }
.upload-file-meta { display: flex; justify-content: space-between; gap: .75rem; padding: .65rem .8rem; color: #475569; font-size: .78rem; }
.upload-preview-file { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; color: #334155; }
.upload-preview-file > i { color: #ea580c; font-size: 2rem; }
.upload-preview-file strong, .upload-preview-file small { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.upload-preview-file small { margin-top: .2rem; color: #64748b; }
.upload-help { margin-top: 1rem; margin-bottom: 0; border: 0; border-radius: .85rem; font-size: .8rem; }
.upload-help p { margin: .2rem 0; }
[data-bs-theme="dark"] .ChatroomBody > .modal .upload-picker-card { border-color: #334155; background: linear-gradient(135deg, #1e293b, #172033); }
[data-bs-theme="dark"] .upload-preview { border-color: #334155; background: #172033; }
[data-bs-theme="dark"] .upload-file-meta, [data-bs-theme="dark"] .upload-preview-file { color: #cbd5e1; }
[data-bs-theme="dark"] .upload-preview-file small { color: #94a3b8; }

.my-message .message-actions {
    position: absolute;
    bottom: 10px;
    left: -30px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.their-message .message-actions {
    position: absolute;
    bottom: 10px;
    right: -30px;
    opacity: 0;
    transition: opacity 0.3s ease;
    /*display: none;*/
}

.their-message .delete-btn,
.their-message .edit-image-btn,
.their-message .edit-btn {
    display: none;
}

.message-bubble:hover .message-actions,
.message-bubble:focus .message-actions {
    opacity: 0.9;
}

.message-actions button {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    font-size: 14px;
    background-color: #f0f0f0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.message-actions button:hover {
    background-color: #e0e0e0;
}

/* Reply */
.highlight {
    background-color: #f1f1f1 !important;
    transition: background-color 0.5s;
}

.reply-preview {
    background: rgba(52,232,158,0.2);
    backdrop-filter: blur(10px);
    padding: 5px;
    padding-inline: 15px;
    margin-bottom: 5px;
    border-radius: 10px;
    color: gray;
    font-size: x-small;
    position: relative;
    text-align: right;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.reply-preview-side {
    background-color: #34e89e;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 5px;
    height: 100%
}

#replyPreview {
    max-width: 690px;
    direction: rtl;
    text-align: right;
    position: absolute;
    left: 25px;
    right: 25px;
    padding-block: 7px;
    bottom: 48px;
    margin: auto;
    border-radius: 0 !important;
}

#replyText {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    padding-inline: 10px;
}

/* Audio Player */
.audio-player {
    background-color: white;
    width: 200px;
    border: 1px solid #ccc;
    padding: 5px 5px;
    border-radius: 10px;
    text-align: center;
    direction: rtl;
}

.voice-progress-bar {
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 5px;
    margin-top: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.voice-progress {
    height: 100%;
    width: 0%;
    background: #2196f3;
    transition: width 0.1s linear;
    position: absolute;
    right: 0;
}

.audio-filename {
    width: 135px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr
}

/* Video Player */
.message-video {
    max-width: 300px;
}

/* File */
.file-message {
    width: 200px;
    border: 1px solid #ccc;
    text-align: left;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#typingIndicator {
    font-size: 0.7rem;
    color: #888;
    font-style: italic;
    padding: 0 !important;
    margin: 0 !important
}

#recordingIndicator {
    font-size: 0.7rem;
    font-style: italic;
    padding: 0 !important;
    margin: 0 !important
}

.rainbow-button {
    position: relative;
    padding: 4px 4px;
    background: transparent;
    color: black;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1;
    border-radius: 20px;
    /*overflow: hidden;*/
}

.rainbow-button::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, violet, red);
    z-index: -1;
    border-radius: 10px;
    background-size: 300% 300%;
    animation: borderAnimation 6s linear infinite;
}

.rainbow-button::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: white;
    border: none;
    z-index: -1;
    border-radius: 6px;
}

@keyframes borderAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.sendMessageSection {
    height: 40px;
    max-width: 700px;
    margin: auto;
    background-color: white;
    border: 1px solid lightgrey;
    border-radius: 30px !important;
}

#sendFileButton {
    border-radius: 30px 0px 0px 30px !important;
}

#recordButton {
    border: none;
    border-radius: 0px 30px 30px 0px !important;
}

#sendButton {
    border: none;
    border-radius: 0px 30px 30px 0px !important;
}

/* End Chatroom styles */
/* login */
.login-Section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.LoginForm {
    background: rgba(255,255,255,0.4);
    border-radius: 10px;
    max-width: 400px;
    padding: 20px;
    backdrop-filter: blur(999px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    background: #c2e59c; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.login-header {
    font-size: medium !important;
}

.login-inputs {
    background-color: transparent;
    border: 1px solid var(--mainBlack)
}

.login-inputs:focus {
    background-color: transparent;
}

.RegisterOfLogin-Footer {
    font-size: small
}
/* end login */

/* Register Form */
.RegisterForm {
    border: 1px solid #ccc;
    border-radius: 15px;
    overflow: hidden;
    margin: 10px;
}

.RegisterFormMain {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.RegisterFormMain input {
    background: rgba(255,255,255,0.7);
}

.RegisterFormSide {
    background: #34e89e;
    background: -webkit-linear-gradient(to right, #0f3443, #34e89e);
    background: linear-gradient(to right, #0f3443, #34e89e);
    display: flex;
    align-items: center;
    justify-content: center;
}

.RegisterFormSide-Content {
    background: rgba(255,255,255,0.3);
    display: inline-block;
    border-radius: 10px;
    padding: 10px;
}
/* end Register Form */

/* Management Styles */
.Console-Details {
    background: #00d2ff; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3a7bd5, #00d2ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0 8px 16px rgba(0, 123, 255, 0.3);
    height: 100px;
    transition: ease-in 0.3s;
}

.Console-Details:hover, .Console-Details:focus {
    transform: translateY(-5px);
}
/* End Management Styles */



/*Test*/
.room-link {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    text-decoration: none;
    color: inherit;
    border-top: 0;
    transition: .25s;
}

.room-item + .room-item .room-link {
    border-top: 1px solid #f1f3f5;
}

    .room-link:hover {
        background: #f8f9fa;
        padding-right: 32px;
    }

.room-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg,#0d6efd,#6ea8fe);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin-left: 16px;
    flex-shrink: 0;
}

.room-avatar-image {
    display: block;
    object-fit: cover;
}

.profile-image-preview,
.profile-image-placeholder {
    width: 92px;
    height: 92px;
    border: 3px solid #e9ecef;
    border-radius: 50%;
}

.profile-image-preview {
    display: inline-block;
    object-fit: cover;
}

.profile-image-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0d6efd, #6ea8fe);
    font-size: 2.5rem;
}

.room-title {
    font-size: 1.05rem;
}

.room-arrow {
    color: #adb5bd;
    font-size: 20px;
    transition: .25s;
}

.room-link:hover .room-arrow {
    color: #0d6efd;
    transform: translateX(-6px);
}

.room-item {
    position: relative;
}

.room-item .room-link {
    padding-left: 5rem;
}

.room-item-actions {
    position: absolute;
    top: 50%;
    left: .75rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    transform: translateY(-50%);
}

.room-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.room-leave-button {
    width: 2rem;
    height: 2rem;
}

/* Mobile-first home dashboard */
.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 3.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 .2rem 1rem rgba(15, 23, 42, .04);
    backdrop-filter: blur(14px);
}
.app-navbar-inner { min-height: 3.5rem; }
.app-brand { display: inline-flex; align-items: center; gap: .65rem; margin: 0; color: #172033; font-size: 1rem; font-weight: 800; }
.app-brand:hover { color: #172033; }
.app-brand small { display: block; margin-top: -.1rem; color: #94a3b8; font-size: .61rem; font-weight: 600; }
.app-brand-mark { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; color: #fff; border-radius: .7rem; background: linear-gradient(135deg, #2563eb, #4f46e5); box-shadow: 0 .35rem .8rem rgba(37, 99, 235, .22); }
.app-navbar-actions { display: flex; align-items: center; gap: .4rem; margin-right: auto; }
.app-account-action, .app-login-action, .app-theme-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.1rem; padding: .35rem .65rem; color: #334155; text-decoration: none; border: 0; border-radius: .7rem; background: #f1f5f9; font-size: .78rem; font-weight: 700; }
.app-theme-toggle { justify-content: center; width: 2.1rem; padding: .35rem; }
.app-account-action:hover, .app-login-action:hover, .app-theme-toggle:hover { color: #1d4ed8; background: #eff6ff; }
.app-theme-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .22); }
.app-navbar-toggle { display: grid; width: 2.1rem; height: 2.1rem; padding: 0; place-items: center; color: #334155; border: 0; border-radius: .7rem; background: #f1f5f9; font-size: 1.2rem; }
.app-navbar-toggle:focus { box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .16); }
.app-navbar-collapse { flex-grow: 0; }
.app-navbar-menu { gap: .15rem; padding: .65rem 0; }
.app-navbar-menu .nav-link { display: flex; align-items: center; gap: .65rem; padding: .7rem .75rem; color: #475569; border-radius: .75rem; font-size: .88rem; font-weight: 700; }
.app-navbar-menu .nav-link:hover { color: #1d4ed8; background: #eff6ff; }
.app-navbar-menu .nav-link i { width: 1.1rem; color: #2563eb; text-align: center; }
.app-navbar-mobile-only { display: block; }

@media (min-width: 992px) {
    .app-navbar-collapse { display: flex !important; margin-right: 1.3rem; }
    .app-navbar-menu { flex-direction: row; align-items: center; padding: 0; }
    .app-navbar-menu .nav-link { padding: .5rem .65rem; }
    .app-navbar-mobile-only { display: none; }
    .app-navbar-toggle { display: none; }
}

.home-app {
    width: min(100%, 46rem);
    margin: 1.25rem auto 2rem;
}

.home-welcome {
    position: relative;
    overflow: hidden;
    padding: 1.6rem;
    border-radius: 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow: 0 .8rem 2rem rgba(37, 99, 235, .2);
}

.home-welcome::after {
    position: absolute;
    left: -2.5rem;
    bottom: -3rem;
    width: 9rem;
    height: 9rem;
    border: 1.25rem solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    content: "";
}

.home-brand-mark {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.1rem;
    place-items: center;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .16);
    font-size: 1.35rem;
}

.home-eyebrow { margin: 0 0 .25rem; color: rgba(255, 255, 255, .72); font-size: .78rem; font-weight: 700; letter-spacing: .05em; }
.home-welcome h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(1.35rem, 5vw, 1.8rem); font-weight: 800; }
.home-welcome > p:not(.home-eyebrow) { position: relative; z-index: 1; max-width: 30rem; margin: .55rem 0 1.25rem; color: rgba(255, 255, 255, .82); font-size: .9rem; line-height: 1.8; }
.home-welcome-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .55rem; }
.home-welcome-actions .btn { min-height: 2.65rem; padding: .55rem 1rem; border: 0; border-radius: .8rem; font-weight: 700; }
.home-welcome-actions .btn-primary { color: #1d4ed8; background: #fff; }
.home-welcome-actions .btn-light { color: #fff; background: rgba(255, 255, 255, .14); }

.home-notices:empty { display: none; }
.home-notices .alert { margin: 1rem 0 0; border: 0; border-radius: 1rem; box-shadow: none; }
.home-rooms { margin-top: 1rem; }
.home-app .card { overflow: hidden; margin-bottom: 0; border: 1px solid #e8edf5 !important; border-radius: 1.25rem !important; box-shadow: 0 .4rem 1.4rem rgba(15, 23, 42, .05) !important; }
.home-app .card-body > .px-3 { padding: 1.2rem 1.25rem !important; }
.home-app .card h4 { color: #172033; font-size: 1rem; }
.home-app .room-link { padding: .9rem 1.25rem; }
.home-app .room-link:hover { padding-right: 1.25rem; background: #f8fafc; }
.home-app .room-avatar { width: 2.7rem; height: 2.7rem; margin-left: .8rem; font-size: 1rem; }
.home-app .room-item .room-link { padding-left: 4.8rem; }
.home-app .room-item-actions { left: .7rem; }
.home-app .room-title { font-size: .95rem; }
.home-app .room-unique-id { display: block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-app .my-chatrooms-actions .btn { display: grid; width: 2.35rem; height: 2.35rem; padding: 0; place-items: center; border-radius: .75rem; }

.home-support {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    color: #334155;
    text-decoration: none;
    border: 1px solid #e8edf5;
    border-radius: 1.1rem;
    background: #fff;
}
.home-support:hover { color: #1d4ed8; background: #f8fafc; }
.home-support-icon { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 2.4rem; place-items: center; color: #2563eb; border-radius: .75rem; background: #eff6ff; }
.home-support strong, .home-support small { display: block; }
.home-support strong { font-size: .9rem; }
.home-support small { margin-top: .15rem; color: #64748b; font-size: .75rem; }
.home-support > .bi-chevron-left { margin-right: auto; color: #94a3b8; }

/* Dark theme for the redesigned dashboard and room-management dialogs. */
[data-bs-theme="dark"] body { color: #e2e8f0; background: #0f172a; }
[data-bs-theme="dark"] .preloader { color: #e2e8f0; background: #0f172a; }
[data-bs-theme="dark"] .app-navbar { border-bottom-color: rgba(71, 85, 105, .7); background: rgba(15, 23, 42, .9); box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .18); }
[data-bs-theme="dark"] .app-brand, [data-bs-theme="dark"] .app-brand:hover { color: #f8fafc; }
[data-bs-theme="dark"] .app-brand small { color: #94a3b8; }
[data-bs-theme="dark"] .app-account-action, [data-bs-theme="dark"] .app-login-action, [data-bs-theme="dark"] .app-theme-toggle, [data-bs-theme="dark"] .app-navbar-toggle { color: #cbd5e1; background: #1e293b; }
[data-bs-theme="dark"] .app-account-action:hover, [data-bs-theme="dark"] .app-login-action:hover, [data-bs-theme="dark"] .app-theme-toggle:hover, [data-bs-theme="dark"] .app-navbar-toggle:hover { color: #bfdbfe; background: #26364d; }
[data-bs-theme="dark"] .app-navbar-menu .nav-link { color: #cbd5e1; }
[data-bs-theme="dark"] .app-navbar-menu .nav-link:hover { color: #bfdbfe; background: #1e3a5f; }
[data-bs-theme="dark"] .home-welcome { background: linear-gradient(135deg, #1d4ed8, #3730a3); box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .3); }
[data-bs-theme="dark"] .home-app .card, [data-bs-theme="dark"] .home-support { color: #e2e8f0; border-color: #334155 !important; background: #172033; box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .18) !important; }
[data-bs-theme="dark"] .home-app .card h4, [data-bs-theme="dark"] .home-support { color: #f8fafc; }
[data-bs-theme="dark"] .home-app .room-link:hover, [data-bs-theme="dark"] .home-support:hover { color: #bfdbfe; background: #1e293b; }
[data-bs-theme="dark"] .home-support-icon { color: #93c5fd; background: #1e3a5f; }
[data-bs-theme="dark"] .home-support small, [data-bs-theme="dark"] .home-app .text-muted { color: #94a3b8 !important; }
[data-bs-theme="dark"] .home-app hr { border-color: #334155; opacity: 1; }
[data-bs-theme="dark"] .home-app .room-avatar { border-color: #334155; }
[data-bs-theme="dark"] .home-app .room-item + .room-item .room-link { border-top-color: #334155; }
[data-bs-theme="dark"] .home-app .btn-outline-dark { color: #cbd5e1; border-color: #64748b; }
[data-bs-theme="dark"] .home-app .btn-outline-dark:hover { color: #fff; border-color: #94a3b8; background: #475569; }
[data-bs-theme="dark"] .home-notices .alert-danger { color: #fecaca; border: 1px solid #7f1d1d; background: #450a0a; }
[data-bs-theme="dark"] .modal-content { color: #e2e8f0; background: #172033; }
[data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: #334155; }
[data-bs-theme="dark"] .modal .form-control { color: #e2e8f0; border-color: #475569; background: #0f172a; }
[data-bs-theme="dark"] .modal .form-control:focus { border-color: #60a5fa; box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .2); }
[data-bs-theme="dark"] .modal .form-text, [data-bs-theme="dark"] .modal .text-muted { color: #94a3b8 !important; }
[data-bs-theme="dark"] .modal .btn-light { color: #e2e8f0; background: #334155; border-color: #334155; }
[data-bs-theme="dark"] .room-picture-field { border-color: #334155; background: #1e293b; }
[data-bs-theme="dark"] .room-picture-field .form-label { color: #e2e8f0; }
[data-bs-theme="dark"] .room-picture-field input[type="file"] { color: #cbd5e1; border-color: #475569; background: #0f172a; }
[data-bs-theme="dark"] .room-picture-field input[type="file"]::file-selector-button { color: #bfdbfe; background: #1e3a5f; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Remaining public pages: Rules and Contact Us. */
[data-bs-theme="dark"] .rules-notice { color: #bfdbfe; border-color: #1e40af; background: #172554; }
[data-bs-theme="dark"] .rules-card { border-color: #334155; background: #172033; box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .18); }
[data-bs-theme="dark"] .rules-number { color: #bfdbfe; background: #1e3a5f; }
[data-bs-theme="dark"] .rules-card h2 { color: #f1f5f9; }
[data-bs-theme="dark"] .rules-card ul { color: #cbd5e1; }
[data-bs-theme="dark"] .rules-card li::marker { color: #60a5fa; }
[data-bs-theme="dark"] .rules-closing { color: #cbd5e1; background: #1e293b; }

[data-bs-theme="dark"] .contact-card { color: #e2e8f0; background: #172033; box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .24) !important; }
[data-bs-theme="dark"] .contact-card .card-header { color: #f8fafc; border-bottom-color: #334155; background: #1e293b !important; }
[data-bs-theme="dark"] .contact-card .form-control { color: #e2e8f0; border-color: #475569; background: #0f172a; }
[data-bs-theme="dark"] .contact-card .form-control:focus { color: #f8fafc; border-color: #60a5fa; box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .2); }
[data-bs-theme="dark"] .contact-card .form-control::placeholder { color: #94a3b8; }
[data-bs-theme="dark"] .contact-card .btn-outline-secondary { color: #cbd5e1; border-color: #64748b; }
[data-bs-theme="dark"] .contact-card .btn-outline-secondary:hover { color: #fff; background: #475569; }
[data-bs-theme="dark"] .contact-card .alert-success { color: #bbf7d0; border-color: #166534; background: #052e16; }
[data-bs-theme="dark"] .contact-card .alert-danger { color: #fecaca; border-color: #991b1b; background: #450a0a; }

/* Profile editor. */
[data-bs-theme="dark"] .profile-card { color: #e2e8f0; background: #172033; box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .24) !important; }
[data-bs-theme="dark"] .profile-card .card-header { color: #f8fafc; border-bottom-color: #334155; background: #1e293b !important; }
[data-bs-theme="dark"] .profile-card .form-control { color: #e2e8f0; border-color: #475569; background: #0f172a; }
[data-bs-theme="dark"] .profile-card .form-control:focus { color: #f8fafc; border-color: #60a5fa; box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .2); }
[data-bs-theme="dark"] .profile-card .form-control::placeholder { color: #94a3b8; }
[data-bs-theme="dark"] .profile-card .form-text { color: #94a3b8; }
[data-bs-theme="dark"] .profile-card input[type="file"] { color: #cbd5e1; }
[data-bs-theme="dark"] .profile-card input[type="file"]::file-selector-button { color: #bfdbfe; background: #1e3a5f; }
[data-bs-theme="dark"] .profile-card .profile-image-preview,
[data-bs-theme="dark"] .profile-card .profile-image-placeholder { border-color: #475569; }
[data-bs-theme="dark"] .profile-card .btn-outline-secondary { color: #cbd5e1; border-color: #64748b; }
[data-bs-theme="dark"] .profile-card .btn-outline-secondary:hover { color: #fff; background: #475569; }
[data-bs-theme="dark"] .profile-card .alert-success { color: #bbf7d0; border-color: #166534; background: #052e16; }

/* Rules page */
.rules-app { width: min(100%, 46rem); margin: 1.25rem auto 2rem; }
.rules-hero { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; color: #fff; border-radius: 1.3rem; background: linear-gradient(135deg, #1d4ed8, #4f46e5); box-shadow: 0 .75rem 1.8rem rgba(37, 99, 235, .2); }
.rules-hero-icon { display: grid; flex: 0 0 auto; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: .9rem; background: rgba(255,255,255,.15); font-size: 1.35rem; }
.rules-eyebrow { margin: 0 0 .2rem; color: rgba(255,255,255,.72); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rules-hero h1 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.rules-hero p:not(.rules-eyebrow) { margin: .5rem 0 0; color: rgba(255,255,255,.86); font-size: .86rem; line-height: 1.8; }
.rules-notice { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; padding: .85rem 1rem; color: #1e40af; border: 1px solid #bfdbfe; border-radius: 1rem; background: #eff6ff; font-size: .84rem; font-weight: 700; }
.rules-notice i { font-size: 1.05rem; }
.rules-list { display: grid; gap: .8rem; }
.rules-card { display: flex; align-items: flex-start; gap: .85rem; padding: 1.1rem; border: 1px solid #e8edf5; border-radius: 1.1rem; background: #fff; box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .045); }
.rules-number { display: grid; flex: 0 0 auto; width: 2rem; height: 2rem; place-items: center; color: #1d4ed8; border-radius: .65rem; background: #eff6ff; font-size: .85rem; font-weight: 800; }
.rules-card > div { min-width: 0; }
.rules-card h2 { margin: .12rem 0 .55rem; color: #1e293b; font-size: .98rem; font-weight: 800; }
.rules-card ul { margin: 0; padding-right: 1.05rem; color: #64748b; font-size: .84rem; line-height: 1.95; }
.rules-card li + li { margin-top: .22rem; }
.rules-card li::marker { color: #60a5fa; }
.rules-closing { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1rem; padding: 1rem; color: #475569; border-radius: 1rem; background: #f8fafc; font-size: .85rem; font-weight: 700; text-align: center; }
.rules-closing i { color: #ef4444; }

@media (min-width: 768px) {
    .home-app { margin-top: 2rem; }
    .home-welcome { padding: 2rem; }
    .rules-app { margin-top: 2rem; }
    .rules-hero { padding: 2rem; }
}

/* My chatrooms controls and modals */
.my-chatrooms-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .375rem;
}

.my-chatrooms-modal {
    width: min(100% - 2rem, 32rem);
    max-width: none;
    margin: 1rem auto;
}

/* Keep the dialog above its backdrop even when a parent component has stacking styles. */
.my-chatrooms-modal-root {
    z-index: 1060;
}

.my-chatrooms-modal-root.show .my-chatrooms-modal {
    transform: none;
}

/* Bootstrap's scrollbar compensation is incorrect for this RTL layout and shifts the page. */
body.modal-open {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.my-chatrooms-modal .modal-content {
    max-height: calc(100dvh - 2rem);
}

.my-chatrooms-modal .modal-header,
.my-chatrooms-modal .modal-footer {
    padding: 1rem 1.25rem;
}

.my-chatrooms-modal .modal-body {
    padding: 1.25rem;
    overflow-wrap: anywhere;
}

.my-chatrooms-modal .form-control {
    min-height: 2.75rem;
}

.my-chatrooms-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.my-chatrooms-modal-footer .btn {
    flex: 1 1 8rem;
    min-height: 2.75rem;
}

#createRoomModal .modal-body { padding-bottom: 1rem; }
.room-picture-field { margin-top: 1rem; padding: .8rem; border: 1px solid #dbeafe; border-radius: .85rem; background: #f8fbff; }
.room-picture-field .form-label { display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; color: #334155; font-size: .86rem; font-weight: 700; }
.room-picture-field .form-label i { color: #2563eb; font-size: 1rem; }
.room-picture-field .form-label span { color: #94a3b8; font-size: .75rem; font-weight: 500; }
.room-picture-field input[type="file"] { min-height: 2.45rem; padding: .28rem; color: #64748b; border-color: #cbd5e1; background: #fff; font-size: .78rem; }
.room-picture-field input[type="file"]::file-selector-button { height: 2.45rem; margin: -.28rem -.28rem -.28rem .55rem; padding: 0 .7rem; color: #1d4ed8; border: 0; border-radius: .5rem; background: #dbeafe; font-weight: 700; line-height: 1; vertical-align: middle; cursor: pointer; }
.room-picture-field .form-text { margin: .45rem 0 0; color: #64748b; font-size: .72rem; }

@media (max-width: 575.98px) {
    .room-unique-id {
        font-size: .62rem;
    }

    .my-chatrooms-modal {
        width: calc(100% - 1rem);
        height: auto;
        margin: .5rem auto;
    }

    .my-chatrooms-modal .modal-content {
        max-height: calc(100dvh - 1rem);
        border-radius: 1rem !important;
    }

    .my-chatrooms-modal .modal-header,
    .my-chatrooms-modal .modal-footer {
        padding: .875rem 1rem;
    }

    .my-chatrooms-modal .modal-body {
        padding: 1rem;
    }
}

@media (max-width: 380px) {
    .my-chatrooms-modal-footer .btn {
        flex-basis: 100%;
    }
}

/* Chat room redesign: preserve the existing IDs because ChatRoom-v1.0.2.js owns the behaviour. */
.ChatroomBody {
    min-height: 100dvh;
    height: var(--chat-viewport-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
    background: radial-gradient(circle at top right, #1d4ed8 0, transparent 30%), linear-gradient(135deg, #0f172a 0%, #172554 46%, #0f766e 100%);
}

.ChatroomBody.has-room-background {
    background-image: linear-gradient(rgba(15, 23, 42, .48), rgba(15, 23, 42, .6)), var(--room-background-url);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.ChatroomBody.has-room-background .chat-shell #messagesList {
    background-image: linear-gradient(rgba(248, 250, 252, .48), rgba(241, 245, 249, .58)), var(--room-background-url);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.chat-shell.full-width-container {
    width: min(1120px, calc(100% - 2rem));
    height: calc(var(--chat-viewport-height, 100dvh) - 2rem);
    min-height: 560px;
    margin: 1rem auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 1.35rem;
    background: #edf3f6;
    box-shadow: 0 1.5rem 4rem rgba(2, 6, 23, .34);
}

.chat-header#ChatroomHeader {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 68px;
    height: auto;
    padding: .8rem 1.25rem;
    color: #eff6ff;
    text-align: initial;
    border: 0;
    background: linear-gradient(120deg, #0f172a, #172554 58%, #0f766e);
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .16);
}

.chat-header-action.ChatroomReturnButton {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .85rem;
    background: rgba(255,255,255,.1);
    transition: .2s ease;
}

.chat-header-action.room-edit-action {
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    margin-right: auto;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .8rem;
    background: rgba(255,255,255,.1);
    transition: .2s ease;
}

.chat-header-action.room-edit-action:hover {
    color: #fff;
    background: rgba(255,255,255,.2);
    transform: rotate(16deg);
}

.chat-header-action:hover {
    color: #fff;
    background: rgba(255,255,255,.2);
    transform: translateX(.15rem);
}

.chat-room-identity {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: .75rem;
}

.chat-room-avatar {
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 .3rem .75rem rgba(2,6,23,.22);
}

.chat-room-avatar-placeholder {
    display: grid;
    place-items: center;
    color: #0f172a;
    font-weight: 800;
    background: linear-gradient(135deg, #fef3c7, #67e8f9);
}

.chat-room-details {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-room-name#roomName {
    display: inline-flex;
    align-items: center;
    max-width: 25rem;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-room-name#roomName:hover,
.chat-room-name#roomName:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.room-details-dialog { max-width: 34rem; }

.room-details-modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 1.35rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .25);
}

.room-details-modal-header {
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    color: #fff;
    border: 0;
    background: linear-gradient(125deg, #0f3c78 0%, #2563eb 58%, #38bdf8 140%);
}

.room-details-header-title,
.room-details-summary,
.room-details-meta,
.room-members-section-header,
.room-online-user {
    display: flex;
    align-items: center;
}

.room-details-header-title { gap: .75rem; }

.room-details-header-icon {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: .8rem;
    background: rgba(255,255,255,.14);
    font-size: 1.15rem;
}

.room-details-eyebrow {
    display: block;
    margin-bottom: .12rem;
    color: var(--bs-secondary-color);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .025em;
}

.room-details-modal-header .room-details-eyebrow { color: rgba(255,255,255,.72); }
.room-details-modal-header .modal-title { font-size: 1rem; font-weight: 800; }

.room-details-header-actions { display: flex; gap: .45rem; }

.room-details-close,
.room-details-edit {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: .65rem;
    background: rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 .25rem .7rem rgba(2,6,23,.16);
    backdrop-filter: blur(10px);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.room-details-close:hover { border-color: rgba(255,255,255,.6); background-color: rgba(255,255,255,.25); transform: rotate(90deg); }
.room-details-edit:hover { border-color: rgba(255,255,255,.6); background-color: rgba(255,255,255,.25); }
.room-details-close:focus-visible,
.room-details-edit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.room-details-modal-body { padding: 1.15rem 1.25rem 1.25rem; }

.room-details-hero {
    position: relative;
    overflow: hidden;
    padding: 1.1rem;
    border: 1px solid #dbeafe;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #f8fbff 0%, #eff6ff 100%);
}

.room-details-hero::after {
    position: absolute;
    top: -2.8rem;
    left: -1.8rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: rgba(59,130,246,.08);
    content: "";
}

.room-details-summary { position: relative; z-index: 1; gap: .9rem; min-width: 0; }
.room-details-summary > :last-child { min-width: 0; }

.room-details-avatar {
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 auto;
    border: 3px solid #fff;
    border-radius: 1.15rem;
    object-fit: cover;
    box-shadow: 0 .55rem 1.25rem rgba(30, 64, 175, .2);
}

.room-details-room-name { margin: 0 0 .45rem; color: var(--bs-emphasis-color); font-size: 1.08rem; font-weight: 800; }

.room-privacy-badge,
.room-members-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.room-privacy-badge { padding: .36rem .62rem; }
.room-privacy-badge.is-public { color: #087443; background: #dcfce7; }
.room-privacy-badge.is-private { color: #6d3b07; background: #fef3c7; }

.room-details-meta { position: relative; z-index: 1; gap: .4rem; margin-top: .9rem; color: #64748b; font-size: .78rem; }
.room-details-meta i { color: #2563eb; }
.room-details-meta strong { color: var(--bs-emphasis-color); font-weight: 700; }

.room-members-section { margin-top: 1.35rem; }
.room-members-section-header { justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.room-members-section-header h6 { margin: 0; color: var(--bs-emphasis-color); font-size: .95rem; font-weight: 800; }
.room-members-section-header h6 i { margin-left: .35rem; color: #2563eb; }
.room-members-count { min-width: 2rem; justify-content: center; padding: .35rem .6rem; color: #fff; background: #2563eb; box-shadow: 0 .3rem .7rem rgba(37,99,235,.22); }

.room-online-users {
    display: grid;
    max-height: min(39vh, 18rem);
    gap: .55rem;
    padding: .1rem .1rem .25rem;
    overflow-y: auto;
    border: 0;
    background: transparent;
    scrollbar-width: thin;
}

.room-online-user {
    position: relative;
    gap: .7rem;
    min-width: 0;
    padding: .72rem .8rem;
    color: var(--bs-emphasis-color);
    border: 1px solid var(--bs-border-color) !important;
    border-radius: .85rem !important;
    background: var(--bs-body-bg);
    font-size: .875rem;
    font-weight: 700;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.room-online-user::before {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .65rem;
    color: #2563eb;
    background: #dbeafe;
    font-family: "bootstrap-icons";
    font-size: 1rem;
    content: "\f4da";
}

.room-online-user:hover { border-color: #93c5fd !important; box-shadow: 0 .45rem 1rem rgba(30,64,175,.1); transform: translateY(-.1rem); }

.room-online-user-status {
    position: absolute;
    right: 2rem;
    bottom: .55rem;
    width: .58rem;
    height: .58rem;
    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 .16rem rgba(34,197,94,.16);
}

.room-online-users .text-muted.text-center {
    display: grid;
    min-height: 8.5rem;
    place-items: center;
    padding: 1rem;
    border: 1px dashed var(--bs-border-color) !important;
    border-radius: .9rem !important;
    background: var(--bs-tertiary-bg);
    font-size: .84rem;
}

.room-online-users .text-muted.text-center::before { display: block; margin-bottom: .45rem; color: #94a3b8; font-family: "bootstrap-icons"; font-size: 1.75rem; content: "\f4d0"; }

[data-bs-theme="dark"] .room-details-modal-content { box-shadow: 0 1.5rem 4rem rgba(0,0,0,.5); }
[data-bs-theme="dark"] .room-details-hero { border-color: #24416c; background: linear-gradient(135deg, #15243a, #101d30); }
[data-bs-theme="dark"] .room-details-hero::after { background: rgba(96,165,250,.09); }
[data-bs-theme="dark"] .room-details-avatar { border-color: #1e293b; }
[data-bs-theme="dark"] .room-privacy-badge.is-public { color: #86efac; background: rgba(22,163,74,.18); }
[data-bs-theme="dark"] .room-privacy-badge.is-private { color: #fcd34d; background: rgba(217,119,6,.18); }
[data-bs-theme="dark"] .room-details-meta { color: #94a3b8; }
[data-bs-theme="dark"] .room-online-user::before { color: #93c5fd; background: #1e3a5f; }
[data-bs-theme="dark"] .room-online-user:hover { border-color: #3b82f6 !important; box-shadow: 0 .45rem 1rem rgba(0,0,0,.3); }

@media (max-width: 575.98px) {
    .room-details-dialog { margin: .75rem; }
    .room-details-modal-header, .room-details-modal-body { padding-right: 1rem; padding-left: 1rem; }
    .room-details-hero { padding: .9rem; }
    .room-details-avatar { width: 4rem; height: 4rem; }
    .room-online-users { max-height: min(42vh, 16rem); }
}

.chat-room-caption {
    color: #bfdbfe;
    font-size: .72rem;
}

.chat-room-caption i {
    margin-left: .25rem;
}

.chat-members-menu {
    min-width: 14rem;
    max-height: 16rem;
    overflow-y: auto;
    border: 0;
    border-radius: .9rem;
    box-shadow: 0 .8rem 2rem rgba(15,23,42,.2);
}

.chat-room-presence {
    position: relative;
    height: 1.05rem;
    margin-top: .08rem;
    overflow: visible;
}

.chat-room-caption,
.chat-live-status {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transition: opacity .16s ease;
    white-space: nowrap;
}

.chat-live-status {
    min-width: 0;
    color: #dbeafe;
    font-size: .72rem;
    text-align: right;
    pointer-events: none;
}

#typingIndicator,
#recordingIndicator {
    display: none;
    min-height: 0;
    padding: 0;
    margin: 0;
}

#typingIndicator:not(:empty),
#recordingIndicator:not(:empty) { display: block; }

.chat-room-presence:has(#typingIndicator:not(:empty)) .chat-room-caption,
.chat-room-presence:has(#recordingIndicator:not(:empty)) .chat-room-caption { opacity: 0; }

#typingIndicator { color: #bfdbfe; }
#recordingIndicator { color: #fda4af; }

.chat-shell .date-divider {
    top: 76px;
    z-index: 8;
    pointer-events: none;
}

.chat-shell #currentDate,
.chat-shell .date-separator-badge {
    padding: .28rem .8rem;
    color: #475569;
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 .25rem .75rem rgba(15,23,42,.08);
    backdrop-filter: blur(8px);
}

.chat-shell #messagesList {
    display: block;
    height: 0;
    flex: 1 1 auto;
    padding: .65rem clamp(.45rem, 1.8vw, 1.25rem) 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #e8f1f4;
    background-image: radial-gradient(circle at 10% 15%, rgba(125, 211, 252, .32), transparent 24rem), radial-gradient(circle at 88% 86%, rgba(110, 231, 183, .23), transparent 22rem), radial-gradient(rgba(100, 116, 139, .16) .7px, transparent .7px), linear-gradient(135deg, #f8fafc, #e7f2f1);
    background-size: auto, auto, 16px 16px, auto;
    scrollbar-color: #94a3b8 transparent;
    scrollbar-width: thin;
}

.chat-shell .message-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem;
    color: #1e3a8a;
    border: 1px solid rgba(147, 197, 253, .7);
    border-radius: 50%;
    background: rgba(239, 246, 255, .92);
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .15);
    transform: translate(-50%, -50%);
    pointer-events: none;
    backdrop-filter: blur(8px);
}
.chat-shell .message-loading-indicator .spinner-border { width: 2rem; height: 2rem; border-width: .22rem; }
.chat-shell .message-loading-indicator.d-none { display: none; }

.chat-shell #messagesList::-webkit-scrollbar { width: .5rem; }
.chat-shell #messagesList::-webkit-scrollbar-thumb { border-radius: 1rem; background: #94a3b8; }

.chat-shell #messagesList > .list-group-item {
    padding: .18rem 0;
    background: transparent !important;
    border: 0 !important;
}

.chat-shell .chat-message-row {
    display: flex;
    align-items: flex-end;
    gap: .45rem;
}

.chat-shell .my-message .chat-message-row {
    direction: rtl;
    justify-content: flex-start;
}

.chat-shell .their-message .chat-message-row {
    direction: ltr;
    justify-content: flex-start;
}

.chat-shell .message-sender-avatar {
    position: relative;
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    margin-bottom: .2rem;
    overflow: hidden;
    place-items: center;
    color: #334155;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
    box-shadow: 0 .2rem .55rem rgba(15,23,42,.14);
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.chat-shell .message-sender-avatar-hidden {
    visibility: hidden;
    pointer-events: none;
}

.image-preview-trigger { cursor: zoom-in; }
.image-preview-trigger:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.image-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    padding: 2rem;
    place-items: center;
    background: rgba(2, 6, 23, .92);
}
.image-preview-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.45); }
.image-preview-close { position: absolute; top: 1rem; left: 1rem; width: 2.75rem; height: 2.75rem; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(15,23,42,.6); font-size: 1.2rem; }

/* Message images stay private until the recipient explicitly downloads them. */
.chat-shell .image-placeholder { width: min(16rem, 100%); }
.chat-shell .image-download-card {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 9.5rem;
    padding: 1rem;
    overflow: hidden;
    place-content: center;
    gap: .55rem;
    color: #fff;
    border: 0;
    border-radius: .8rem;
    background: linear-gradient(135deg, #64748b, #334155 48%, #0f766e);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 .35rem .9rem rgba(15,23,42,.18);
    cursor: pointer;
    isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease;
}
.chat-shell .image-download-card::before {
    position: absolute;
    inset: -2rem;
    z-index: -1;
    content: "";
    background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.6), transparent 28%), radial-gradient(circle at 80% 75%, #0ea5e9, transparent 42%), linear-gradient(120deg, #475569, #1e3a8a, #0f766e);
    filter: blur(18px);
    transform: scale(1.12);
}
.chat-shell .image-download-card:hover:not(:disabled),
.chat-shell .image-download-card:focus-visible { outline: 0; transform: scale(1.015); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 .55rem 1.2rem rgba(15,23,42,.28); }
.chat-shell .image-download-card-icon { display: grid; width: 3.15rem; height: 3.15rem; margin: 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(7px); font-size: 1.35rem; }
.chat-shell .image-download-spinner { display: none; width: 2.3rem; height: 2.3rem; margin: .4rem auto; border-width: .22rem; }
.chat-shell .image-download-card.is-loading { cursor: wait; }
.chat-shell .image-download-card.is-loading .image-download-card-icon { display: none; }
.chat-shell .image-download-card.is-loading .image-download-spinner { display: block; }
.chat-shell .image-download-card.is-error .image-download-card-icon { color: #fecaca; }
.chat-shell .image-container { line-height: 0; }
.chat-shell .chat-img { display: block; width: 100%; max-width: 16rem; max-height: 22rem; border: 0; border-radius: .8rem; box-shadow: 0 .35rem 1rem rgba(15,23,42,.2); cursor: zoom-in; object-fit: cover; }

.chat-shell .message-sender-avatar:hover,
.chat-shell .message-sender-avatar:focus-visible {
    outline: 0;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 .4rem .85rem rgba(15,23,42,.2);
}

.chat-shell .message-sender-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-shell .date-separator {
    padding: .7rem 0 .4rem;
    list-style: none;
}

.chat-shell #messagesList > .date-separator:first-child {
    padding-top: 0;
    margin-top: 0 !important;
}

.chat-shell .message-bubble {
    max-width: min(76%, 34rem);
    padding: .65rem .85rem .5rem;
    margin: .18rem 0;
    border: 1px solid transparent;
    border-radius: 1.05rem;
    box-shadow: 0 .3rem .85rem rgba(15,23,42,.09);
}

/* Percentage-sized media must not make its flex-item bubble expand to the
   chat's maximum width. Keep each attachment bubble fitted to its player. */
.chat-shell .message-bubble:has(.video-player) { width: min(calc(18rem + 1.7rem), calc(100vw - 3.5rem)); }
.chat-shell .message-bubble:has(.audio-player) { width: min(calc(17rem + 1.7rem), calc(100vw - 3.5rem)); }
.chat-shell .message-bubble:has(.image-placeholder) { width: min(calc(15rem + 1.7rem), calc(100vw - 3.5rem)); }
.chat-shell .message-bubble:has(.file-message) { width: min(calc(15.5rem + 1.7rem), calc(100vw - 3.5rem)); }

.chat-shell .my-message .message-bubble {
    color: #16351f;
    border-color: #a7d7b0;
    border-bottom-right-radius: .28rem;
    background: linear-gradient(135deg, #e6f8e9, #ccefd3);
}

.chat-shell .their-message .message-bubble {
    color: #1e293b;
    border-color: rgba(148,163,184,.22);
    border-bottom-left-radius: .28rem;
    background: rgba(255,255,255,.96);
}

.chat-shell .message-header,
.chat-shell .their-message .message-header {
    margin-bottom: .28rem;
    color: inherit;
    font-size: .73rem;
    text-align: inherit;
    opacity: .8;
}

.chat-shell .message-text {
    overflow: visible;
    font-size: .92rem;
    line-height: 1.8;
    text-align: inherit;
}

.chat-shell .their-message .message-text {
    direction: rtl;
    text-align: right;
}

.chat-shell .their-message .message-header {
    direction: rtl;
    text-align: right;
}

.chat-shell .their-message .message-footer,
.chat-shell .their-message .message-edited {
    direction: rtl;
    text-align: right;
}

.chat-shell .their-message .message-footer {
    display: inline-block;
    width: auto;
    float: right;
}

.chat-shell .message-footer,
.chat-shell .their-message .message-footer,
.chat-shell .message-edited,
.chat-shell .their-message .message-edited {
    display: inline-block;
    margin-top: .18rem;
    color: inherit;
    font-size: .67rem;
    text-align: inherit;
    opacity: .72;
}

.chat-shell .my-message .text-muted { color: #4d7255 !important; }

.chat-shell .reply-preview {
    margin-bottom: .5rem;
    padding: .45rem .6rem .45rem .75rem;
    color: inherit;
    border-radius: .65rem;
    background: rgba(15,23,42,.09);
    cursor: pointer;
}

.chat-shell .reply-preview .text-dark { color: inherit !important; font-weight: 700; }
.chat-shell .reply-preview-side { right: 0; left: auto; width: .22rem; background: currentColor; opacity: .55; }
.chat-shell .their-message .reply-preview { direction: rtl; text-align: right; }

@keyframes reply-target-flash {
    0%, 100% { box-shadow: 0 .3rem .85rem rgba(15,23,42,.09); transform: scale(1); }
    20%, 60% { box-shadow: 0 0 0 .28rem rgba(250, 204, 21, .95), 0 .65rem 1.4rem rgba(250, 204, 21, .38); transform: scale(1.012); }
    40%, 80% { box-shadow: 0 .3rem .85rem rgba(15,23,42,.09); transform: scale(1); }
}

.chat-shell .message-bubble.reply-target-highlight { animation: reply-target-flash 3.2s ease-in-out; }

.chat-shell .message-actions {
    display: flex;
    flex-direction: column;
    gap: .22rem;
    align-items: center;
    padding: .2rem;
    border: 1px solid rgba(148,163,184,.2);
    border-radius: .65rem;
    background: rgba(255,255,255,.92);
    box-shadow: 0 .3rem .9rem rgba(15,23,42,.13);
}

.chat-shell .my-message .message-actions,
.chat-shell .their-message .message-actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.chat-shell .my-message .message-actions { left: -2.5rem; }
.chat-shell .their-message .message-actions { right: -2.5rem; }

.chat-shell .message-bubble:hover .message-actions,
.chat-shell .message-bubble:focus-within .message-actions {
    opacity: 1;
    pointer-events: auto;
}

.chat-shell .message-actions br { display: none; }
.chat-shell .message-actions button { width: 1.8rem; height: 1.8rem; color: #475569; background: transparent; box-shadow: none; }
.chat-shell .message-actions button:hover { color: #1d4ed8; background: #eff6ff; }

.chat-shell .audio-player {
    width: min(18rem, 100%);
    padding: .7rem;
    color: #334155;
    border: 1px solid rgba(148,163,184,.3);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,245,249,.92));
    box-shadow: 0 .3rem .9rem rgba(15,23,42,.1);
}
.chat-shell .audio-player .row { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .7rem; align-items: center; margin: 0; }
.chat-shell .audio-player .col-3,
.chat-shell .audio-player .col-9 { width: auto; padding: 0; }
.chat-shell .audio-player .play-btn {
    display: grid;
    width: 3.1rem;
    height: 3.1rem;
    padding: 0;
    place-items: center;
    color: #fff;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #0f766e);
    box-shadow: 0 .35rem .7rem rgba(37,99,235,.28);
    font-size: 1.15rem;
    transition: transform .18s ease, box-shadow .18s ease;
}
.chat-shell .audio-player .play-btn:hover,
.chat-shell .audio-player .play-btn:focus-visible { color: #fff; outline: 0; transform: scale(1.07); box-shadow: 0 .45rem .9rem rgba(37,99,235,.38); }
.chat-shell .chat-audio-message { width: 100%; max-width: 100%; padding: .25rem 0; }
.chat-shell .chat-audio-player { display: grid; grid-template-columns: 2.85rem minmax(0, 1fr); gap: .7rem; align-items: center; box-sizing: border-box; width: 100%; max-width: 100%; padding: .7rem .8rem; direction: ltr; border: 1px solid rgba(148,163,184,.3); border-radius: 1rem; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.94)); box-shadow: 0 .35rem .9rem rgba(15,23,42,.1); }
.chat-shell .chat-audio-toggle { display: grid; width: 2.85rem; height: 2.85rem; padding: 0; place-items: center; color: #fff; border: 0; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #0f766e); box-shadow: 0 .35rem .7rem rgba(37,99,235,.28); font-size: 1.15rem; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.chat-shell .chat-audio-toggle:hover, .chat-shell .chat-audio-toggle:focus-visible { color: #fff; outline: 0; transform: scale(1.06); box-shadow: 0 .45rem .9rem rgba(37,99,235,.38); }
.chat-shell .chat-audio-body { min-width: 0; }
.chat-shell .chat-audio-label { display: flex; align-items: center; gap: .35rem; margin-bottom: .35rem; color: #0f766e; direction: rtl; font-size: .78rem; font-weight: 700; }
.chat-shell .chat-voice-player .chat-audio-label { justify-content: center; direction: ltr; font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; text-align: center; }
.chat-shell .chat-voice-player .chat-audio-track-row { grid-template-columns: minmax(0, 1fr); }
.chat-shell .chat-audio-time-separator { color: #94a3b8; font-weight: 500; }
.chat-shell .chat-audio-name { overflow: hidden; color: #334155; direction: ltr; text-align: left; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.chat-shell .chat-audio-track-row { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem; gap: .45rem; align-items: center; }
.chat-shell .chat-audio-current, .chat-shell .chat-audio-duration { color: #64748b; font-size: .68rem; font-variant-numeric: tabular-nums; text-align: center; }
.chat-shell .chat-audio-seek { width: 100%; height: .32rem; accent-color: #2563eb; cursor: pointer; }
.chat-shell .chat-audio { display: none; }
.chat-shell .audio-player .current-time,
.chat-shell .audio-player .duration { color: #64748b; font-family: system-ui, sans-serif; font-size: .72rem; font-variant-numeric: tabular-nums; }
.chat-shell .audio-filename { width: 100%; margin-bottom: .3rem !important; padding: .3rem .45rem !important; color: #334155; border: 1px solid rgba(148,163,184,.25); background: rgba(255,255,255,.7) !important; font-size: .72rem; font-weight: 700; }
.chat-shell .voice-progress-bar {
    height: 1rem;
    margin-top: .55rem;
    overflow: visible;
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 999px;
    background: #dbe4ef;
    box-shadow: inset 0 .08rem .18rem rgba(15,23,42,.09);
    cursor: ew-resize;
    touch-action: none;
}
.chat-shell .voice-progress { border-radius: inherit; background: linear-gradient(90deg, #0f766e, #2563eb); }
.chat-shell .voice-progress::after { position: absolute; top: 50%; left: -.38rem; box-sizing: border-box; width: .9rem; height: .9rem; content: ""; border: .14rem solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 .08rem .25rem rgba(15,23,42,.3); transform: translateY(-50%); }
.chat-shell .file-message {
    width: min(13.5rem, calc(100% - 3rem));
    padding: .65rem .75rem !important;
    color: #334155;
    border: 1px solid rgba(148,163,184,.28);
    border-radius: .85rem !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 .2rem .65rem rgba(15,23,42,.08);
    font-size: .78rem;
    font-weight: 700;
}
.chat-shell .file-download-btn {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    place-items: center;
    color: #fff;
    border: 0;
    border-radius: .8rem;
    background: linear-gradient(135deg, #2563eb, #0f766e);
    box-shadow: 0 .25rem .65rem rgba(37,99,235,.25);
    transition: transform .18s ease, box-shadow .18s ease;
}
.chat-shell .file-download-btn:hover,
.chat-shell .file-download-btn:focus-visible { color: #fff; outline: 0; transform: translateY(-2px); box-shadow: 0 .4rem .9rem rgba(37,99,235,.34); }
.chat-shell .video-player {
    position: relative;
    width: min(19rem, 100%);
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 1rem;
    background: #020617;
    box-shadow: 0 .35rem 1rem rgba(15,23,42,.18);
}
.chat-shell .message-video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 0 !important; background: #020617; object-fit: contain; }
.chat-shell .video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 3.8rem;
    height: 3.8rem;
    padding: 0;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;
    background: rgba(15,23,42,.56);
    box-shadow: 0 .45rem 1.2rem rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    font-size: 1.8rem;
    transform: translate(-50%, -50%);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.chat-shell .video-play-overlay:hover,
.chat-shell .video-play-overlay:focus-visible { color: #fff; outline: 0; background: rgba(37,99,235,.78); transform: translate(-50%, -50%) scale(1.08); }
.chat-shell .video-player.is-playing .video-play-overlay { pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.78); }

.chat-shell #messagesList > .log-Message {
    display: table;
    width: auto;
    max-width: calc(100% - 2rem);
    margin: .75rem auto;
    padding: .42rem .8rem !important;
    color: #475569 !important;
    font-size: .72rem;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, .3) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8) !important;
    box-shadow: 0 .25rem .7rem rgba(15, 23, 42, .08);
    backdrop-filter: blur(8px);
}

.chat-shell #messagesList > .log-Message.text-success {
    color: #047857 !important;
    border-color: rgba(16, 185, 129, .28) !important;
    background: rgba(236, 253, 245, .9) !important;
}

.chat-shell #messagesList > .log-Message.text-danger {
    color: #be123c !important;
    border-color: rgba(244, 63, 94, .24) !important;
    background: rgba(255, 241, 242, .9) !important;
}

.chat-shell #scrollToBottomBtn {
    right: auto;
    left: clamp(.65rem, 2vw, 1.5rem);
    z-index: 15;
    width: 2.4rem;
    height: 2.4rem;
    color: #475569;
    border: 1px solid rgba(100,116,139,.22);
    border-radius: 50%;
    background: rgba(255,255,255,.68);
    box-shadow: 0 .5rem 1rem rgba(71,85,105,.18);
    backdrop-filter: blur(10px);
    bottom: 80px;
}

.chat-shell #scrollToBottomBtn:hover {
    color: #1e293b;
    background: rgba(255,255,255,.92);
}

.chat-shell #replyPreview {
    z-index: 14;
    /* Composer is 99px tall on desktop; keep a 5px breathing gap above it. */
    bottom: 104px;
    max-width: min(50rem, calc(100% - 3rem));
    padding: .6rem .9rem;
    color: #334155;
    border: 1px solid #bae6fd;
    border-radius: .85rem !important;
    background: #f0f9ff;
    box-shadow: 0 .5rem 1.25rem rgba(15,23,42,.12);
}

.chat-composer-wrap {
    z-index: 13;
    padding-top: .8rem;
    padding-left: clamp(.7rem, 2.5vw, 1.5rem);
    padding-right: clamp(.7rem, 2.5vw, 1.5rem);
    padding-bottom: max(.8rem, env(safe-area-inset-bottom, .8rem));
    border-top: 1px solid rgba(148,163,184,.2);
    background: rgba(255,255,255,.92);
    box-shadow: 0 -.5rem 1.5rem rgba(15,23,42,.06);
    backdrop-filter: blur(12px);
}

.chat-shell .sendMessageSection {
    min-height: 3rem;
    height: auto;
    max-width: 52rem;
    overflow: visible;
    align-items: flex-end;
    border: 1px solid #cbd5e1;
    border-radius: 1rem !important;
    background: #fff;
    box-shadow: 0 .25rem .7rem rgba(15,23,42,.06);
}

.chat-shell .sendMessageSection:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 0 .22rem rgba(59,130,246,.14);
}

.chat-shell #messageInput {
    min-width: 0;
    height: 2.38rem;
    max-height: 8rem;
    padding-top: .53rem;
    padding-bottom: .53rem;
    color: #1e293b;
    line-height: 1.3;
    resize: none;
    overflow-y: auto;
    background: transparent;
}

.chat-shell .sendMessageSection:not(.is-expanded) #messageInput {
    align-self: center;
}
.chat-shell #recordTimer {
    align-self: center;
    height: 2.38rem;
    line-height: 1;
}
.chat-shell .voice-upload-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .4rem;
    align-self: center;
    padding: .35rem .65rem;
    color: #1d4ed8;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}
.chat-shell .voice-upload-status .spinner-border { width: .9rem; height: .9rem; }
.chat-shell #messageInput::placeholder { color: #94a3b8; }
.chat-shell .message-content { white-space: pre-wrap; }

.chat-shell #recordButton,
.chat-shell #sendButton,
.chat-shell #sendFileButton,
.chat-shell #emojiPickerButton {
    display: inline-grid;
    width: 2.38rem;
    height: 2.38rem;
    flex: 0 0 2.38rem;
    padding: 0;
    margin: .3rem;
    place-items: center;
    color: #475569;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.chat-shell #recordButton:hover { color: #e11d48; background: #fff1f2; transform: scale(1.04); }
.chat-shell #sendFileButton:hover { color: #2563eb; background: #eff6ff; transform: scale(1.04); }
.chat-shell #emojiPickerButton:hover { color: #d97706; background: #fffbeb; transform: scale(1.04); }
.chat-shell #sendButton { color: #fff; background: #2563eb; }
.chat-shell #sendButton:hover { background: #1d4ed8; transform: scale(1.04); }
.chat-shell .File-DropUp::after { display: none; }
.chat-shell .emoji-picker-wrap { position: relative; align-self: end; }
.chat-shell .emoji-picker {
    position: absolute;
    z-index: 40;
    bottom: calc(100% + .55rem);
    left: 0;
    display: grid;
    grid-template-columns: repeat(6, 2rem);
    gap: .25rem;
    width: max-content;
    padding: .45rem;
    border: 1px solid #cbd5e1;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 .75rem 2rem rgba(15,23,42,.18);
}
.chat-shell .emoji-picker-item {
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    font-size: 1.2rem;
    line-height: 1;
    border: 0;
    border-radius: .5rem;
    background: transparent;
}
.chat-shell .emoji-picker-item:hover,
.chat-shell .emoji-picker-item:focus-visible { background: #eff6ff; outline: 0; }

.chat-shell .dropup .dropdown-menu {
    min-width: 12rem;
    padding: .4rem;
    border: 0;
    border-radius: .85rem;
    box-shadow: 0 .8rem 2rem rgba(15,23,42,.18);
    z-index: 30;
}

.chat-shell .dropup .dropdown-item { border-radius: .55rem; padding: .55rem .7rem; }
.chat-shell .dropup .dropdown-item i { margin-left: .45rem; color: #2563eb; }

.ChatroomBody .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(15,23,42,.25);
}

.ChatroomBody .modal-header { color: #eff6ff; border: 0; background: linear-gradient(120deg, #172554, #0f766e); }
.ChatroomBody .modal-header .btn-close { filter: invert(1); }
.ChatroomBody .modal-body { padding: 1.25rem; background: #f8fafc; }
.ChatroomBody .modal-body .alert { border: 0; border-radius: .75rem; }

.ChatroomBody .user-profile-modal-content { border-radius: 1.15rem; }
.chat-profile-avatar {
    position: relative;
    display: grid;
    width: 5.25rem;
    height: 5.25rem;
    overflow: hidden;
    place-items: center;
    color: #0f172a;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #bfdbfe, #99f6e4);
    box-shadow: 0 .6rem 1.4rem rgba(15,23,42,.16);
    font-size: 1.55rem;
    font-weight: 800;
}

.chat-profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-profile-biography { margin: .75rem 0; color: #475569; font-size: .82rem; line-height: 1.7; white-space: pre-line; }
.chat-profile-meta { display: grid; gap: .65rem; padding: .85rem; border-radius: .8rem; background: #f1f5f9; }
.chat-profile-meta div { display: grid; grid-template-columns: 1.25rem 1fr auto; gap: .35rem; align-items: center; color: #64748b; font-size: .75rem; }
.chat-profile-meta i { color: #2563eb; }
.chat-profile-meta strong { color: #334155; font-size: .72rem; font-weight: 700; }
.room-members-list { max-height: 15rem; overflow-y: auto; }

@media (max-width: 767.98px) {
    .chat-shell.full-width-container {
        width: 100%;
        height: var(--chat-viewport-height, 100dvh);
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .chat-header#ChatroomHeader { min-height: 64px; padding: .7rem .85rem; gap: .65rem; }
    .chat-header-action.ChatroomReturnButton { width: 2.25rem; height: 2.25rem; }
    .chat-room-avatar { width: 2.35rem; height: 2.35rem; }
    .chat-room-name#roomName { max-width: 11rem; font-size: .9rem; }
    .chat-live-status { display: block; font-size: .67rem; }
    .chat-shell .date-divider { top: 70px; }
    .chat-shell #messagesList { padding: .5rem .35rem .7rem; }
    .chat-shell #scrollToBottomBtn { bottom: 74px; }
    .chat-shell .message-bubble { max-width: 74%; }
    .chat-shell .message-sender-avatar { width: 1.9rem; height: 1.9rem; flex-basis: 1.9rem; }
    .chat-shell #replyPreview { bottom: 74px; max-width: calc(100% - 1.4rem); right: .7rem; left: .7rem; }
    .chat-composer-wrap {
        padding-top: .65rem;
        padding-left: .7rem;
        padding-right: .7rem;
        padding-bottom: max(.65rem, env(safe-area-inset-bottom, .65rem));
    }
}

/* Chatroom dark theme: this view owns its own document and does not use _Layout. */
.chat-theme-toggle { display: inline-grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; padding: 0; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: .8rem; background: rgba(255,255,255,.1); transition: .2s ease; }
.chat-theme-toggle:hover { color: #fff; background: rgba(255,255,255,.2); transform: rotate(14deg); }
.chat-theme-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(191, 219, 254, .45); }

[data-bs-theme="dark"] .ChatroomBody { background: radial-gradient(circle at top right, #1e3a8a 0, transparent 30%), linear-gradient(135deg, #020617 0%, #0f172a 50%, #134e4a 100%); }
[data-bs-theme="dark"] .ChatroomBody.has-room-background { background-image: linear-gradient(rgba(2, 6, 23, .68), rgba(15, 23, 42, .78)), var(--room-background-url); }
[data-bs-theme="dark"] .ChatroomBody.has-room-background .chat-shell #messagesList { background-image: linear-gradient(rgba(15, 23, 42, .78), rgba(17, 28, 45, .88)), var(--room-background-url); }
[data-bs-theme="dark"] .chat-shell.full-width-container { border-color: rgba(71, 85, 105, .8); background: #0f172a; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .5); }
[data-bs-theme="dark"] .chat-header#ChatroomHeader { background: linear-gradient(120deg, #020617, #172554 58%, #115e59); }
[data-bs-theme="dark"] .chat-shell #messagesList { background-color: #0f172a; background-image: radial-gradient(circle at 10% 15%, rgba(30, 64, 175, .28), transparent 24rem), radial-gradient(circle at 88% 86%, rgba(6, 78, 59, .32), transparent 22rem), radial-gradient(rgba(100, 116, 139, .12) .7px, transparent .7px), linear-gradient(135deg, #0f172a, #111c2d); scrollbar-color: #475569 transparent; }
[data-bs-theme="dark"] .chat-shell .message-loading-indicator { color: #bfdbfe; border-color: rgba(59, 130, 246, .45); background: rgba(23, 37, 84, .94); }
[data-bs-theme="dark"] .chat-shell #messagesList::-webkit-scrollbar-thumb { background: #475569; }
[data-bs-theme="dark"] .chat-shell #currentDate,
[data-bs-theme="dark"] .chat-shell .date-separator-badge { color: #cbd5e1; border-color: #475569; background: rgba(30, 41, 59, .9); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .22); }
[data-bs-theme="dark"] .chat-shell .message-sender-avatar { color: #cbd5e1; border-color: rgba(71, 85, 105, .9); background: linear-gradient(135deg, #334155, #1e293b); }
[data-bs-theme="dark"] .chat-shell .my-message .message-bubble { color: #dcfce7; border-color: #166534; background: linear-gradient(135deg, #14532d, #166534); }
[data-bs-theme="dark"] .chat-shell .their-message .message-bubble { color: #e2e8f0; border-color: #334155; background: #1e293b; }
[data-bs-theme="dark"] .chat-shell .my-message .text-muted { color: #bbf7d0 !important; }
[data-bs-theme="dark"] .chat-shell .reply-preview { background: rgba(148, 163, 184, .15); }
[data-bs-theme="dark"] .chat-shell .message-actions { border-color: #475569; background: rgba(15, 23, 42, .96); box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .3); }
[data-bs-theme="dark"] .chat-shell .message-actions button { color: #cbd5e1; }
[data-bs-theme="dark"] .chat-shell .message-actions button:hover { color: #bfdbfe; background: #1e3a5f; }
[data-bs-theme="dark"] .chat-shell .audio-player { color: #e2e8f0; border-color: #475569; background: #1e293b; }
[data-bs-theme="dark"] .chat-shell .chat-audio-name { color: #e2e8f0; }
[data-bs-theme="dark"] .chat-shell .chat-audio-player { border-color: #475569; background: linear-gradient(135deg, #1e293b, #172554); }
[data-bs-theme="dark"] .chat-shell .chat-audio-label { color: #5eead4; }
[data-bs-theme="dark"] .chat-shell .chat-audio-current, [data-bs-theme="dark"] .chat-shell .chat-audio-duration { color: #cbd5e1; }
[data-bs-theme="dark"] .chat-shell .file-message {
    color: #f8fafc;
    border-color: #475569;
    background: #334155 !important;
}
[data-bs-theme="dark"] .chat-shell .audio-filename.bg-white {
    color: #f8fafc;
    background: #334155 !important;
}
[data-bs-theme="dark"] .chat-shell .image-download-card { background: linear-gradient(135deg, #334155, #172554 48%, #115e59); }
[data-bs-theme="dark"] .chat-shell .image-download-card::before { background: radial-gradient(circle at 25% 20%, rgba(96,165,250,.5), transparent 28%), radial-gradient(circle at 80% 75%, #0f766e, transparent 42%), linear-gradient(120deg, #1e293b, #172554, #134e4a); }
[data-bs-theme="dark"] .chat-shell .file-download-btn {
    color: #eff6ff;
    border-color: #3b82f6;
    background: #2563eb;
}
[data-bs-theme="dark"] .chat-shell .file-download-btn:hover,
[data-bs-theme="dark"] .chat-shell .file-download-btn:focus-visible {
    color: #fff;
    border-color: #60a5fa;
    background: #1d4ed8;
}
[data-bs-theme="dark"] .chat-shell .progress { background: #334155; }
[data-bs-theme="dark"] .chat-shell #messagesList > .log-Message { color: #cbd5e1 !important; border-color: #475569 !important; background: rgba(30, 41, 59, .9) !important; box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .2); }
[data-bs-theme="dark"] .chat-shell #messagesList > .log-Message.text-success { color: #86efac !important; border-color: #166534 !important; background: rgba(5, 46, 22, .9) !important; }
[data-bs-theme="dark"] .chat-shell #messagesList > .log-Message.text-danger { color: #fda4af !important; border-color: #9f1239 !important; background: rgba(76, 5, 25, .9) !important; }
[data-bs-theme="dark"] .chat-shell #scrollToBottomBtn { color: #cbd5e1; border-color: #475569; background: rgba(30, 41, 59, .82); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .25); }
[data-bs-theme="dark"] .chat-shell #scrollToBottomBtn:hover { color: #fff; background: #334155; }
[data-bs-theme="dark"] .chat-shell #replyPreview { color: #dbeafe; border-color: #1e40af; background: #172554; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25); }
[data-bs-theme="dark"] .chat-composer-wrap { border-top-color: #334155; background: rgba(15, 23, 42, .94); box-shadow: 0 -.5rem 1.5rem rgba(0, 0, 0, .2); }
[data-bs-theme="dark"] .chat-shell .sendMessageSection { border-color: #475569; background: #1e293b; box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .2); }
[data-bs-theme="dark"] .chat-shell #messageInput { color: #f1f5f9; }
[data-bs-theme="dark"] .chat-shell #recordButton,
[data-bs-theme="dark"] .chat-shell #sendFileButton,
[data-bs-theme="dark"] .chat-shell #emojiPickerButton { color: #cbd5e1; }
[data-bs-theme="dark"] .chat-shell .voice-upload-status { color: #93c5fd; }
[data-bs-theme="dark"] .chat-shell #recordButton:hover { background: #4c0519; }
[data-bs-theme="dark"] .chat-shell #sendFileButton:hover { color: #bfdbfe; background: #1e3a5f; }
[data-bs-theme="dark"] .chat-shell #emojiPickerButton:hover { color: #fde68a; background: #78350f; }
[data-bs-theme="dark"] .chat-shell .emoji-picker { border-color: #475569; background: #1e293b; box-shadow: 0 .75rem 2rem rgba(0,0,0,.38); }
[data-bs-theme="dark"] .chat-shell .emoji-picker-item:hover,
[data-bs-theme="dark"] .chat-shell .emoji-picker-item:focus-visible { background: #334155; }
[data-bs-theme="dark"] .chat-shell .dropup .dropdown-menu,
[data-bs-theme="dark"] .chat-members-menu { color: #e2e8f0; border-color: #334155; background: #1e293b; box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .35); }
[data-bs-theme="dark"] .chat-shell .dropup .dropdown-item { color: #e2e8f0; }
[data-bs-theme="dark"] .chat-shell .dropup .dropdown-item:hover,
[data-bs-theme="dark"] .chat-shell .dropup .dropdown-item:focus { color: #fff; background: #334155; }
[data-bs-theme="dark"] .ChatroomBody .modal-content { color: #e2e8f0; background: #172033; }
[data-bs-theme="dark"] .ChatroomBody .modal-body { background: #172033; }
[data-bs-theme="dark"] .ChatroomBody .modal-footer { border-top-color: #334155; background: #172033; }
[data-bs-theme="dark"] .ChatroomBody .modal .form-control { color: #e2e8f0; border-color: #475569; background: #0f172a; }
[data-bs-theme="dark"] .ChatroomBody .modal .form-text,
[data-bs-theme="dark"] .ChatroomBody .modal .text-muted { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ChatroomBody .modal .list-group-item { color: #e2e8f0; border-color: #334155 !important; background: #1e293b !important; }

[data-bs-theme="dark"] .chat-profile-avatar { color: #e2e8f0; border-color: #475569; background: linear-gradient(135deg, #1e3a5f, #134e4a); }
[data-bs-theme="dark"] .chat-profile-biography { color: #cbd5e1; }
[data-bs-theme="dark"] .chat-profile-meta { background: #1e293b; }
[data-bs-theme="dark"] .chat-profile-meta div { color: #94a3b8; }
[data-bs-theme="dark"] .chat-profile-meta strong { color: #e2e8f0; }

/* Error pages */
.access-denied-page,
.not-found-page,
.account-access-denied-page {
    direction: rtl;
    text-align: right;
    max-width: 760px;
    margin: 3rem auto;
}
.access-denied-card,
.not-found-card,
.account-access-denied-card {
    direction: rtl;
    text-align: right;
}
.access-denied-card { border: 1px solid color-mix(in srgb, var(--bs-danger) 25%, transparent); }
.not-found-card { border: 1px solid color-mix(in srgb, var(--bs-warning) 35%, transparent); }
.account-access-denied-card { border: 1px solid color-mix(in srgb, var(--bs-danger) 25%, transparent); }
.access-denied-card .home-welcome-actions,
.not-found-card .home-welcome-actions,
.account-access-denied-card .home-welcome-actions { justify-content: flex-start; }
.access-denied-icon {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    justify-content: center;
}
.home-brand-mark {
    justify-content: center !important;
}
.not-found-icon {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.account-access-denied-icon { color: #fff; background: linear-gradient(135deg, #dc2626, #991b1b); }
.account-access-denied-card .account-access-denied-icon { justify-content: center; }