:root {
 --bg-app: #0e1621;
 --bg-panel: #17212b;
 --bg-panel-light: #1e2a35;
 --bg-input: #24303f;
 --bg-hover: #202b36;
 --accent: #2481cc;
 --accent-light: #5ea8f5;
 --accent-grad: linear-gradient(135deg, #5ea8f5, #2481cc);
 --bubble-mine: #2b5278;
 --bubble-theirs: #182533;
 --text-main: #ffffff;
 --text-dim: #7b8e9f;
 --text-faint: #52626f;
 --danger: #e05555;
 --success: #4dc46a;
 --border-soft: rgba(255,255,255,0.06);
 --radius-lg: 18px;
 --radius-md: 12px;
 --radius-sm: 8px;
}

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 font-family: 'Vazirmatn', sans-serif;
 -webkit-tap-highlight-color: transparent;
 






 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

html, body {
 height: 100%;
 background: var(--bg-app);
 color: var(--text-main);
 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

body {
 direction: rtl;
 overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { border: none; outline: none; background: none; cursor: pointer; }
input { border: none; outline: none; }
::selection { background: rgba(94,168,245,0.35); }


::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #2c3a48; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }


.auth-wrap {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background:
 radial-gradient(circle at 20% 15%, rgba(36,129,204,0.18), transparent 40%),
 radial-gradient(circle at 85% 80%, rgba(94,168,245,0.12), transparent 45%),
 var(--bg-app);
 padding: 24px;
}

.auth-box {
 width: 100%;
 max-width: 380px;
 background: var(--bg-panel);
 border-radius: 22px;
 padding: 40px 32px 32px;
 box-shadow: 0 20px 60px rgba(0,0,0,0.45);
 border: 1px solid var(--border-soft);
 animation: fadeUp .45s ease;
}

@keyframes fadeUp {
 from { opacity: 0; transform: translateY(14px); }
 to { opacity: 1; transform: translateY(0); }
}

.auth-logo {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 background: var(--accent-grad);
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 20px;
 font-size: 30px;
 box-shadow: 0 8px 24px rgba(36,129,204,0.35);
}

.auth-box h1 {
 font-size: 22px;
 font-weight: 700;
 text-align: center;
 margin-bottom: 6px;
}

.auth-box .sub {
 text-align: center;
 color: var(--text-dim);
 font-size: 13.5px;
 margin-bottom: 28px;
 line-height: 1.7;
}

.field { margin-bottom: 16px; position: relative; }

.field label {
 display: block;
 font-size: 12.5px;
 color: var(--text-dim);
 margin-bottom: 7px;
 padding-right: 2px;
}

.field input {
 width: 100%;
 background: var(--bg-input);
 color: var(--text-main);
 padding: 13px 15px;
 border-radius: var(--radius-md);
 font-size: 14.5px;
 border: 1.5px solid transparent;
 transition: border-color .15s;
}

.field input:focus { border-color: var(--accent); }
.field input::placeholder { color: var(--text-faint); }

.captcha-row {
 display: flex;
 align-items: center;
 gap: 10px;
 direction: ltr;
 background: rgba(255, 200, 0, 0.1);
 border-radius: var(--radius-md);
 padding: 6px 15px;
 border: 1.5px solid rgba(255, 200, 0, 0.28);
}
.captcha-row:focus-within { border-color: rgba(255, 200, 0, 0.55); }
.captcha-question {
 font-size: 15.5px;
 font-weight: 700;
 color: var(--text-main);
 white-space: nowrap;
 letter-spacing: .5px;
 direction: ltr;
}
.captcha-row input {
 flex: 1;
 min-width: 0;
 width: 100%;
 direction: ltr;
 background: transparent;
 color: var(--text-main);
 padding: 7px 4px;
 border: none;
 font-size: 14.5px;
 text-align: center;
}
.captcha-row input:focus { outline: none; }

.remember-me-row {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 13.5px;
 color: var(--text-dim);
 margin-top: 4px;
 cursor: pointer;
}
.remember-me-row input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.btn {
 width: 100%;
 padding: 14px;
 border-radius: var(--radius-md);
 background: var(--accent-grad);
 color: #fff;
 font-size: 15px;
 font-weight: 600;
 margin-top: 8px;
 transition: filter .15s, transform .1s;
 box-shadow: 0 6px 18px rgba(36,129,204,0.3);
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }

.error-msg {
 background: rgba(224,85,85,0.12);
 border: 1px solid rgba(224,85,85,0.35);
 color: #f19b9b;
 font-size: 13px;
 padding: 10px 14px;
 border-radius: var(--radius-sm);
 margin-bottom: 18px;
 line-height: 1.6;
 text-align: center;
}

.auth-switch {
 text-align: center;
 margin-top: 22px;
 font-size: 13.5px;
 color: var(--text-dim);
}

.auth-switch a { color: var(--accent-light); font-weight: 600; }


.app-shell {
 max-width: 480px;
 margin: 0 auto;
 min-height: 100vh;
 min-height: var(--app-height, 100vh);
 background: var(--bg-app);
 display: flex;
 flex-direction: column;
}




.app-shell:not(.full-height) {
 padding-top: 60px;
}




.app-shell.full-height {
 height: 100vh;
 height: var(--app-height, 100vh);
 position: relative;
 overflow: hidden;
}






.chat-wallpaper {
 background-image: url("images/im.jpg");
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}

.brand-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 16px 18px 10px;
 min-height: 60px;
 background: var(--bg-app);
 opacity: 0;
 animation: brandIn .55s cubic-bezier(.2,.7,.3,1) .05s forwards;
 position: fixed;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 100%;
 max-width: 480px;
 z-index: 30;
}

.brand-title {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 24px;
 font-weight: 800;
 letter-spacing: .2px;
 background: var(--accent-grad);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}

.brand-icon {
 display: inline-block;
 animation: brandFloat 2.6s ease-in-out infinite;
 filter: drop-shadow(0 2px 6px rgba(94,168,245,0.35));
}

.brand-title-slot {
 position: relative;
 display: flex;
 align-items: center;
 min-height: 30px;
}

.brand-title {
 transition: opacity .5s ease, transform .5s ease;
}

.brand-title-hide {
 opacity: 0;
 transform: translateY(-6px);
 pointer-events: none;
}

.welcome-title {
 position: absolute;
 top: 0;
 right: 0;
 height: 100%;
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 17px;
 font-weight: 700;
 color: var(--text-main);
 white-space: nowrap;
 overflow: hidden;
 max-width: 320px;
 opacity: 0;
 transform: translateY(6px);
 transition: opacity .55s ease, transform .55s ease;
}

.welcome-title-show {
 opacity: 1;
 transform: translateY(0);
}

.welcome-caret {
 display: inline-block;
 width: 2px;
 height: 20px;
 background: var(--accent-light);
 animation: welcomeCaretBlink .8s steps(1) infinite;
}

.welcome-caret-stop {
 display: none;
}

.welcome-wave-emoji {
 width: 26px;
 height: 26px;
 vertical-align: middle;
 opacity: 0;
 transform: scale(.5);
 transition: opacity .35s ease, transform .35s ease;
}

.welcome-wave-emoji-show {
 opacity: 1;
 transform: scale(1);
}

@keyframes welcomeCaretBlink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0; }
}

.brand-icons { display: flex; align-items: center; gap: 6px; }


.svg-icon {
 width: 1.2em;
 height: 1.2em;
 display: inline-block;
 vertical-align: -0.18em;
 flex-shrink: 0;
}
.back-btn .svg-icon { width: 20px; height: 20px; }
.send-btn .svg-icon { width: 19px; height: 19px; }
.icon-btn .svg-icon { width: 19px; height: 19px; }
.mm-icon .svg-icon { width: 17px; height: 17px; }
.pin-bar-icon .svg-icon, .rp-icon .svg-icon { width: 16px; height: 16px; }
.pin-bar-close .svg-icon, .reply-preview-close .svg-icon { width: 15px; height: 15px; }
.bn-icon .svg-icon { width: 21px; height: 21px; }
.admin-view-banner .svg-icon, .ban-notice-bar .svg-icon { width: 17px; height: 17px; }

