/* ==========================================================
   چت‌روم — فیروزه‌ای و زعفرانی، با نقش ستاره‌ی هشت‌پر (ختمی)
   ========================================================== */

:root {
    --font: "Vazirmatn", "Vazir", "IRANSansX", "IRANSans", Tahoma, "Segoe UI", system-ui, -apple-system, sans-serif;

    --chat-bg: #edf4f2;
    --surface: #ffffff;
    --surface-2: #f0f6f5;
    --line: #d2e1de;
    --text: #102427;
    --muted: #587276;
    --other: #ffffff;
    --own: #0b7a75;
    --on-own: #ffffff;
    --accent: #0b7a75;
    --accent-soft: rgba(11, 122, 117, .12);
    --saffron: #f0a830;
    --danger: #d1383d;
    --link: #0a64a0;
    --pattern-opacity: .075;
    --shadow: 0 12px 32px -10px rgba(8, 40, 44, .28);

    /* پنل کناری همیشه تیره است */
    --side-bg: #0c2a2d;
    --side-text: #e3f2f0;
    --side-muted: #86aaa7;
    --side-line: rgba(255, 255, 255, .09);

    --dock: 90px;
    color-scheme: light;
}

[data-theme="dark"] {
    --chat-bg: #091416;
    --surface: #0e1d1f;
    --surface-2: #142a2c;
    --line: #1e3a3c;
    --text: #e6f2f0;
    --muted: #8fb0ad;
    --other: #14292b;
    --accent: #4fd1c5;
    --accent-soft: rgba(79, 209, 197, .14);
    --link: #6cc4f5;
    --pattern-opacity: .11;
    --shadow: 0 12px 32px -10px rgba(0, 0, 0, .65);
    --side-bg: #071a1c;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    background: var(--chat-bg);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--link); }

:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

.icon {
    width: 1.25em; height: 1.25em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.flip { transform: scaleX(-1); }

.icon-btn {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; border-radius: 12px;
    color: var(--muted);
    transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn.on-dark { color: var(--side-muted); }
.icon-btn.on-dark:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- آواتار ---------- */
.avatar {
    --h: 180;
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: hsl(var(--h) 52% 40%);
    color: #fff; font-weight: 800; font-size: 15px; line-height: 1;
    user-select: none;
}

/* ---------- ورود ---------- */
.join {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center; padding: 20px;
    background-color: var(--side-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%234fd1c5' stroke-opacity='.14' stroke-width='1'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z'/%3E%3Cpath d='M9.4 9.4h45.2v45.2H9.4Z'/%3E%3C/svg%3E");
    overflow: auto;
}
.join-card {
    width: min(420px, 100%);
    background: var(--surface);
    border-radius: 28px 28px 28px 8px;
    padding: 32px 28px 28px;
    box-shadow: var(--shadow);
}
.join-logo {
    width: 56px; height: 56px; border-radius: 18px;
    display: grid; place-items: center;
    background: var(--own); color: #fff;
    margin-bottom: 18px; font-size: 26px;
    transform: rotate(8deg);
}
.join-card h1 { margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.join-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-2); border: 1.5px solid var(--line);
    border-radius: 14px; padding: 4px 6px 4px 10px;
    transition: border-color .15s;
}
.field-row:focus-within { border-color: var(--accent); }
.field-row input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 9px 4px; }
.field-row .avatar { width: 32px; height: 32px; font-size: 14px; margin-inline-start: 2px; }
.room-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: 999px; padding: 6px 14px; margin-bottom: 14px; font-weight: 700;
}

.btn-primary {
    width: 100%; padding: 13px 18px; margin-top: 8px;
    background: var(--own); color: #fff; font-weight: 700; font-size: 16px;
    border-radius: 14px; transition: transform .12s, filter .15s;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { transform: scale(.98); }
.btn-primary.small { width: auto; margin: 0; padding: 9px 20px; font-size: 14px; }
.btn-ghost { padding: 9px 16px; border-radius: 12px; color: var(--muted); font-size: 14px; }
.btn-ghost:hover { background: var(--surface-2); }

/* ---------- چیدمان اصلی ---------- */
.app {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    height: 100vh; height: 100dvh;
}

/* ---------- پنل کناری ---------- */
.sidebar {
    background: var(--side-bg); color: var(--side-text);
    display: flex; flex-direction: column;
    padding: 20px 18px 16px; min-height: 0; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--saffron); color: #3b2500;
    display: grid; place-items: center; transform: rotate(8deg); font-size: 20px;
}
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: -.01em; }

.side-label {
    display: flex; align-items: center; gap: 8px;
    color: var(--side-muted); font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.count {
    background: rgba(255,255,255,.1); color: var(--side-text);
    border-radius: 999px; padding: 0 8px; font-size: 12px; line-height: 20px;
}
.side-room { margin-bottom: 26px; }
.side-room-name {
    font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em;
    word-break: break-word; margin-bottom: 12px;
}
.btn-invite {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 12px;
    border: 1.5px solid rgba(240,168,48,.55); color: var(--saffron);
    font-weight: 600; font-size: 14px; transition: background .15s;
}
.btn-invite:hover { background: rgba(240,168,48,.14); }

.online-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 60px; }
.online-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.online-list .avatar { width: 32px; height: 32px; font-size: 13px; position: relative; }
.online-list .avatar::after {
    content: ""; position: absolute; inset-inline-end: -1px; bottom: -1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #3ddc97; border: 2px solid var(--side-bg);
}
.ol-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-note { font-size: 12px; color: var(--saffron); }

.side-foot { border-top: 1px solid var(--side-line); padding-top: 14px; margin-top: 14px; }
.me-card { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.me-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.foot-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px; border-radius: 12px;
    color: var(--side-muted); font-size: 12px; transition: background .15s, color .15s;
}
.foot-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

.scrim { display: none; }
.menu-btn { display: none; }

/* ---------- ستون گفتگو ---------- */
.chat {
    position: relative; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    background: var(--chat-bg);
}
.chat::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: var(--pattern-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%230b7a75' stroke-width='1.2'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z'/%3E%3Cpath d='M9.4 9.4h45.2v45.2H9.4Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] .chat::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%234fd1c5' stroke-width='1.2'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z'/%3E%3Cpath d='M9.4 9.4h45.2v45.2H9.4Z'/%3E%3C/svg%3E");
}

.chat-head {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; min-height: 64px;
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.head-text { flex: 1; min-width: 0; }
.head-text h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-sub { font-size: 12.5px; color: var(--muted); min-height: 20px; }
.head-sub.is-typing { color: var(--accent); font-weight: 600; }

.conn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 999px; font-size: 12.5px;
    background: var(--surface-2); color: var(--muted);
}
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); }
.conn[data-state="ok"] i { background: #2fbf84; }
.conn[data-state="ok"] span { display: none; }
.conn[data-state="ok"] { padding: 8px; }
.conn[data-state="offline"] { background: rgba(209,56,61,.12); color: var(--danger); }
.conn[data-state="offline"] i { background: var(--danger); }
.conn[data-state="connecting"] i { animation: pulse 1s infinite; }

.scroller {
    position: relative; z-index: 1; flex: 1; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.list { max-width: 860px; margin: 0 auto; padding: 14px 18px 8px; }

.empty {
    position: absolute; inset: 0; z-index: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center; padding: 30px; color: var(--muted);
}
.empty .icon { width: 44px; height: 44px; color: var(--accent); margin-bottom: 6px; }
.empty strong { color: var(--text); font-size: 17px; }

.day-sep { display: flex; justify-content: center; margin: 20px 0 10px; }
.day-sep span {
    background: var(--surface); border: 1px solid var(--line); color: var(--muted);
    border-radius: 999px; padding: 2px 14px; font-size: 12.5px;
}

/* ---------- پیام ---------- */
.msg {
    --h: 180;
    display: flex; align-items: flex-end; gap: 8px; margin-top: 3px;
    position: relative;
}
.msg.first { margin-top: 14px; }
.msg.enter { animation: rise .22s ease-out; }
/* پیام‌های خودم سمت راست، دیگران سمت چپ */
.msg.own { flex-direction: row; }
.msg.other { flex-direction: row-reverse; }
.msg .avatar { width: 34px; height: 34px; font-size: 14px; background: hsl(var(--h) 52% 40%); }
.msg:not(.last) .avatar { visibility: hidden; }
.msg.own .avatar { display: none; }

.bubble {
    position: relative; min-width: 64px; max-width: min(78%, 540px);
    padding: 7px 12px 5px;
    border-radius: 18px;
    background: var(--other); color: var(--text);
    border: 1px solid var(--line);
    cursor: pointer; word-break: break-word;
    transition: filter .15s;
}
.msg.own .bubble { background: var(--own); color: var(--on-own); border-color: transparent; border-bottom-right-radius: 6px; }
.msg.other .bubble { border-bottom-left-radius: 6px; }
.msg.own:not(.first) .bubble { border-top-right-radius: 6px; }
.msg.other:not(.first) .bubble { border-top-left-radius: 6px; }
.msg.flash .bubble { animation: flash 1.4s ease-out; }
.msg.pending .bubble { opacity: .82; }
.msg.failed .bubble { outline: 1.5px solid var(--danger); }

.name { display: none; font-weight: 700; font-size: 13px; line-height: 1.6; color: hsl(var(--h) 58% 36%); }
[data-theme="dark"] .name { color: hsl(var(--h) 75% 72%); }
.msg.other.first .name { display: block; }

.text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.msg.other .text a { color: var(--link); }

.quote {
    display: flex; flex-direction: column; margin: 2px 0 6px;
    padding: 4px 10px; border-radius: 8px;
    border-inline-start: 3px solid var(--saffron);
    background: rgba(8, 40, 44, .07); font-size: 13px; line-height: 1.6;
}
.msg.own .quote { background: rgba(255,255,255,.16); }
.quote b { font-size: 12.5px; color: var(--saffron); }
.msg.other .quote b { color: hsl(var(--h) 58% 36%); }
[data-theme="dark"] .msg.other .quote b { color: hsl(var(--h) 75% 72%); }
.quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; opacity: .85; }

.img-wrap {
    position: relative; display: block; max-width: 100%;
    margin: 3px 0 4px; border-radius: 12px; overflow: hidden;
    background: linear-gradient(110deg, rgba(120,150,150,.16) 8%, rgba(120,150,150,.3) 18%, rgba(120,150,150,.16) 33%);
    background-size: 200% 100%; animation: shine 1.2s linear infinite;
    cursor: zoom-in;
}
.img-wrap.loaded { animation: none; background: none; }
.img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-wrap.broken { cursor: default; display: grid; place-items: center; min-height: 80px; min-width: 160px; }
.img-wrap.broken::after { content: "تصویر در دسترس نیست"; font-size: 12.5px; color: var(--muted); padding: 10px; }
.img-wrap.broken img { display: none; }
.upload-bar { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.25); }
.upload-bar i { display: block; height: 100%; width: 0; background: var(--saffron); transition: width .15s; }

.meta {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    font-size: 11.5px; opacity: .7; margin-top: 1px; line-height: 1.6;
}
.meta .icon { width: 13px; height: 13px; }
.msg.failed .meta { opacity: 1; color: var(--danger); }
.msg.own.failed .meta { color: #ffd9d9; }
.retry { text-decoration: underline; font-weight: 700; }
.spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .8s linear infinite; }

.msg.deleted .bubble { cursor: default; background: transparent; border-style: dashed; color: var(--muted); font-style: italic; }
.msg.deleted .text { font-size: 13.5px; }