.icon-btn {
 width: 38px;
 height: 38px;
 border: none;
 border-radius: 50%;
 background: var(--bg-input);
 color: var(--text-main);
 font-size: 16px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background .15s, transform .15s;
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:active { transform: scale(.92); }

@keyframes brandIn {
 from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
 to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes brandFloat {
 0%, 100% { transform: translateY(0) rotate(0deg); }
 50% { transform: translateY(-3px) rotate(-6deg); }
}

.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 18px 18px 14px;
 background: var(--bg-panel);
 border-bottom: 1px solid var(--border-soft);
}

.topbar h2 { font-size: 18px; font-weight: 700; }

.topbar .me-row { display: flex; align-items: center; gap: 12px; }

.logout-link {
 color: var(--text-dim);
 font-size: 13px;
 padding: 8px 14px;
 border-radius: 20px;
 background: var(--bg-input);
 transition: background .15s, color .15s;
}
.logout-link:hover { background: rgba(224,85,85,0.15); color: #f19b9b; }

.search-wrap { padding: 12px 16px; background: var(--bg-panel); }

.search-wrap input {
 width: 100%;
 background: var(--bg-input);
 color: var(--text-main);
 padding: 11px 16px;
 border-radius: 22px;
 font-size: 14px;
}
.search-wrap input::placeholder { color: var(--text-faint); }

#chatList, #searchResults { flex: 1; background: var(--bg-app); }

.user-row {
 display: flex;
 align-items: center;
 gap: 13px;
 padding: 13px 18px;
 transition: background .12s;
 border-bottom: 1px solid var(--border-soft);
 position: relative;
}
.user-row:hover, .user-row:active { background: var(--bg-hover); }

.avatar {
 width: 50px;
 height: 50px;
 min-width: 50px;
 border-radius: 50%;
 background: var(--accent-grad);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 19px;
 font-weight: 700;
 color: #fff;
 position: relative;
}

.avatar.small { width: 38px; height: 38px; font-size: 15px; min-width: 38px; }
.avatar.big { width: 84px; height: 84px; font-size: 32px; min-width: 84px; }


.avatar.avatar-has-img {
 background: none;
 padding: 0;
}
.avatar.avatar-has-img img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: cover;
}

.online-dot {
 position: absolute;
 bottom: -1px;
 left: -1px;
 width: 13px;
 height: 13px;
 border-radius: 50%;
 background: var(--success);
 border: 2px solid #fff;
 box-shadow: 0 0 0 1px var(--bg-panel);
 z-index: 2;
}

.meta { flex: 1; min-width: 0; }

.uname {
 font-size: 15px;
 font-weight: 600;
 margin-bottom: 3px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.last-msg {
 font-size: 13px;
 color: var(--text-dim);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.row-time { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

.unread-badge {
 background: var(--accent);
 color: #fff;
 font-size: 11px;
 font-weight: 700;
 min-width: 20px;
 height: 20px;
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 6px;
}


.ad-row { cursor: pointer; }
.avatar.avatar-ad {
 background: linear-gradient(135deg, #4dc46a, #2481cc);
 font-size: 21px;
}
.ad-badge {
 background: rgba(77,196,106,0.15);
 color: var(--success);
 border: 1px solid rgba(77,196,106,0.35);
 font-size: 11px;
 font-weight: 700;
 padding: 4px 10px;
 border-radius: 20px;
 white-space: nowrap;
}

.empty-state {
 text-align: center;
 color: var(--text-dim);
 font-size: 14px;
 padding: 60px 30px;
 line-height: 1.8;
}


.chat-header {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 background: rgba(23, 33, 43, 0.78);
 -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px);
 border-bottom: 1px solid var(--border-soft);
 position: sticky;
 top: 0;
 z-index: 5;
}

.back-btn {
 font-size: 22px;
 color: var(--text-main);
 padding: 4px 8px;
}

.header-meta { flex: 1; min-width: 0; }
.header-meta .uname { font-size: 15.5px; }
.header-meta .status { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.header-meta .status.online { color: var(--accent-light); }

.chat-header-info-link {
 flex: 1;
 min-width: 0;
 display: flex;
 align-items: center;
 gap: 12px;
 cursor: pointer;
 border-radius: 8px;
 transition: background .12s ease;
}
.chat-header-info-link:active { background: var(--bg-hover); }

.typing-dots {
 display: inline-flex;
 gap: 3px;
 margin-right: 6px;
 vertical-align: middle;
}
.typing-dots span {
 width: 4px; height: 4px; border-radius: 50%;
 background: var(--accent-light);
 animation: typingBounce 1.2s infinite;
 display: inline-block;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }







.composer-dock {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 5;
 background: transparent;
 box-shadow: none;
 pointer-events: none;
}
.composer-dock > * { pointer-events: auto; }





.scroll-to-bottom-btn {
 position: fixed;
 right: 18px;
 bottom: 100px;
 width: 42px;
 height: 42px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--bg-panel-light);
 color: var(--accent-light);
 border: 1px solid var(--border-soft);
 box-shadow: 0 6px 18px rgba(0,0,0,0.4);
 cursor: pointer;
 z-index: 6;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(10px) scale(.92);
 transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.scroll-to-bottom-btn.show {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateY(0) scale(1);
}
.scroll-to-bottom-btn:hover { background: var(--bg-hover); }
.scroll-to-bottom-btn:active { transform: scale(.9); }




.chat-messages {
 flex: 1;
 overflow-y: auto;
 padding: 16px 14px 76px;
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.bubble {
 max-width: 78%;
 padding: 9px 13px 8px;
 border-radius: var(--radius-lg);
 font-size: 14.5px;
 line-height: 1.65;
 position: relative;
 margin: 3px 0;
 word-wrap: break-word;
 white-space: pre-wrap;
 animation: bubbleIn .18s ease;
 


 display: flow-root;
}

@keyframes bubbleIn {
 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: translateY(0); }
}

.bubble.mine {
 align-self: flex-start;
 background: var(--bubble-mine);
 color: #fff;
 border-bottom-left-radius: 4px;
}

.bubble.theirs {
 align-self: flex-end;
 background: var(--bubble-theirs);
 color: #fff;
 border-bottom-right-radius: 4px;
}

.msg-meta-row {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 5px;
 margin-top: 4px;
}

.bubble .time {
 font-size: 10.5px;
 color: rgba(255,255,255,0.55);
}

.bubble .seen-tick { font-size: 12px; color: rgba(255,255,255,0.6); }
.bubble .seen-tick.read { color: #5ea8f5; }


.mention-link {
 color: #8ecbff;
 font-weight: 600;
 text-decoration: none;
}
.mention-link:hover,
.mention-link:focus {
 text-decoration: underline;
}
.channel-msg-text .mention-link {
 color: var(--accent-light);
}


.msg-link {
 color: #8ecbff;
 text-decoration: none;
 word-break: break-all;
 border-bottom: 1px solid transparent;
 transition: border-color 0.15s;
}
.msg-link:hover,
.msg-link:focus {
 border-bottom-color: #8ecbff;
 text-decoration: none;
}
.bubble.mine .msg-link { color: #d4e8ff; }
.bubble.mine .msg-link:hover { border-bottom-color: #d4e8ff; }
.channel-msg-text .msg-link { color: var(--accent-light); }
.channel-msg-text .msg-link:hover { border-bottom-color: var(--accent-light); }







.group-invite-card {
 display: flex;
 align-items: center;
 gap: 11px;
 margin: 6px 0 2px;
 padding: 11px 13px;
 background: rgba(94, 168, 245, 0.10);
 border: 1px solid rgba(94, 168, 245, 0.25);
 border-radius: 12px;
 text-decoration: none;
 color: var(--text-main);
 cursor: pointer;
 transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
 max-width: 320px;
 box-sizing: border-box;
}
.group-invite-card:hover,
.group-invite-card:focus {
 background: rgba(94, 168, 245, 0.18);
 border-color: rgba(94, 168, 245, 0.45);
 text-decoration: none;
}
.group-invite-card:active {
 transform: scale(0.98);
}


.group-invite-card .gic-avatar {
 flex-shrink: 0;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: linear-gradient(135deg, #5ea8f5, #2481cc);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 overflow: hidden;
 box-shadow: 0 3px 8px rgba(36, 129, 204, 0.30);
}
.group-invite-card .gic-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.group-invite-card .gic-avatar.gic-avatar--letter {
 font-size: 18px;
 font-weight: 700;
}
.group-invite-card .gic-avatar .svg-icon {
 width: 24px;
 height: 24px;
}


.group-invite-card .gic-body {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}
.group-invite-card .gic-title {
 font-size: 14.5px;
 font-weight: 700;
 color: var(--text-main);
 line-height: 1.3;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.group-invite-card .gic-subtitle {
 font-size: 12.5px;
 color: var(--text-dim);
 line-height: 1.4;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.group-invite-card .gic-description {
 font-size: 12px;
 color: var(--text-faint);
 line-height: 1.4;
 margin-top: 1px;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}


.group-invite-card .gic-arrow {
 flex-shrink: 0;
 color: var(--text-dim);
 display: flex;
 align-items: center;
 justify-content: center;
}
.group-invite-card .gic-arrow .svg-icon {
 width: 18px;
 height: 18px;
 transform: rotate(-45deg);
 transition: color 0.15s ease;
}
.group-invite-card:hover .gic-arrow {
 color: var(--accent-light);
}


.bubble.mine .group-invite-card {
 background: rgba(94, 168, 245, 0.18);
 border-color: rgba(94, 168, 245, 0.38);
}
.bubble.mine .group-invite-card:hover {
 background: rgba(94, 168, 245, 0.26);
}


.channel-msg-text .group-invite-card {
 max-width: 380px;
 margin: 8px 0;
}




.msg-reply-quote .group-invite-card {
 display: inline;
 background: none;
 border: none;
 padding: 0;
 margin: 0;
 color: inherit;
 max-width: none;
}
.msg-reply-quote .group-invite-card .gic-avatar,
.msg-reply-quote .group-invite-card .gic-arrow,
.msg-reply-quote .group-invite-card .gic-subtitle,
.msg-reply-quote .group-invite-card .gic-description {
 display: none;
}
.msg-reply-quote .group-invite-card .gic-body {
 display: inline;
}
.msg-reply-quote .group-invite-card .gic-title {
 font-size: inherit;
 font-weight: inherit;
 color: inherit;
 white-space: normal;
 overflow: visible;
 text-overflow: clip;
}
.msg-reply-quote .group-invite-card .gic-title::before {
 content: '👥 ';
}







.mention-card {
 display: flex;
 align-items: center;
 gap: 11px;
 margin: 6px 0 2px;
 padding: 11px 13px;
 background: rgba(94, 168, 245, 0.10);
 border: 1px solid rgba(94, 168, 245, 0.25);
 border-radius: 12px;
 text-decoration: none;
 color: var(--text-main);
 cursor: pointer;
 transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
 max-width: 320px;
 box-sizing: border-box;
}
.mention-card:hover,
.mention-card:focus {
 background: rgba(94, 168, 245, 0.18);
 border-color: rgba(94, 168, 245, 0.45);
 text-decoration: none;
}
.mention-card:active {
 transform: scale(0.98);
}


.mention-card .mc-avatar {
 flex-shrink: 0;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: linear-gradient(135deg, #5ea8f5, #2481cc);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 overflow: hidden;
 box-shadow: 0 3px 8px rgba(36, 129, 204, 0.30);
}
.mention-card .mc-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.mention-card .mc-avatar.mc-avatar--letter {
 font-size: 18px;
 font-weight: 700;
}


.mention-card .mc-body {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}
.mention-card .mc-body.mc-body--single {
 justify-content: center;
}
.mention-card .mc-title {
 font-size: 14.5px;
 font-weight: 700;
 color: var(--text-main);
 line-height: 1.3;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.mention-card .mc-subtitle {
 font-size: 12.5px;
 color: var(--text-dim);
 line-height: 1.4;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.mention-card .mc-description {
 font-size: 12px;
 color: #ffffff;
 line-height: 1.4;
 margin-top: 1px;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}


.bubble.mine .mention-card {
 background: rgba(94, 168, 245, 0.18);
 border-color: rgba(94, 168, 245, 0.38);
}
.bubble.mine .mention-card:hover {
 background: rgba(94, 168, 245, 0.26);
}


.channel-msg-text .mention-card {
 max-width: 380px;
 margin: 8px 0;
}




.msg-reply-quote .mention-card {
 display: inline;
 background: none;
 border: none;
 padding: 0;
 margin: 0;
 color: inherit;
 max-width: none;
}
.msg-reply-quote .mention-card .mc-avatar,
.msg-reply-quote .mention-card .mc-subtitle,
.msg-reply-quote .mention-card .mc-description {
 display: none;
}
.msg-reply-quote .mention-card .mc-body {
 display: inline;
}
.msg-reply-quote .mention-card .mc-title {
 font-size: inherit;
 font-weight: inherit;
 color: inherit;
 white-space: normal;
 overflow: visible;
 text-overflow: clip;
}
.msg-reply-quote .mention-card--user .mc-title::before {
 content: '👤 ';
}
.msg-reply-quote .mention-card--channel .mc-title::before {
 content: '📢 ';
}


.bubble.has-attachment { padding-bottom: 8px; }

.msg-attachment {
 display: block;
 margin: -9px -13px 8px;
 overflow: hidden;
}
.msg-attachment-image,
.msg-attachment-video {
 border-radius: var(--radius-lg) var(--radius-lg) 0 0;
 overflow: hidden;
 position: relative;
 max-width: 280px;
}
.msg-attachment-image img,
.msg-attachment-video video {
 display: block;
 width: 100%;
 height: auto;
 max-height: 360px;
 object-fit: contain;
 cursor: pointer;
 background: #000;
}




.msg-attachment.uploading img,
.msg-attachment.uploading video {
 filter: brightness(0.55);
 cursor: default;
 pointer-events: none;
}

.upload-overlay {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 2;
}

.upload-progress-circle {
 position: relative;
 width: 54px;
 height: 54px;
 border-radius: 50%;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 pointer-events: auto;
}

.upload-progress-ring {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 --pct: 0;
 background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255,255,255,0.28) 0);
 -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
 mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
 transition: background 0.12s linear;
}



.upload-progress-ring.indeterminate {
 background: conic-gradient(#fff 0 22%, rgba(255,255,255,0.28) 22% 100%);
 animation: uploadSpin 0.85s linear infinite;
 transition: none;
}

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

.upload-progress-x {
 position: relative;
 z-index: 1;
 width: 20px;
 height: 20px;
 color: #fff;
}

.msg-attachment-audio {
 margin: 0 0 6px;
 position: relative;
 display: flex;
 align-items: center;
 gap: 8px;
}
.msg-attachment-audio audio {
 width: 100%;
 max-width: 260px;
 height: 38px;
}


.attach-download-btn {
 position: absolute;
 top: 8px;
 left: 8px;
 width: 30px;
 height: 30px;
 border: none;
 border-radius: 50%;
 background: rgba(0,0,0,0.55);
 color: #fff;
 font-size: 14px;
 line-height: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 backdrop-filter: blur(2px);
}
.attach-download-btn:hover { background: rgba(0,0,0,0.75); }
.attach-download-btn-audio {
 position: static;
 width: 28px;
 height: 28px;
 flex-shrink: 0;
 background: rgba(255,255,255,0.12);
}

.msg-attachment-file {
 display: flex;
 align-items: center;
 gap: 10px;
 background: rgba(255,255,255,0.07);
 border-radius: var(--radius-md);
 padding: 10px 12px;
 margin-bottom: 6px;
 text-decoration: none;
 color: inherit;
 cursor: pointer;
}
.msg-attachment-file:hover { background: rgba(255,255,255,0.11); }
.msg-attachment-file .file-icon { font-size: 26px; flex-shrink: 0; }
.msg-attachment-file .file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-attachment-file .file-name {
 font-size: 13.5px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 max-width: 200px;
}
.msg-attachment-file .file-size { font-size: 11.5px; color: rgba(255,255,255,0.6); margin-top: 1px; }
.msg-attachment-file .file-download-icon { font-size: 15px; opacity: 0.8; flex-shrink: 0; }


.msg-location {
 display: block;
 margin: -9px -13px 6px;
 text-decoration: none;
 color: inherit;
}
.msg-location-preview {
 position: relative;
 width: 100%;
 height: 130px;
 overflow: hidden;
 border-radius: var(--radius-lg) var(--radius-lg) 0 0;
 background: linear-gradient(135deg, #2b3a45, #1c2733);
}
.msg-location-preview img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.msg-location-preview.map-fallback img { display: none; }
.msg-location-pin {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -100%);
 font-size: 30px;
 filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
.msg-location-info {
 display: flex;
 flex-direction: column;
 gap: 1px;
 padding: 8px 4px 2px;
}
.msg-location-title { font-size: 13.5px; font-weight: 600; }
.msg-location-sub { font-size: 11.5px; color: rgba(255,255,255,0.6); }

.date-sep {
 align-self: center;
 background: rgba(255,255,255,0.06);
 color: var(--text-dim);
 font-size: 11.5px;
 padding: 5px 14px;
 border-radius: 12px;
 margin: 14px 0;
}

.empty-chat {
 margin: auto;
 text-align: center;
 color: var(--text-dim);
 font-size: 14px;
 line-height: 1.9;
 padding: 40px;
}
.empty-chat span { font-size: 12.5px; color: var(--text-faint); }

.typing-indicator {
 align-self: flex-end;
 display: flex;
 gap: 4px;
 padding: 10px 14px;
 background: var(--bubble-theirs);
 border-radius: var(--radius-lg);
 border-bottom-right-radius: 4px;
 width: fit-content;
}
.typing-indicator span {
 width: 6px; height: 6px; border-radius: 50%;
 background: var(--text-dim);
 animation: typingBounce 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
 0%, 60%, 100% { transform: translateY(0); opacity: .5; }
 30% { transform: translateY(-4px); opacity: 1; }
}

.chat-input-bar {
 display: flex;
 align-items: flex-end;
 gap: 4px;
 margin: 0 10px 10px;
 padding: 6px 8px;
 background: transparent;
 background-color: transparent;
 box-shadow: none;
}

.chat-input-bar input {
 flex: 1;
 background: transparent;
 color: #1c2733;
 padding: 10px 8px;
 border-radius: 22px;
 font-size: 14.5px;
}
.chat-input-bar input::placeholder { color: #8b98a3; }

.chat-input-bar .composer-textarea-wrap {
 flex: 1;
 min-width: 0;
 background: #ffffff;
 border: none;
 border-radius: 22px;
 padding: 0 10px;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.chat-input-bar textarea,
.chat-input-bar .composer-input {
 flex: 1;
 min-width: 0;
 width: 100%;
 background: transparent;
 color: #1c2733;
 padding: 10px 6px;
 font-size: 14.5px;
 border: none;
 outline: none;
 resize: none;
 overflow-y: auto;
 max-height: 140px;
 line-height: 1.5;
 font-family: inherit;
}
.chat-input-bar textarea::placeholder { color: #8b98a3; }
.chat-input-bar .composer-input {
 white-space: pre-wrap;
 word-break: break-word;
}
.chat-input-bar .composer-input:empty::before {
 content: attr(data-placeholder);
 color: #8b98a3;
 pointer-events: none;
}
.chat-input-bar .composer-input .emoji-img {
 vertical-align: -4px;
}

.icon-btn {
 font-size: 21px;
 color: var(--text-dim);
 padding: 6px;
 border-radius: 50%;
 transition: color .15s, background .15s;
}
.icon-btn:hover { color: var(--accent-light); background: var(--bg-hover); }

.chat-input-bar .icon-btn {
 flex: none;
 width: 36px;
 height: 36px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 background: #ffffff;
 color: #1a1a2e;
}
.chat-input-bar .icon-btn:hover { color: #1a1a2e; background: #f5f5f5; }

.send-btn {
 width: 42px;
 height: 42px;
 border-radius: 50%;
 background: var(--accent-grad);
 color: #fff;
 font-size: 18px;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 14px rgba(36,129,204,0.35);
 transition: transform .1s;
 flex: none;
}
.send-btn:active { transform: scale(0.92); }

@media (min-width: 481px) {
 .app-shell { max-width: none; box-shadow: none; border-inline: none; }
}






.pinned-bar {
 display: none;
 align-items: center;
 gap: 10px;
 padding: 9px 16px;
 background: var(--bg-panel);
 border-bottom: 1px solid var(--border-soft);
 cursor: pointer;
 position: sticky;
 top: 57px;
 z-index: 4;
}
.pinned-bar.show { display: flex; }
.pinned-bar .pin-bar-icon { color: var(--accent-light); font-size: 15px; flex-shrink: 0; font-style: normal; }
.pinned-bar .pin-bar-text { flex: 1; min-width: 0; font-size: 13px; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-bar .pin-bar-label { font-size: 10.5px; color: var(--accent-light); display: block; margin-bottom: 1px; }
.pinned-bar .pin-bar-close { color: var(--text-dim); font-size: 17px; padding: 4px; flex-shrink: 0; font-style: normal; }
.pinned-bar .pin-bar-close:hover { color: var(--danger); }


.msg-fwd-label {
 font-size: 11px;
 color: var(--accent-light);
 font-weight: 600;
 margin-bottom: 3px;
 opacity: 0.9;
}
.msg-reply-quote {
 background: rgba(255,255,255,0.08);
 border-right: 3px solid var(--accent-light);
 border-radius: 6px;
 padding: 5px 9px;
 margin-bottom: 5px;
 font-size: 12.5px;
 line-height: 1.5;
 cursor: pointer;
}
.msg-reply-quote .reply-quote-name { display: block; color: var(--accent-light); font-weight: 600; font-size: 11.5px; margin-bottom: 1px; }
.msg-reply-quote .reply-quote-text { color: rgba(255,255,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.bubble .edited-label { font-size: 10px; color: rgba(255,255,255,0.5); }

.msg-reaction-pill {
 display: none;
 width: fit-content;
 max-width: 100%;
 box-sizing: border-box;
 background: rgba(255,255,255,0.16);
 border-radius: 11px;
 padding: 2px 9px;
 font-size: 13px;
 margin-top: 4px;
}
.msg-reaction-pill.show { display: block; }







.reply-preview-bar {
 display: flex;
 align-items: center;
 gap: 10px;
 max-height: 0;
 opacity: 0;
 overflow: hidden;
 pointer-events: none;
 transition:
 max-height .5s cubic-bezier(.16,1,.3,1),
 opacity .4s ease-out,
 padding-top .5s cubic-bezier(.16,1,.3,1),
 padding-bottom .5s cubic-bezier(.16,1,.3,1);
}
.reply-preview-bar.show {
 max-height: 60px;
 opacity: 1;
 pointer-events: auto;
 padding-top: 8px;
 padding-bottom: 6px;
 border-bottom: 1px solid rgba(0,0,0,0.07);
}
.reply-preview-bar .rp-icon { color: var(--accent-light); font-size: 18px; flex-shrink: 0; display: flex; align-items: center; }
.reply-preview-body { flex: 1; min-width: 0; }
.reply-preview-title { font-size: 12.5px; color: var(--accent-light); font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-preview-text { font-size: 12.5px; color: #5b6672; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview-close { color: #98a3ad; font-size: 18px; padding: 6px; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: background .15s ease, color .15s ease; }
.reply-preview-close:hover { color: var(--danger); background: rgba(0,0,0,.06); }



.bubble { cursor: pointer; }
.bubble.active-selection { filter: brightness(1.18); }


.msgmenu-overlay {
 display: none;
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.35);
 z-index: 40;
 opacity: 0;
 transition: opacity .15s;
}
.msgmenu-overlay.open { display: block; opacity: 1; }


.quick-reaction-bar {
 display: none;
 position: fixed;
 z-index: 42;
 align-items: center;
 gap: 3px;
 background: var(--bg-panel-light);
 border: 1px solid var(--border-soft);
 border-radius: 26px;
 padding: 6px 8px;
 box-shadow: 0 10px 30px rgba(0,0,0,0.45);
 max-width: 92vw;
 animation: msgmenuPop .15s ease-out;
}
.quick-reaction-bar .qr-emoji {
 font-size: 21px;
 padding: 3px;
 border-radius: 50%;
 transition: transform .1s;
 line-height: 1;
}
.quick-reaction-bar .qr-emoji:hover { transform: scale(1.2); }
.quick-reaction-bar .qr-more {
 color: var(--text-dim);
 font-size: 19px;
 padding: 5px;
 border-radius: 50%;
 flex-shrink: 0;
}
.quick-reaction-bar .qr-more:hover { background: var(--bg-hover); color: var(--text-main); }

@keyframes msgmenuPop {
 from { opacity: 0; transform: translateY(6px) scale(.94); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}


.reaction-grid-popup {
 display: none;
 position: fixed;
 z-index: 45;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 grid-template-columns: repeat(7, 1fr);
 gap: 4px;
 background: var(--bg-panel-light);
 border: 1px solid var(--border-soft);
 border-radius: var(--radius-md);
 padding: 12px;
 width: min(320px, 88vw);
 max-height: 60vh;
 overflow-y: auto;
 box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.reaction-grid-popup .rg-emoji {
 font-size: 22px;
 text-align: center;
 padding: 7px 0;
 border-radius: 8px;
 cursor: pointer;
}
.reaction-grid-popup .rg-emoji:hover { background: var(--bg-hover); }


.emoji-img {
 width: 20px;
 height: 20px;
 vertical-align: -4px;
 display: inline-block;
 object-fit: contain;
}
.quick-reaction-bar .qr-emoji .emoji-img,
.reaction-grid-popup .rg-emoji .emoji-img {
 width: 24px;
 height: 24px;
 vertical-align: middle;
}
.msg-reaction-pill .emoji-img {
 width: 15px;
 height: 15px;
 vertical-align: -3px;
}


.emoji-picker-panel {
 display: flex;
 position: fixed;
 z-index: 46;
 left: 12px;
 background: var(--bg-panel-light);
 border: 1px solid var(--border-soft);
 border-radius: var(--radius-md);
 box-shadow: 0 20px 60px rgba(0,0,0,0.5);
 width: min(360px, calc(100vw - 24px));
 height: min(420px, 60vh);
 flex-direction: column;
 overflow: hidden;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(14px);
 transition: transform .2s ease, opacity .2s ease, visibility .2s;
}
.emoji-picker-panel.open {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateY(0);
}





.emoji-picker-dock {
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
 overflow: hidden;
 max-height: 0;
 background: var(--bg-panel-light);
 border-top: 1px solid var(--border-soft);
 transition: max-height .28s cubic-bezier(.22,.68,.28,1);
}
.emoji-picker-dock.open {
 max-height: min(360px, 45vh);
}
.emoji-picker-dock .emoji-picker-search,
.emoji-picker-dock .emoji-picker-tabs,
.emoji-picker-dock .emoji-picker-grid {
 flex-shrink: 0;
}
.emoji-picker-dock .emoji-picker-grid {
 flex: 1;
 min-height: 0;
}
.emoji-picker-search {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 12px;
 border-bottom: 1px solid var(--border-soft);
 color: var(--text-dim);
 flex-shrink: 0;
}
.emoji-picker-search input {
 flex: 1;
 background: var(--bg-input);
 border: none;
 border-radius: var(--radius-sm);
 padding: 7px 10px;
 color: var(--text-main);
 font-size: 13px;
}
.emoji-picker-search input:focus { outline: 1px solid var(--accent); }
.emoji-picker-tabs {
 display: flex;
 gap: 2px;
 padding: 6px 8px;
 overflow-x: auto;
 border-bottom: 1px solid var(--border-soft);
 flex-shrink: 0;
}
.ep-tab {
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 7px 9px;
 border-radius: var(--radius-sm);
 cursor: pointer;
 color: var(--text-dim);
}
.ep-tab svg { display: block; }
.ep-tab.active { color: var(--text-main); background: var(--bg-hover); }
.emoji-picker-grid {
 flex: 1;
 overflow-y: auto;
 padding: 8px;
}
.ep-grid-inner {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
}
.ep-cell {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 5px;
 border-radius: var(--radius-sm);
 cursor: pointer;
}
.ep-cell:hover { background: var(--bg-hover); }
.ep-cell img,
.ep-cell .emoji-svg {
 width: 26px;
 height: 26px;
 pointer-events: none;
}
.ep-empty {
 padding: 30px 10px;
 text-align: center;
 color: var(--text-dim);
 font-size: 13px;
}


.msgmenu-panel {
 display: none;
 position: fixed;
 z-index: 42;
 min-width: 200px;
 max-width: 92vw;
 background: var(--bg-panel-light);
 border: 1px solid var(--border-soft);
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: 0 14px 40px rgba(0,0,0,0.5);
 animation: msgmenuPop .15s ease-out;
}
.msgmenu-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 font-size: 14px;
 color: var(--text-main);
 transition: background .1s;
}
.msgmenu-item:hover { background: var(--bg-hover); }
.msgmenu-item .mm-icon { font-size: 17px; color: var(--text-dim); width: 20px; text-align: center; }
.msgmenu-item.danger { color: #f19b9b; }
.msgmenu-item.danger .mm-icon { color: var(--danger); }


.chatmenu-overlay {
 display: none;
 position: fixed;
 top: 0; right: 0; bottom: 0; left: 0;
 background: rgba(0,0,0,0.35);
 z-index: 40;
 opacity: 0;
 transition: opacity .15s ease;
}
.chatmenu-overlay.open { opacity: 1; }

.chatmenu-panel {
 display: none;
 position: fixed;
 z-index: 42;
 min-width: 220px;
 max-width: 92vw;
 background: var(--bg-panel-light);
 border: 1px solid var(--border-soft);
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.chatmenu-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 font-size: 14px;
 color: var(--text-main);
}
.chatmenu-item .cm-icon { color: var(--text-dim); width: 20px; display: flex; }
.chatmenu-item .cm-label { flex: 1; min-width: 0; }

.cm-switch {
 position: relative;
 width: 42px;
 height: 24px;
 border: none;
 border-radius: 999px;
 background: var(--bg-input);
 cursor: pointer;
 padding: 0;
 flex-shrink: 0;
 transition: background .18s ease;
}
.cm-switch.on { background: var(--accent); }
.cm-switch-knob {
 position: absolute;
 top: 3px;
 right: 3px;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: #fff;
 transition: transform .18s ease;
}
.cm-switch.on .cm-switch-knob { transform: translateX(-18px); }


.chatmenu-item-hint {
 padding: 4px 16px 12px;
 font-size: 11.5px;
 color: var(--text-faint);
 line-height: 1.6;
}


.content-lock-banner {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 14px;
 background: rgba(230, 150, 30, 0.12);
 border-bottom: 1px solid rgba(230, 150, 30, 0.2);
 font-size: 12.5px;
 color: #e6a01e;
 line-height: 1.5;
 animation: fadeUp .3s ease;
}
.content-lock-banner .clb-icon {
 flex-shrink: 0;
 width: 18px;
 height: 18px;
 display: flex;
 align-items: center;
 color: #e6a01e;
}
.content-lock-banner .clb-icon svg { width: 16px; height: 16px; }
.content-lock-banner .clb-text {
 flex: 1;
 min-width: 0;
}


.content-locked-messages .bubble {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
}


.msg-attachment.content-locked {
 position: relative;
}
.msg-attachment-image.content-locked img {
 pointer-events: none; 
}
.msg-attachment-video.content-locked video {
 
}
.msg-attachment-file.content-locked {
 pointer-events: none;
 opacity: 0.8;
}


.content-locked-messages .bubble::after {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 background: transparent;
 pointer-events: none;
 z-index: 1;
}


.admin-view-bar + .content-lock-banner {
 margin-top: 0;
}


.delchoice-overlay {
 display: none;
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.55);
 z-index: 100;
 align-items: center;
 justify-content: center;
}
.delchoice-overlay.open { display: flex; }
.delchoice-box {
 width: min(320px, 88vw);
 background: var(--bg-panel-light);
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: 0 20px 60px rgba(0,0,0,0.5);
 animation: msgmenuPop .15s ease-out;
}
.delchoice-title { padding: 18px 18px 6px; font-size: 14.5px; color: var(--text-main); text-align: center; }
.delchoice-item {
 padding: 14px 18px;
 font-size: 14px;
 text-align: center;
 border-top: 1px solid var(--border-soft);
 color: var(--text-main);
 transition: background .1s;
}
.delchoice-item:hover { background: var(--bg-hover); }
.delchoice-item.danger { color: #f19b9b; }
.delchoice-item.cancel { color: var(--text-dim); font-weight: 600; }


.mini-toast {
 position: fixed;
 bottom: 90px;
 left: 50%;
 transform: translateX(-50%) translateY(10px);
 background: var(--bg-panel-light);
 color: var(--text-main);
 font-size: 13px;
 padding: 10px 18px;
 border-radius: 20px;
 box-shadow: 0 8px 24px rgba(0,0,0,0.4);
 z-index: 60;
 opacity: 0;
 transition: opacity .18s, transform .18s;
 pointer-events: none;
}
.mini-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }




.attach-menu-overlay {
 display: none;
 position: fixed;
 top: 0; right: 0; bottom: 0; left: 0;
 background: rgba(0,0,0,0.45);
 z-index: 50;
 opacity: 0;
 transition: opacity .2s;
}
.attach-menu-overlay.open { display: block; opacity: 1; }

.attach-menu-panel {
 display: none;
 position: fixed;
 z-index: 51;
 left: 50%;
 bottom: 0;
 width: min(480px, 100vw);
 transform: translate(-50%, 100%);
 background: var(--bg-panel-light);
 border-radius: 20px 20px 0 0;
 padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
 box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
 transition: transform .22s ease;
}
.attach-menu-panel.open { transform: translate(-50%, 0); }

.attach-menu-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px 6px;
}

.attach-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 cursor: pointer;
 user-select: none;
}
.attach-icon {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: transform .12s;
 box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.attach-item:active .attach-icon { transform: scale(0.9); }
.attach-icon svg { width: 25px; height: 25px; }
.attach-label { font-size: 12.5px; color: var(--text-main); }

.attach-icon-location { background: linear-gradient(135deg, #3ee6a4, #12b876); }
.attach-icon-file { background: linear-gradient(135deg, #e4ecef, #b9c7cd); }
.attach-icon-camera { background: linear-gradient(135deg, #3fcbf7, #1c8fe0); }
.attach-icon-gallery { background: linear-gradient(135deg, #ff8290, #e8455c); }
.attach-icon-video { background: linear-gradient(135deg, #8577f2, #5b3fd6); }
.attach-icon-music { background: linear-gradient(135deg, #ffa5a5, #f2777b); }
.attach-icon-poll { background: linear-gradient(135deg, #d6a3f5, #b06be0); }
.attach-icon-contact { background: linear-gradient(135deg, #ffbd63, #ff8a3d); }





.avatar-channel {
 background: linear-gradient(135deg, #6a5ef5, #9b59d0);
}

.avatar img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: cover;
}




.nm-options-box {
 background: var(--bg-panel);
 margin: 8px 12px 2px 12px;
 border-radius: var(--radius-lg);
 overflow: hidden;
}
.nm-option-row {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 13px 16px;
 cursor: pointer;
 transition: background .12s;
 border-bottom: 1px solid var(--border-soft);
 background: none;
 border-right: none;
 border-left: none;
 border-top: none;
 width: 100%;
 text-align: right;
 color: var(--text-main);
 font-family: 'Vazirmatn', sans-serif;
}
.nm-option-row:last-child { border-bottom: none; }
.nm-option-row:hover, .nm-option-row:active { background: var(--bg-hover); }
.nm-option-icon {
 width: 40px;
 height: 40px;
 border-radius: 13px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.nm-option-icon svg { width: 21px; height: 21px; }
.nm-option-icon.bg-blue { background: var(--accent-grad); }
.nm-option-icon.bg-green { background: linear-gradient(135deg, #3ee6a4, #12b876); }
.nm-option-text { font-size: 15px; font-weight: 600; }




.create-form-wrap {
 padding: 26px 20px 100px;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.create-avatar-upload {
 width: 96px;
 height: 96px;
 border-radius: 50%;
 background: linear-gradient(135deg, #3ee6a4, #12b876);
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 margin-bottom: 20px;
 flex-shrink: 0;
}
.create-avatar-upload.type-group { background: var(--accent-grad); }
.create-avatar-upload svg { width: 32px; height: 32px; position: relative; z-index: 1; }
.create-avatar-upload img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.create-avatar-upload input[type="file"] {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 cursor: pointer;
}
.create-form-field {
 width: 100%;
 max-width: 420px;
 margin-bottom: 16px;
}
.create-form-field label {
 font-size: 12.5px;
 color: var(--text-dim);
 display: block;
 margin-bottom: 6px;
}
.create-form-field input,
.create-form-field textarea {
 width: 100%;
 background: var(--bg-input);
 color: var(--text-main);
 border: none;
 border-radius: var(--radius-md);
 padding: 12px 14px;
 font-size: 14px;
 resize: none;
 font-family: 'Vazirmatn', sans-serif;
}
.create-form-field textarea { min-height: 72px; line-height: 1.7; }
.create-form-field .at-prefix-wrap { position: relative; }
.create-form-field .at-prefix-wrap input { padding-left: 14px; padding-right: 26px; }
.create-form-field .at-prefix-wrap span {
 position: absolute;
 right: 14px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--text-faint);
 font-size: 14px;
 pointer-events: none;
}
.create-form-hint {
 font-size: 12px;
 color: var(--text-faint);
 line-height: 1.8;
 margin-top: 6px;
 max-width: 420px;
 width: 100%;
}





.ch-create-header {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 14px 16px;
 background: var(--bg-panel);
 position: sticky;
 top: 0;
 z-index: 5;
}
.ch-create-header .back-btn {
 width: 30px;
 height: 30px;
 flex-shrink: 0;
}
.ch-create-header .ch-header-title {
 flex: 1;
 font-size: 16.5px;
 font-weight: 700;
 color: var(--text-main);
}
.ch-header-check {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 border: none;
 background: transparent;
 color: var(--accent-light);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 flex-shrink: 0;
 transition: background .15s, opacity .15s;
}
.ch-header-check svg { width: 22px; height: 22px; }
.ch-header-check svg path { stroke: var(--accent-light); }
.ch-header-check:hover { background: var(--bg-hover); }
.ch-header-check:disabled { opacity: .35; cursor: default; }
.ch-header-check:disabled:hover { background: transparent; }

.ch-create-body { padding: 22px 16px 30px; }

.ch-field-row {
 display: flex;
 align-items: flex-start;
 gap: 16px;
 border-bottom: 1px solid var(--border-soft);
 padding-bottom: 14px;
}
.ch-field-row + .ch-field-row { margin-top: 22px; }

.ch-field-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ch-field-main .ch-emoji-btn {
 flex-shrink: 0;
 width: 22px;
 height: 22px;
 border: none;
 background: transparent;
 padding: 0;
 color: var(--text-faint);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
}
.ch-field-main .ch-emoji-btn svg { width: 22px; height: 22px; }
.ch-field-main input,
.ch-field-main textarea {
 flex: 1;
 min-width: 0;
 background: transparent;
 border: none;
 color: var(--text-main);
 font-size: 16px;
 font-family: 'Vazirmatn', sans-serif;
 padding: 4px 0;
 resize: none;
 line-height: 1.6;
}
.ch-field-main textarea { min-height: 22px; max-height: 160px; }
.ch-field-main input::placeholder,
.ch-field-main textarea::placeholder { color: var(--text-faint); }
.ch-field-row.focused { border-color: var(--accent-light); }

.ch-avatar-circle {
 width: 58px;
 height: 58px;
 border-radius: 50%;
 background: var(--accent-grad);
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 flex-shrink: 0;
}
.ch-avatar-circle svg { width: 26px; height: 26px; position: relative; z-index: 1; }
.ch-avatar-circle img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.ch-avatar-circle input[type="file"] {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 cursor: pointer;
}

.ch-hint-text {
 font-size: 13px;
 color: var(--text-faint);
 line-height: 1.9;
 margin-top: 14px;
 padding: 0 2px;
}

.ch-section-label {
 font-size: 13px;
 color: var(--accent-light);
 font-weight: 600;
 margin: 30px 2px 4px;
}

.ch-at-wrap { display: flex; align-items: center; gap: 4px; flex: 1; }
.ch-at-wrap span { color: var(--text-faint); font-size: 16px; flex-shrink: 0; }
.ch-at-wrap input { direction: ltr; text-align: right; }

.create-fab-submit {
 position: fixed;
 bottom: 22px;
 left: 20px;
 width: 56px;
 height: 56px;
 border-radius: 50%;
 background: var(--accent-grad);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 border: none;
 cursor: pointer;
 box-shadow: 0 8px 22px rgba(36,129,204,0.5);
 z-index: 30;
 transition: transform .12s, filter .15s, opacity .15s;
}
.create-fab-submit:active { transform: scale(0.93); }
.create-fab-submit:disabled { opacity: 0.5; cursor: default; }
.create-fab-submit svg { width: 24px; height: 24px; }

.admin-view-banner {
 background: #4a3a12;
 color: #ffd77a;
 font-size: 13px;
 padding: 8px 14px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
}

.admin-view-banner a {
 color: #5ea8f5;
 text-decoration: underline;
 white-space: nowrap;
}


.ban-notice-bar {
 background: #3a1414;
 border-right: 3px solid var(--danger, #e05a4e);
 color: #ff9d94;
 font-size: 13px;
 padding: 10px 14px;
 display: flex;
 align-items: center;
 gap: 10px;
}
.ban-notice-icon { flex-shrink: 0; display: flex; }
.ban-notice-text { flex: 1; line-height: 1.5; }
.ban-notice-title { color: #ff5c4d; font-weight: 700; margin-left: 6px; }
.ban-notice-close { flex-shrink: 0; cursor: pointer; color: #ff9d94; opacity: .8; display: flex; }
.ban-notice-close:hover { opacity: 1; }

.channel-subtitle { font-size: 12.5px; color: var(--text-dim); }

.verified-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 17px;
 height: 17px;
 vertical-align: -3px;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='20' y1='10' x2='85' y2='95' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2358C4F5'/%3E%3Cstop offset='0.5' stop-color='%232E86E8'/%3E%3Cstop offset='1' stop-color='%230E4FC4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 90.00,50.00 C 91.40,50.87 94.16,52.02 94.11,52.89 C 94.05,53.76 91.16,54.54 89.66,55.22 C 88.16,55.90 85.28,56.13 85.11,56.98 C 84.94,57.84 87.51,59.15 88.64,60.35 C 89.76,61.56 92.13,63.38 91.85,64.21 C 91.57,65.03 88.58,65.04 86.96,65.31 C 85.33,65.58 82.49,65.05 82.11,65.83 C 81.72,66.62 83.87,68.55 84.64,70.00 C 85.41,71.45 87.24,73.83 86.75,74.56 C 86.27,75.28 83.37,74.51 81.73,74.35 C 80.09,74.19 77.49,72.95 76.92,73.60 C 76.34,74.26 77.91,76.68 78.28,78.28 C 78.66,79.89 79.80,82.66 79.14,83.23 C 78.49,83.81 75.89,82.31 74.35,81.73 C 72.81,81.16 70.61,79.28 69.89,79.77 C 69.16,80.25 70.06,83.00 70.00,84.64 C 69.94,86.29 70.33,89.26 69.55,89.64 C 68.77,90.03 66.65,87.91 65.31,86.96 C 63.97,86.00 62.33,83.62 61.51,83.90 C 60.68,84.18 60.83,87.06 60.35,88.64 C 59.87,90.21 59.48,93.18 58.62,93.35 C 57.77,93.52 56.27,90.93 55.22,89.66 C 54.17,88.39 53.21,85.67 52.34,85.72 C 51.47,85.78 50.87,88.60 50.00,90.00 C 49.13,91.40 47.98,94.16 47.11,94.11 C 46.24,94.05 45.46,91.16 44.78,89.66 C 44.10,88.16 43.87,85.28 43.02,85.11 C 42.16,84.94 40.85,87.51 39.65,88.64 C 38.44,89.76 36.62,92.13 35.79,91.85 C 34.97,91.57 34.96,88.58 34.69,86.96 C 34.42,85.33 34.95,82.49 34.17,82.11 C 33.38,81.72 31.45,83.87 30.00,84.64 C 28.55,85.41 26.17,87.24 25.44,86.75 C 24.72,86.27 25.49,83.37 25.65,81.73 C 25.81,80.09 27.05,77.49 26.40,76.92 C 25.74,76.34 23.32,77.91 21.72,78.28 C 20.11,78.66 17.34,79.80 16.77,79.14 C 16.19,78.49 17.69,75.89 18.27,74.35 C 18.84,72.81 20.72,70.61 20.23,69.89 C 19.75,69.16 17.00,70.06 15.36,70.00 C 13.71,69.94 10.74,70.33 10.36,69.55 C 9.97,68.77 12.09,66.65 13.04,65.31 C 14.00,63.97 16.38,62.33 16.10,61.51 C 15.82,60.68 12.94,60.83 11.36,60.35 C 9.79,59.87 6.82,59.48 6.65,58.62 C 6.48,57.77 9.07,56.27 10.34,55.22 C 11.61,54.17 14.33,53.21 14.28,52.34 C 14.22,51.47 11.40,50.87 10.00,50.00 C 8.60,49.13 5.84,47.98 5.89,47.11 C 5.95,46.24 8.84,45.46 10.34,44.78 C 11.84,44.10 14.72,43.87 14.89,43.02 C 15.06,42.16 12.49,40.85 11.36,39.65 C 10.24,38.44 7.87,36.62 8.15,35.79 C 8.43,34.97 11.42,34.96 13.04,34.69 C 14.67,34.42 17.51,34.95 17.89,34.17 C 18.28,33.38 16.13,31.45 15.36,30.00 C 14.59,28.55 12.76,26.17 13.25,25.44 C 13.73,24.72 16.63,25.49 18.27,25.65 C 19.91,25.81 22.51,27.05 23.08,26.40 C 23.66,25.74 22.09,23.32 21.72,21.72 C 21.34,20.11 20.20,17.34 20.86,16.77 C 21.51,16.19 24.11,17.69 25.65,18.27 C 27.19,18.84 29.39,20.72 30.11,20.23 C 30.84,19.75 29.94,17.00 30.00,15.36 C 30.06,13.71 29.67,10.74 30.45,10.36 C 31.23,9.97 33.35,12.09 34.69,13.04 C 36.03,14.00 37.67,16.38 38.49,16.10 C 39.32,15.82 39.17,12.94 39.65,11.36 C 40.13,9.79 40.52,6.82 41.38,6.65 C 42.23,6.48 43.73,9.07 44.78,10.34 C 45.83,11.61 46.79,14.33 47.66,14.28 C 48.53,14.22 49.13,11.40 50.00,10.00 C 50.87,8.60 52.02,5.84 52.89,5.89 C 53.76,5.95 54.54,8.84 55.22,10.34 C 55.90,11.84 56.13,14.72 56.98,14.89 C 57.84,15.06 59.15,12.49 60.35,11.36 C 61.56,10.24 63.38,7.87 64.21,8.15 C 65.03,8.43 65.04,11.42 65.31,13.04 C 65.58,14.67 65.05,17.51 65.83,17.89 C 66.62,18.28 68.55,16.13 70.00,15.36 C 71.45,14.59 73.83,12.76 74.56,13.25 C 75.28,13.73 74.51,16.63 74.35,18.27 C 74.19,19.91 72.95,22.51 73.60,23.08 C 74.26,23.66 76.68,22.09 78.28,21.72 C 79.89,21.34 82.66,20.20 83.23,20.86 C 83.81,21.51 82.31,24.11 81.73,25.65 C 81.16,27.19 79.28,29.39 79.77,30.11 C 80.25,30.84 83.00,29.94 84.64,30.00 C 86.29,30.06 89.26,29.67 89.64,30.45 C 90.03,31.23 87.91,33.35 86.96,34.69 C 86.00,36.03 83.62,37.67 83.90,38.49 C 84.18,39.32 87.06,39.17 88.64,39.65 C 90.21,40.13 93.18,40.52 93.35,41.38 C 93.52,42.23 90.93,43.73 89.66,44.78 C 88.39,45.83 85.67,46.79 85.72,47.66 C 85.78,48.53 88.60,49.13 90.00,50.00 Z' fill='url(%23g)'/%3E%3Cpath d='M31 51.5 L44 64 L70 36' fill='none' stroke='white' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 flex-shrink: 0;
}
.verified-badge .svg-icon { display: none; }

.channel-join-btn {
 background: var(--accent-grad);
 color: #fff;
 border-radius: var(--radius-md);
 padding: 8px 18px;
 font-size: 13.5px;
 font-weight: 600;
 cursor: pointer;
 border: none;
}

.channel-join-btn.joined {
 background: var(--bg-input);
 color: var(--text-dim);
}

.channel-msg {
 background: var(--bubble-theirs);
 border-radius: var(--radius-lg);
 border-bottom-right-radius: 4px;
 padding: 9px 13px 8px;
 margin: 3px 14px;
 







 width: fit-content;
 max-width: 78%;
 min-width: 0;
 box-sizing: border-box;
 align-self: flex-end;
 overflow-wrap: break-word;
 word-wrap: break-word;
 word-break: break-word;
 white-space: pre-wrap;
 line-height: 1.65;
 font-size: 14.5px;
 color: #fff;
}





.channel-msg-text {
 max-width: 100%;
 overflow-wrap: break-word;
 word-wrap: break-word;
 word-break: break-word;
}

.channel-msg-attachment {
 max-width: 100%;
 overflow-wrap: break-word;
 word-wrap: break-word;
 word-break: break-word;
}
.channel-msg-attachment a {
 display: inline-block;
 max-width: 100%;
 overflow-wrap: break-word;
 word-wrap: break-word;
 word-break: break-word;
 color: var(--accent-light);
}

.channel-msg .channel-msg-meta {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 6px;
 font-size: 11px;
 color: var(--text-dim);
 max-width: 100%;
}
.channel-msg .channel-msg-meta .svg-icon { width: 13px; height: 13px; flex-shrink: 0; }

.channel-readonly-notice {
 text-align: center;
 color: var(--text-faint);
 font-size: 12.5px;
 padding: 10px;
}

.channel-composer-hint {
 text-align: center;
 color: var(--text-dim);
 font-size: 12px;
 padding: 6px 10px;
}




.search-page-header {
 display: flex;
 align-items: flex-end;
 gap: 10px;
 padding: 12px 16px;
 background: var(--bg-panel);
 border-bottom: 1px solid var(--border-soft);
 position: sticky;
 top: 0;
 z-index: 5;
}
.search-page-header input,
.search-page-header textarea {
 flex: 1;
 background: var(--bg-input);
 color: var(--text-main);
 padding: 10px 16px;
 border-radius: 22px;
 font-size: 14px;
 border: none;
}
.search-page-header input::placeholder,
.search-page-header textarea::placeholder { color: var(--text-faint); }
.search-page-header textarea {
 resize: none;
 overflow-y: auto;
 max-height: 140px;
 line-height: 1.5;
 font-family: inherit;
}




.avatar-saved {
 background: var(--accent-grad);
 font-size: 20px;
}




.app-shell.has-bottom-nav { padding-bottom: 78px; }

.bottom-nav {
 position: fixed;
 bottom: 14px;
 left: 50%;
 transform: translateX(-50%);
 width: calc(100% - 24px);
 max-width: 456px;
 display: flex;
 background: var(--bg-panel);
 border: 1px solid var(--border-soft);
 border-radius: 999px;
 box-shadow: 0 6px 20px rgba(0,0,0,.28);
 z-index: 10;
 overflow: hidden;
}
.bottom-nav-item {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 3px;
 padding: 8px 4px 10px;
 color: var(--text-dim);
 font-size: 11.5px;
 transition: color .15s;
}
.bottom-nav-item .bn-icon { font-size: 20px; line-height: 1; }
.bottom-nav-item.active { color: var(--accent-light); }


.bn-avatar {
 width: 22px;
 height: 22px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 line-height: 1;
}
.bn-avatar.bn-avatar-img img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: cover;
 display: block;
}
.bn-avatar.bn-avatar-fallback { font-size: 20px; }
.bottom-nav-item.active .bn-avatar.bn-avatar-img {
 box-shadow: 0 0 0 2px var(--accent-light);
}




.form-msg {
 padding: 10px 14px;
 border-radius: var(--radius-md);
 font-size: 13px;
 margin-bottom: 14px;
}
.form-msg-error { background: rgba(224,85,85,0.15); color: #f19b9b; }
.form-msg-success { background: rgba(77,196,106,0.15); color: #8fe0a6; }

.profile-input {
 background: var(--bg-input);
 color: var(--text-main);
 padding: 12px 16px;
 border-radius: var(--radius-md);
 font-size: 14px;
 border: none;
}

.profile-save-btn {
 background: var(--accent-grad);
 color: #fff;
 border: none;
 padding: 12px;
 border-radius: var(--radius-md);
 font-size: 14px;
 font-weight: 700;
 cursor: pointer;
}




.username-share-box {
 background: var(--bg-panel-light);
 border: 1px solid var(--border-soft);
 border-radius: var(--radius-md);
 padding: 12px 14px;
}
.username-share-label { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; line-height: 1.6; }
.username-share-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 background: var(--bg-input);
 border-radius: var(--radius-sm);
 padding: 9px 12px;
}
.username-share-row span { font-weight: 700; font-size: 14px; direction: ltr; }
.copy-username-btn {
 background: var(--accent-grad);
 color: #fff;
 border: none;
 padding: 7px 14px;
 border-radius: 18px;
 font-size: 12.5px;
 font-weight: 600;
 cursor: pointer;
 white-space: nowrap;
 flex-shrink: 0;
 transition: filter .15s;
}
.copy-username-btn:active { filter: brightness(1.15); }






.fab-layer {
 position: fixed;
 bottom: 100px;
 left: 50%;
 transform: translateX(-50%);
 width: 100%;
 max-width: 480px;
 height: 0;
 pointer-events: none;
 z-index: 20;
}
.fab-new-message {
 position: absolute;
 left: 18px;
 bottom: 0;
 width: 54px;
 height: 54px;
 border-radius: 50%;
 background: var(--accent-grad);
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 22px rgba(36,129,204,0.5);
 pointer-events: auto;
 color: #fff;
 transition: transform .12s, filter .15s;
}
.fab-new-message:active { transform: scale(0.93); }
.fab-new-message:hover { filter: brightness(1.08); }
.fab-new-message svg { width: 24px; height: 24px; }




.section-label {
 padding: 14px 18px 8px;
 font-size: 12px;
 color: var(--text-dim);
 font-weight: 600;
}





.user-row { padding: 11px 18px; gap: 12px; }
.avatar { width: 46px; height: 46px; min-width: 46px; font-size: 17.5px; }
.avatar.small { width: 36px; height: 36px; font-size: 14px; min-width: 36px; }
.uname { font-size: 14.5px; }
.brand-bar { padding: 13px 18px 9px; }
.brand-title { font-size: 17.5px; }





.cp-search-section {
 background: var(--bg-panel);
 padding: 2px 16px 14px;
}
.cp-search-bar {
 width: 100%;
 background: var(--bg-input);
 border-radius: 25px;
 padding: 10px 16px;
 display: flex;
 align-items: center;
 gap: 10px;
 color: var(--text-dim);
}
.cp-search-bar .svg-icon { width: 18px; height: 18px; flex-shrink: 0; }
.cp-search-bar input {
 flex: 1;
 min-width: 0;
 background: transparent;
 border: none;
 outline: none;
 color: var(--text-main);
 font-size: 14px;
 font-family: 'Vazirmatn', sans-serif;
}
.cp-search-bar input::placeholder { color: var(--text-dim); }

.cp-options-box {
 background: var(--bg-panel);
 margin: 0 16px 12px;
 border-radius: 14px;
 overflow: hidden;
}
.cp-option-item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 13px 16px;
 cursor: pointer;
 transition: background .12s;
}
.cp-option-item:hover { background: var(--bg-hover); }
.cp-option-right { display: flex; align-items: center; gap: 14px; }
.cp-option-icon {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 flex-shrink: 0;
}
.cp-option-icon .svg-icon { width: 18px; height: 18px; }
.cp-option-icon.bg-blue { background-color: #2fa6ee; }
.cp-option-icon.bg-green { background-color: #5bbd57; }
.cp-option-text { font-size: 15px; color: var(--text-main); }

.cp-sort-label {
 font-size: 12.5px;
 color: var(--accent-light);
 font-weight: 500;
 padding: 4px 16px 6px;
 display: block;
}

#cpScroll { flex: 1; overflow-y: auto; padding-bottom: 90px; }

.cp-contact-row {
 display: flex;
 align-items: center;
 gap: 4px;
 padding: 0 8px 0 16px;
}
.cp-contact-link {
 display: flex;
 align-items: center;
 gap: 14px;
 flex: 1;
 min-width: 0;
 padding: 9px 0 9px 16px;
 text-decoration: none;
 color: inherit;
 border-bottom: 1px solid var(--border-soft);
}
.cp-contact-row:last-child .cp-contact-link { border-bottom: none; }
.cp-avatar {
 position: relative;
 width: 48px;
 height: 48px;
 min-width: 48px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 19px;
 font-weight: 700;
 color: #fff;
 flex-shrink: 0;
}



.cp-avatar.avatar-has-img {
 background: none;
 padding: 0;
}
.cp-avatar.avatar-has-img img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: cover;
}
.cp-contact-info { flex: 1; min-width: 0; }
.cp-contact-name {
 font-size: 15.5px;
 font-weight: 500;
 color: var(--text-main);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.cp-contact-sub {
 font-size: 12.5px;
 color: var(--text-dim);
 margin-top: 2px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.cp-remove-btn {
 flex-shrink: 0;
 background: transparent;
 border: none;
 color: var(--text-dim);
 padding: 8px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 transition: background .15s, color .15s;
}
.cp-remove-btn:hover { background: var(--bg-hover); color: var(--danger); }

.empty-contacts-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 60px 32px;
}
.cp-empty-title { font-size: 18px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.cp-empty-desc { font-size: 13.5px; color: var(--text-dim); line-height: 21px; }

.cp-fab {
 position: fixed;
 left: 16px;
 bottom: 78px;
 width: 56px;
 height: 56px;
 background: var(--accent);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 box-shadow: 0 4px 14px rgba(36,129,204,0.45);
 cursor: pointer;
 z-index: 20;
 transition: background-color .2s, transform .15s;
}
.cp-fab:hover { background: #1e6ba8; transform: scale(1.06); }
.cp-fab .svg-icon { width: 24px; height: 24px; }

.add-contact-overlay {
 display: none;
 position: fixed;
 top: 0; right: 0; bottom: 0; left: 0;
 background: rgba(0,0,0,0.55);
 z-index: 100;
 align-items: center;
 justify-content: center;
}
.add-contact-overlay.open { display: flex; }
.add-contact-box {
 width: min(340px, 90vw);
 background: var(--bg-panel-light);
 border-radius: var(--radius-md);
 padding: 20px;
 box-shadow: 0 20px 60px rgba(0,0,0,0.5);
 animation: msgmenuPop .15s ease-out;
}
.add-contact-box h3 {
 color: var(--text-main);
 font-size: 16px;
 margin-bottom: 16px;
}
.ac-field-wrapper {
 border: 1.5px solid var(--border-soft);
 border-radius: 10px;
 padding: 8px 12px;
 margin-bottom: 12px;
}
.ac-field-wrapper:focus-within { border-color: var(--accent); }
.ac-label {
 font-size: 12px;
 color: var(--text-dim);
 display: block;
 margin-bottom: 4px;
}
.ac-input {
 width: 100%;
 background: transparent;
 border: none;
 outline: none;
 color: var(--text-main);
 font-size: 14px;
 font-family: 'Vazirmatn', sans-serif;
}
.ac-error {
 color: var(--danger);
 font-size: 12.5px;
 min-height: 16px;
 margin-bottom: 8px;
}
.add-contact-actions {
 display: flex;
 gap: 10px;
 margin-top: 4px;
}
.add-contact-actions .btn-cancel-modal {
 flex: 1;
 background: transparent;
 border: 1px solid var(--border-soft);
 color: var(--text-dim);
 padding: 11px;
 border-radius: 10px;
 font-family: 'Vazirmatn', sans-serif;
 font-size: 14px;
 cursor: pointer;
}
.add-contact-actions .btn-create-contact {
 flex: 1.4;
 background-color: var(--accent);
 color: #fff;
 border: none;
 padding: 11px;
 border-radius: 10px;
 font-family: 'Vazirmatn', sans-serif;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 transition: background-color .15s;
}
.add-contact-actions .btn-create-contact:hover { background-color: #1a6aaa; }
.add-contact-actions .btn-create-contact:disabled { background-color: var(--bg-hover); color: var(--text-dim); cursor: not-allowed; }