.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.reactions:empty { display: none; }
.reaction {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px; font-size: 13px; line-height: 1.7;
    background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
}
.reaction.mine { background: var(--accent-soft); border-color: var(--accent); }
.reaction small { font-size: 12px; font-weight: 700; }

/* ---------- نشانگر نوشتن ---------- */
.typing {
    position: relative; z-index: 1; height: 24px;
    max-width: 860px; width: 100%; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--muted);
    opacity: 0; transition: opacity .15s; pointer-events: none;
}
.typing.show { opacity: 1; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--saffron); animation: bounce 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }

.to-bottom {
    position: absolute; z-index: 5; inset-inline-end: 20px; bottom: var(--dock);
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface); color: var(--accent);
    border: 1px solid var(--line); box-shadow: var(--shadow);
}
.to-bottom b {
    position: absolute; top: -6px; inset-inline-start: -6px;
    min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px;
    background: var(--saffron); color: #3b2500; font-size: 12px; line-height: 22px; text-align: center;
}

/* ---------- نوار نوشتن ---------- */
.composer {
    position: relative; z-index: 3;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.composer > * { max-width: 860px; margin-inline: auto; }
.bar {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px 6px 12px; margin-bottom: 8px;
    background: var(--surface-2); border-radius: 14px;
    border-inline-start: 3px solid var(--saffron);
    color: var(--muted);
}
.bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; font-size: 13px; }
.bar-text b { color: var(--accent); font-size: 13px; }
.bar-text span, .bar-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-bar img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }

.composer-box {
    position: relative; display: flex; align-items: flex-end; gap: 2px;
    background: var(--surface-2); border: 1.5px solid var(--line);
    border-radius: 26px; padding: 5px; transition: border-color .15s;
}
.composer-box:focus-within { border-color: var(--accent); }
#input {
    flex: 1; min-width: 0; max-height: 140px; resize: none;
    border: 0; background: none; outline: none;
    padding: 9px 8px; line-height: 1.7;
}
#input::placeholder { color: var(--muted); }
.send-btn {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--own); color: #fff;
    transition: transform .12s, opacity .15s, filter .15s;
}
.send-btn:hover:not(:disabled) { filter: brightness(1.12); }
.send-btn:active:not(:disabled) { transform: scale(.92); }
.send-btn:disabled { opacity: .35; cursor: default; }

.emoji-panel {
    position: absolute; inset-inline-start: 0; bottom: calc(100% + 10px); z-index: 10;
    width: min(340px, 92vw); max-height: 260px; overflow-y: auto; padding: 10px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; box-shadow: var(--shadow); animation: pop .14s ease-out;
}
.emoji-panel h4 { margin: 4px 4px 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-grid button { font-size: 22px; line-height: 1; padding: 6px 0; border-radius: 10px; transform-origin: center; }
.emoji-grid button:hover { background: var(--accent-soft); transform: scale(1.18); }
.emoji-grid button.emoji-moving { animation-duration: 1.9s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.emoji-grid button.emoji-float { animation-name: emojiFloat; }
.emoji-grid button.emoji-wiggle { animation-name: emojiWiggle; }
.emoji-grid button.emoji-pop { animation-name: emojiPop; }
.emoji-grid button.emoji-moving:hover { animation-play-state: paused; filter: drop-shadow(0 0 5px rgba(105,190,255,.5)); }
@keyframes emojiFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-5deg); } }
@keyframes emojiWiggle { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-9deg) scale(1.05); } 75% { transform: rotate(9deg) scale(1.05); } }
@keyframes emojiPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- منوی پیام ---------- */
.menu {
    position: absolute; z-index: 20; width: 248px; padding: 6px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; box-shadow: var(--shadow); animation: pop .14s ease-out;
}
.menu-emojis { display: flex; justify-content: space-between; padding: 2px 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-emojis button { font-size: 21px; width: 29px; height: 34px; border-radius: 10px; transition: transform .12s; }
.menu-emojis button:hover { transform: scale(1.25); background: var(--accent-soft); }
.menu-emojis button.mine { background: var(--accent-soft); }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: start; }
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }

/* ---------- رها کردن فایل ---------- */
.drop {
    position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
    background: rgba(9, 40, 44, .78); backdrop-filter: blur(3px); pointer-events: none;
}
.drop > div {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 36px 48px; color: #fff; font-weight: 700; font-size: 18px;
    border: 2.5px dashed var(--saffron); border-radius: 24px;
}
.drop .icon { width: 40px; height: 40px; color: var(--saffron); }

/* ---------- نمایشگر تصویر ---------- */
.lightbox {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    background: rgba(3, 14, 16, .92); backdrop-filter: blur(6px);
    animation: fade .15s;
}
.lightbox img { max-width: 94vw; max-height: 86vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-bar { position: absolute; top: 12px; inset-inline: 12px; display: flex; justify-content: flex-start; gap: 8px; }
.lb-bar .icon-btn { color: #fff; background: rgba(255,255,255,.12); }
.lb-bar .icon-btn:hover { background: rgba(255,255,255,.24); color: #fff; }

/* ---------- مودال ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(3, 14, 16, .6); backdrop-filter: blur(3px); }
.modal-card { width: min(360px, 100%); background: var(--surface); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); animation: pop .16s ease-out; }
.modal-card h3 { margin: 0 0 12px; font-size: 18px; }
.modal-card input {
    width: 100%; padding: 11px 14px; border-radius: 12px; outline: none;
    background: var(--surface-2); border: 1.5px solid var(--line);
}
.modal-card input:focus { border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- پیام کوتاه ---------- */
.toasts { position: fixed; z-index: 200; inset-inline: 0; bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast {
    display: flex; align-items: center; gap: 8px;
    background: #0c2a2d; color: #fff; padding: 10px 16px; border-radius: 14px;
    box-shadow: var(--shadow); font-size: 14px; animation: rise .2s ease-out;
}
.toast.error { background: var(--danger); }

/* ---------- حرکت ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }
@keyframes shine { to { background-position-x: -200%; } }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px rgba(240,168,48,.7); } 100% { box-shadow: 0 0 0 4px rgba(240,168,48,0); } }

/* ---------- موبایل ---------- */
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .menu-btn { display: inline-grid; margin-inline-start: -6px; }
    .sidebar {
        position: fixed; z-index: 60; top: 0; bottom: 0; inset-inline-start: 0;
        width: min(310px, 86vw); transform: translateX(100%);
        transition: transform .25s ease; box-shadow: var(--shadow);
        padding-top: calc(20px + env(safe-area-inset-top));
    }
    .sidebar:not(.open) { box-shadow: none; visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
    .sidebar.open { transform: none; }
    .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(3,14,16,.55); opacity: 0; pointer-events: none; transition: opacity .25s; }
    .scrim.show { opacity: 1; pointer-events: auto; }
    .chat-head { padding-top: calc(10px + env(safe-area-inset-top)); }
    .list { padding-inline: 12px; }
    .bubble { max-width: 84%; }
    .to-bottom { inset-inline-end: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ---------- پیام خصوصی ---------- */
.online-list li { border-radius: 10px; padding: 5px 7px; margin: 2px -7px; }
.online-list li.dm-clickable { cursor: pointer; transition: background .15s; }
.online-list li.dm-clickable:hover { background: rgba(255,255,255,.09); }
.online-list li.dm-clickable:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.dm-modal { z-index: 80; padding: 16px; }
.dm-card { width: min(460px, 100%); padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: min(680px, 90dvh); }
.dm-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.dm-head h3 { margin:0; font-size:17px; }
.dm-head p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.dm-messages { padding:14px; min-height:180px; max-height: min(52dvh, 430px); overflow:auto; display:flex; flex-direction:column; gap:8px; }
.dm-empty { margin:auto; color:var(--muted); font-size:13px; padding:24px 8px; text-align:center; }
.dm-message { max-width:85%; padding:8px 11px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); align-self:flex-start; overflow-wrap:anywhere; }
.dm-message.mine { background:var(--own); color:var(--on-own); border-color:transparent; align-self:flex-end; }
.dm-message .dm-meta { display:flex; gap:8px; font-size:11px; opacity:.75; margin-top:3px; }
.dm-form { display:flex; gap:8px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--line); }
.dm-form textarea { flex:1; min-width:0; resize:vertical; max-height:100px; border:1px solid var(--line); border-radius:12px; padding:9px 11px; background:var(--surface-2); outline:none; }
.dm-form textarea:focus { border-color:var(--accent); }
.dm-note { margin:0; padding:0 14px 12px; color:var(--muted); font-size:11px; }
@media(max-width:600px) { .dm-modal { padding:10px; } .dm-card { max-height:88dvh; } .dm-messages { max-height:52dvh; } }

/* ==========================================================
   LUMEN — مینیمال شیشه‌ای با نور آبی نئونی
   پس‌زمینه‌ی گفتگو در روشن و تاریک عمداً متفاوت طراحی شده است.
   ========================================================== */
:root {
    --chat-bg: #eef4fb;
    --surface: rgba(255,255,255,.78);
    --surface-2: rgba(244,248,255,.86);
    --line: rgba(115,151,192,.23);
    --text: #17283e;
    --muted: #71839b;
    --other: rgba(255,255,255,.88);
    --own: #398ce8;
    --on-own: #fff;
    --accent: #4b9cf5;
    --accent-soft: rgba(75,156,245,.12);
    --saffron: #8cbcff;
    --link: #2478c8;
    --pattern-opacity: .20;
    --shadow: 0 24px 70px rgba(43,83,132,.16);
    --side-bg: #111c30;
    --side-text: #edf5ff;
    --side-muted: #9baec9;
    --side-line: rgba(190,215,255,.12);
    color-scheme: light;
}
[data-theme="dark"] {
    --chat-bg: #080f1c;
    --surface: rgba(17,28,47,.82);
    --surface-2: rgba(22,36,59,.88);
    --line: rgba(125,171,235,.18);
    --text: #e8f1ff;
    --muted: #8da3c2;
    --other: rgba(22,37,60,.88);
    --own: #277edc;
    --on-own: #f7fbff;
    --accent: #82c4ff;
    --accent-soft: rgba(103,184,255,.13);
    --saffron: #9ad3ff;
    --link: #91ceff;
    --pattern-opacity: .13;
    --shadow: 0 28px 80px rgba(0,0,0,.42);
    --side-bg: #080e19;
    --side-text: #e9f3ff;
    --side-muted: #8198b8;
    --side-line: rgba(145,190,255,.12);
    color-scheme: dark;
}

html, body { background: var(--chat-bg); }
body {
    background-image: radial-gradient(ellipse at 78% 4%, rgba(114,181,255,.12), transparent 36%),
                      radial-gradient(ellipse at 8% 88%, rgba(137,160,255,.08), transparent 30%);
}
[data-theme="dark"] body {
    background-image: radial-gradient(ellipse at 78% 4%, rgba(47,130,232,.18), transparent 35%),
                      radial-gradient(ellipse at 8% 90%, rgba(95,119,255,.10), transparent 32%);
}
:focus-visible { outline-color: #83c8ff; }

.join {
    background-color: #0c1729;
    background-image: radial-gradient(ellipse at 50% 0%, rgba(74,151,255,.23), transparent 48%),
      radial-gradient(ellipse at 100% 100%, rgba(80,110,230,.12), transparent 38%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%238ccaff' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M36 0 72 36 36 72 0 36Z'/%3E%3C/svg%3E");
}
.join-card {
    background: rgba(18,31,52,.78);
    color: #edf5ff;
    border: 1px solid rgba(155,199,255,.22);
    border-radius: 26px;
    box-shadow: 0 30px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.join-card .join-sub { color: #9eb2ce; }
.join-card .field > span { color: #d5e5fb; }
.join-logo {
    background: linear-gradient(145deg, #a9dcff, #4d9ff7 65%, #4c76e8);
    color: #07172b; transform: none; border-radius: 17px;
    box-shadow: 0 0 32px rgba(83,165,255,.25);
}
.field-row {
    background: rgba(8,17,31,.48); border-color: rgba(139,181,235,.22);
}
.field-row:focus-within { border-color: #79bdff; box-shadow: 0 0 0 3px rgba(94,168,255,.11); }
.room-chip { background: rgba(101,177,255,.13); color: #9bd3ff; }
.btn-primary {
    background: linear-gradient(135deg, #68b7ff, #3987e5);
    color: #06172b; border-radius: 13px;
    box-shadow: 0 8px 24px rgba(57,135,229,.22);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(57,135,229,.32); }

.app { gap: 0; }
.sidebar {
    background: linear-gradient(165deg, rgba(20,34,57,.98), rgba(10,18,32,.99));
    border-inline-start: 1px solid rgba(142,190,255,.11);
    padding: 24px 19px 17px;
}
.brand { gap: 12px; margin-bottom: 32px; }
.brand-mark {
    transform: none; border-radius: 13px;
    background: linear-gradient(145deg, #a5dcff, #4c9bf0 68%, #6678ef);
    color: #07172b; box-shadow: 0 0 26px rgba(91,166,255,.22);
}
.brand-name { letter-spacing: -.025em; }
.brand-caption {
    display: block; margin-top: -2px; font-size: 11px; line-height: 1.4;
    letter-spacing: .015em; font-weight: 500; color: #8ea9cb;
}
.side-label { color: #8ea7c9; }
.count { background: rgba(128,190,255,.12); color: #c6e4ff; }
.side-room-name { color: #f2f7ff; }
.btn-invite {
    border: 1px solid rgba(129,192,255,.32); color: #a9d9ff;
    background: rgba(99,169,255,.06); border-radius: 11px;
}
.btn-invite:hover { background: rgba(99,169,255,.14); }
.online-list li.dm-clickable:hover { background: rgba(119,181,255,.10); }
.online-list li.dm-clickable:focus-visible { outline-color: #83c8ff; }
.online-list .avatar::after { box-shadow: 0 0 0 2px rgba(61,220,151,.08); }
.foot-btn { border: 1px solid transparent; }
.foot-btn:hover { background: rgba(126,184,255,.10); color: #d9edff; }

.chat {
    isolation: isolate;
    background-color: var(--chat-bg);
    background-image: radial-gradient(ellipse at 75% 0%, rgba(109,177,255,.16), transparent 39%),
                      radial-gradient(ellipse at 15% 80%, rgba(129,157,255,.09), transparent 35%);
}
[data-theme="dark"] .chat {
    background-image: radial-gradient(ellipse at 75% 0%, rgba(46,118,220,.20), transparent 39%),
                      radial-gradient(ellipse at 15% 80%, rgba(80,91,211,.11), transparent 36%);
}
.chat::before {
    z-index: -1; opacity: .42;
    background-image: radial-gradient(circle, rgba(62,135,220,.20) .8px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}
[data-theme="dark"] .chat::before {
    opacity: .30;
    background-image: radial-gradient(circle, rgba(110,177,255,.23) .8px, transparent 1px);
}
.chat-head {
    background: var(--surface); border-bottom-color: var(--line);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 5px 28px rgba(25,63,111,.035);
}
[data-theme="dark"] .chat-head { box-shadow: 0 5px 30px rgba(0,0,0,.12); }

.bubble {
    border-color: rgba(117,155,202,.20);
    box-shadow: 0 5px 18px rgba(32,70,120,.035);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.msg.own .bubble {
    background: linear-gradient(135deg, #479ceF, #347fd9);
    box-shadow: 0 7px 20px rgba(53,131,220,.16);
}
[data-theme="dark"] .msg.own .bubble {
    background: linear-gradient(135deg, #2f8be9, #2267bd);
    box-shadow: 0 7px 24px rgba(23,105,202,.18);
}
.day-sep span {
    background: var(--surface); border-color: var(--line);
    box-shadow: 0 4px 18px rgba(40,80,130,.04);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.composer {
    background: var(--surface); border-top-color: var(--line);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.composer-box {
    background: var(--surface-2); border-color: rgba(113,157,211,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
[data-theme="dark"] .composer-box { box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.composer-box:focus-within {
    border-color: rgba(103,183,255,.82);
    box-shadow: 0 0 0 3px rgba(94,168,255,.10), 0 0 28px rgba(69,145,234,.07);
}
.send-btn {
    background: linear-gradient(145deg, #73c5ff, #3989e5);
    color: #07182c; box-shadow: 0 4px 16px rgba(60,143,232,.20);
}
.send-btn:disabled { box-shadow: none; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }

/* پنجره‌ی گفت‌وگوی خصوصی: شیشه‌ی شناور با هاله‌ی آبی */
.modal { background: rgba(8,15,27,.48); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-card, .dm-card {
    background: var(--surface); border: 1px solid rgba(126,177,237,.25);
    border-radius: 22px; box-shadow: 0 28px 90px rgba(11,29,55,.22), inset 0 1px 0 rgba(255,255,255,.24);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
[data-theme="dark"] .modal-card, [data-theme="dark"] .dm-card {
    box-shadow: 0 30px 100px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.035);
}
.dm-head { background: rgba(110,174,255,.045); border-bottom-color: var(--line); }
.dm-head h3 { letter-spacing: -.015em; }
.dm-messages {
    background: radial-gradient(ellipse at 50% 0%, rgba(98,168,255,.07), transparent 65%);
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.dm-message {
    border-color: var(--line); border-radius: 15px 15px 15px 5px;
    box-shadow: 0 4px 15px rgba(25,60,105,.04);
}
.dm-message.mine {
    background: linear-gradient(135deg, #479ceF, #347fd9);
    color: #fff; border-radius: 15px 15px 5px 15px;
    box-shadow: 0 6px 20px rgba(49,127,217,.17);
}
[data-theme="dark"] .dm-message.mine { background: linear-gradient(135deg, #2f8be9, #2267bd); }
.dm-form { border-top-color: var(--line); }
.dm-form textarea {
    background: var(--surface-2); border-color: var(--line); border-radius: 14px;
}
.dm-form textarea:focus { border-color: #78bdff; box-shadow: 0 0 0 3px rgba(94,168,255,.10); }
.dm-note { opacity: .85; }

@media (max-width: 860px) {
    .sidebar { border-inline-start: 0; border-inline-end: 1px solid rgba(142,190,255,.12); }
    .chat-head { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
    .join-card, .chat-head, .composer, .bubble, .modal-card, .dm-card, .day-sep span {
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}


/* ---------- امنیت و مدیریت اتاق ---------- */
.room-settings-btn { margin-top: 8px; }
.room-lock-status {
    margin-top: 9px; padding: 7px 10px; border-radius: 10px;
    color: #9bd3ff; background: rgba(105, 177, 255, .09);
    border: 1px solid rgba(122, 190, 255, .16); font-size: 11px;
}
.room-settings-copy { color: var(--muted); font-size: 13px; line-height: 1.9; margin: -2px 0 16px; }
.room-settings-hint { color: var(--muted); font-size: 11px; line-height: 1.8; margin: 8px 0 0; }
#room-settings .field { margin-bottom: 8px; }
#room-settings .field > span small { opacity: .7; font-weight: 400; }
#room-settings .field input { direction: ltr; text-align: left; }
#join-password { direction: ltr; text-align: left; }

/* ---------- Account authentication & profile: glass / ice blue ---------- */
.auth-screen { z-index: 20; }
.auth-card { position: relative; overflow: hidden; }
.auth-card::before { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(108,190,255,.13); filter:blur(45px); top:-130px; inset-inline-end:-80px; pointer-events:none; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; border:1px solid var(--line); border-radius:14px; background:var(--glass); margin:8px 0 16px; }
.auth-tab { border:0; border-radius:10px; padding:10px 12px; color:var(--muted); background:transparent; font:inherit; cursor:pointer; transition:background .2s,color .2s,box-shadow .2s; }
.auth-tab.active { color:var(--text); background:rgba(115,190,255,.15); box-shadow:inset 0 0 0 1px rgba(115,190,255,.24); }
.auth-footnote { margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.8; }
.account-chip { display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:16px; padding:12px; margin:10px 0 18px; background:var(--glass); }
.account-chip > div { display:flex; flex-direction:column; min-width:0; flex:1; gap:3px; }
.account-chip b { font-weight:700; color:var(--text); }
.account-chip small { color:var(--muted); direction:ltr; text-align:right; }
.avatar.has-photo { padding:0; overflow:hidden; background:var(--glass); }
.avatar.has-photo img { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
.profile-card { max-width:440px; }
.profile-preview { display:flex; align-items:center; gap:14px; margin:8px 0 18px; }
.profile-preview .avatar, #profile-preview-img { width:76px; height:76px; border-radius:24px; object-fit:cover; border:1px solid var(--line); box-shadow:0 0 24px rgba(101,184,255,.13); }
.profile-preview label { cursor:pointer; }
#profile-preview-initial[hidden], #profile-preview-img[hidden] { display:none; }
#profile-bio { resize:vertical; min-height:90px; }
@media (max-width:520px) { .auth-card { width:min(100% - 24px, 440px); } .account-chip { gap:8px; padding:9px; } }
.ol-user-text { display:flex; flex-direction:column; min-width:0; flex:1; gap:2px; }
.ol-bio { display:block; color:var(--muted); font-size:11px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }


/* ---------- Auth / profile glass polish ---------- */
.auth-screen, #join.join {
    padding: clamp(14px, 3vw, 28px);
    background-color: #081222;
    background-image:
      radial-gradient(ellipse at 16% 18%, rgba(74, 151, 255, .18), transparent 38%),
      radial-gradient(ellipse at 85% 82%, rgba(103, 128, 255, .13), transparent 35%),
      linear-gradient(145deg, rgba(6, 13, 25, .98), rgba(12, 25, 44, .96));
}
.auth-card, #join .join-card {
    width: min(100%, 420px);
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid rgba(164, 207, 255, .22);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(23, 39, 63, .82), rgba(11, 23, 41, .76));
    box-shadow: 0 28px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08), 0 0 44px rgba(76,151,255,.07);
    backdrop-filter: blur(26px) saturate(135%);
    -webkit-backdrop-filter: blur(26px) saturate(135%);
}
.auth-card h1, #join .join-card h1 { font-size: clamp(23px, 4vw, 28px); letter-spacing: -.3px; }
.auth-card .join-sub, #join .join-sub { color: #a9bdd8; line-height: 1.85; margin-bottom: 20px; }
.auth-card .field, #join .field { margin: 0 0 15px; }
.auth-card .field > span, #join .field > span { color: #dbeaff; font-size: 12px; margin: 0 2px 7px; }
.auth-card .field input, #join .field input, .profile-card .field input, .profile-card .field textarea {
    display: block;
    width: 100%; min-width: 0; height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(151, 190, 239, .22);
    border-radius: 14px;
    outline: none;
    background: rgba(5, 14, 28, .52);
    color: #f0f6ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-card .field input::placeholder, #join .field input::placeholder, .profile-card textarea::placeholder { color: #8196b3; }
.auth-card .field input:focus, #join .field input:focus, .profile-card .field input:focus, .profile-card .field textarea:focus {
    border-color: rgba(132, 198, 255, .85);
    background: rgba(8, 21, 39, .78);
    box-shadow: 0 0 0 3px rgba(91, 166, 255, .13), 0 0 22px rgba(91, 166, 255, .08);
}
.auth-card #auth-username, .auth-card #auth-password { direction: ltr; text-align: left; }
.auth-tabs { background: rgba(5, 14, 27, .42); border-color: rgba(151,190,239,.17); border-radius: 15px; }
.auth-tab { min-height: 42px; border-radius: 11px; }
.auth-tab.active { background: linear-gradient(135deg, rgba(117,191,255,.2), rgba(91,133,255,.12)); color: #eaf5ff; box-shadow: inset 0 0 0 1px rgba(143,203,255,.28), 0 4px 18px rgba(61,139,231,.08); }
.auth-card .btn-primary, #join .btn-primary { min-height: 48px; border-radius: 14px; margin-top: 4px; background: linear-gradient(135deg, #a7ddff 0%, #68b7ff 48%, #5588f5 100%); color: #06162b; box-shadow: 0 10px 26px rgba(64,143,235,.2), inset 0 1px 0 rgba(255,255,255,.45); }
.auth-card .btn-primary:hover, #join .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 12px 32px rgba(64,143,235,.3); }
.auth-footnote { color: #8fa6c5; font-size: 11px; }
#join .field-row { min-height: 48px; padding: 3px 7px; border-radius: 14px; background: rgba(5,14,28,.52); border: 1px solid rgba(151,190,239,.22); }
#join .field-row input { height: 40px; border: 0; box-shadow: none; background: transparent; }
#join .account-chip { background: rgba(5,14,28,.34); border-color: rgba(151,190,239,.18); border-radius: 16px; }
.profile-card { background: linear-gradient(145deg, rgba(23,39,63,.96), rgba(11,23,41,.96)); border-color: rgba(164,207,255,.22); border-radius: 24px; color: #edf5ff; }
.profile-card .field > span { color: #dbeaff; }
.profile-card .field textarea { height: auto; min-height: 100px; padding: 12px 14px; resize: vertical; }
.profile-card .btn-ghost { color: #bdd1eb; border: 1px solid rgba(151,190,239,.18); border-radius: 12px; }
@media (max-width: 480px) {
  .auth-screen, #join.join { padding: 12px; }
  .auth-card, #join .join-card { padding: 22px 18px; border-radius: 22px; }
  .auth-card .field input, #join .field input { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card *, #join .join-card * { transition: none !important; }
}


/* Personal invitations and private-message notification toasts */
.toast-dm-notification { pointer-events:auto; cursor:pointer; border:1px solid rgba(111,190,255,.42); background:linear-gradient(135deg,rgba(20,40,67,.96),rgba(24,58,89,.94)); box-shadow:0 12px 38px rgba(0,0,0,.25),0 0 22px rgba(83,170,255,.13); max-width:min(560px, calc(100vw - 32px)); text-align:right; }
[data-theme="light"] .toast-dm-notification { background:rgba(246,251,255,.97); color:#16324e; border-color:rgba(75,151,220,.35); }
.toast-dm-notification:hover { transform:translateY(-2px); }
.invite-report-card { width:min(540px, calc(100vw - 28px)); }
.invite-report-list { display:flex; flex-direction:column; gap:8px; max-height:min(55vh,520px); overflow:auto; margin-top:16px; }
.invite-report-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:15px; background:var(--glass,rgba(255,255,255,.04)); }
.invite-report-names { min-width:0; display:flex; flex-direction:column; gap:4px; }
.invite-report-names strong { font-size:13px; overflow-wrap:anywhere; }
.invite-report-names small { font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.invite-report-row time { flex:none; font-size:11px; color:var(--muted); }

/* ---------- DM: full-featured private composer ---------- */
.dm-form { position:relative; }
.dm-form .icon-btn { flex:0 0 36px; width:36px; height:36px; border-radius:12px; }
.dm-form textarea { min-height:38px; max-height:120px; resize:vertical; }
.dm-emoji-panel { position:absolute; z-index:5; bottom:calc(100% + 10px); inset-inline-start:8px; width:min(330px, calc(100vw - 52px)); max-height:260px; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:18px; background:var(--surface); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 18px 55px rgba(12,35,70,.2); }
.dm-attach-preview { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 14px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); }
.dm-image { display:block; max-width:min(280px,65vw); max-height:260px; object-fit:contain; border-radius:12px; margin:3px 0; cursor:zoom-in; }
.dm-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.dm-reactions .reaction { border:1px solid var(--line); border-radius:999px; background:rgba(110,170,240,.10); padding:2px 7px; font:inherit; font-size:11px; cursor:pointer; color:inherit; }
.dm-reactions .reaction.mine { border-color:var(--accent); background:rgba(87,163,255,.2); }
.dm-react-add { border:1px dashed var(--line); background:transparent; border-radius:999px; padding:0 8px; color:inherit; cursor:pointer; }
.dm-react-picker { display:flex; flex-wrap:wrap; gap:3px; padding:5px; margin-top:5px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.dm-react-picker[hidden] { display:none; }
.dm-react-option { border:0; background:transparent; border-radius:8px; padding:4px; font-size:18px; cursor:pointer; }
.dm-react-option:hover { background:var(--accent-soft); transform:translateY(-1px); }
.room-admin-card { width:min(680px,calc(100vw - 24px)); max-height:min(88dvh,850px); overflow:auto; padding:0 0 16px; }
.room-ban-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.room-ban-form .field { min-width:0; }
.room-ban-form .field:nth-child(3) { grid-column:1/-1; }
.room-ban-form .btn-primary { justify-self:start; }
.room-admin-section { padding:12px 16px 0; }
.room-admin-section h4 { margin:0 0 8px; font-size:13px; }
.room-admin-list { display:flex; flex-direction:column; gap:7px; max-height:230px; overflow:auto; }
.room-admin-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2); font-size:12px; }
.room-admin-row-text { min-width:0; display:flex; flex-direction:column; gap:4px; overflow-wrap:anywhere; }
.room-admin-row-text small { color:var(--muted); font-size:11px; }
.room-admin-row > strong { overflow-wrap:anywhere; }
[data-theme="dark"] .dm-emoji-panel { background:rgba(13,25,44,.92); }
[data-theme="dark"] .room-admin-row { background:rgba(17,32,54,.72); }
@media(max-width:520px) { .room-ban-form { grid-template-columns:1fr; } .room-ban-form .field:nth-child(3) { grid-column:auto; } .dm-form { gap:5px; padding:8px; } .dm-form .icon-btn { flex-basis:32px; width:32px; height:32px; } }
.dm-inline-action { border:0; background:transparent; color:inherit; opacity:.72; cursor:pointer; font:inherit; font-size:10px; padding:0 3px; }
.dm-inline-action:hover { opacity:1; color:var(--accent); }
.dm-reply-quote { display:flex; flex-direction:column; gap:2px; padding:6px 8px; margin-bottom:6px; border-inline-start:2px solid var(--accent); background:rgba(100,160,230,.10); border-radius:7px; font-size:11px; }
.dm-reply-quote span { opacity:.8; }
.dm-deleted { opacity:.65; font-style:italic; }
.dm-reply-bar { padding:8px 12px; }

.room-clear-section { margin:12px 16px 0; padding:13px !important; border:1px solid rgba(239,95,119,.28); border-radius:15px; background:rgba(239,95,119,.055); }
.room-clear-section h4 { margin-top:0; }
.room-clear-copy { color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 10px; }
.btn-danger { border:1px solid rgba(239,95,119,.48); color:#ff8ea3; background:rgba(239,95,119,.12); border-radius:11px; padding:9px 13px; cursor:pointer; font:inherit; }
.btn-danger:hover { background:rgba(239,95,119,.2); }


/* Voice recording: minimal frosted-glass studio */
.voice-trigger { position:relative; }
.voice-trigger::after { content:""; position:absolute; inset:-3px; border:1px solid rgba(105,184,255,.25); border-radius:inherit; pointer-events:none; }
.voice-message,.dm-voice-message { display:flex; align-items:center; gap:9px; width:min(300px,72vw); margin:7px 0; padding:9px 11px; border:1px solid rgba(111,183,255,.22); border-radius:15px; background:rgba(100,166,236,.07); }
.voice-message-icon { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:11px; color:#8ecaff; background:rgba(103,178,255,.14); }
.voice-player { width:100%; min-width:0; height:36px; }
.voice-modal { z-index:130; backdrop-filter:blur(18px); }
.voice-card { position:relative; width:min(420px,calc(100vw - 28px)); padding:28px 22px 20px; text-align:center; overflow:hidden; border:1px solid rgba(125,193,255,.28); background:linear-gradient(145deg,rgba(235,246,255,.88),rgba(226,239,255,.70)); box-shadow:0 24px 90px rgba(27,91,160,.22),inset 0 1px 0 rgba(255,255,255,.8); }
[data-theme="dark"] .voice-card { background:linear-gradient(145deg,rgba(21,37,61,.97),rgba(10,20,37,.96)); box-shadow:0 24px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07); }
.voice-close { position:absolute; top:12px; inset-inline-end:12px; }
.voice-orb { position:relative; display:grid; place-items:center; width:112px; height:112px; margin:4px auto 18px; }
.voice-orb-core { z-index:1; display:grid; place-items:center; width:68px; height:68px; border-radius:24px; color:#bde2ff; background:linear-gradient(145deg,#183a62,#0b1a30); border:1px solid rgba(144,204,255,.6); box-shadow:0 0 28px rgba(73,160,255,.3),inset 0 1px 0 rgba(255,255,255,.12); }
.voice-orb-core .icon { width:29px;height:29px; }
.voice-orbit { position:absolute; inset:5px; border:1px solid rgba(76,160,245,.34); border-radius:35%; transform:rotate(25deg); animation:voice-orbit 8s linear infinite; }
.voice-orbit-b { inset:14px; border-radius:50%; transform:rotate(-20deg); border-style:dashed; animation-duration:12s; animation-direction:reverse; }
@keyframes voice-orbit { to { transform:rotate(385deg); } }
.voice-card h3 { margin:0 0 7px; font-size:19px; }
.voice-caption,.voice-footnote { color:var(--muted); font-size:12px; line-height:1.8; }
.voice-caption { min-height:24px; margin:0 0 12px; }
.voice-wave { display:flex; justify-content:center; align-items:center; gap:4px; height:42px; margin:4px 0; }
.voice-wave i { display:block; width:4px; height:9px; border-radius:9px; background:linear-gradient(#9bd7ff,#4e9eff); opacity:.7; }
.voice-wave.is-recording i { animation:voice-bars .65s ease-in-out infinite alternate; opacity:1; }
.voice-wave.is-recording i:nth-child(3n) { animation-delay:.15s; }
.voice-wave.is-recording i:nth-child(3n + 1) { animation-delay:.3s; }
@keyframes voice-bars { from { height:7px; } to { height:30px; } }
.voice-time { margin:3px 0 12px; font-size:14px; font-variant-numeric:tabular-nums; letter-spacing:1px; color:var(--text); }
.voice-preview { width:100%; height:40px; margin:0 0 12px; }
.voice-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:12px; }
.voice-actions button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; border-radius:14px; }
.voice-actions .icon { width:17px;height:17px; }
.voice-footnote { margin:15px 0 0; font-size:11px; }
@media (prefers-reduced-motion: reduce) { .voice-orbit,.voice-wave.is-recording i { animation:none; } }