/* ============================================
   INTERANET – REDESIGNED STYLESHEET
   Design: "Obsidian Slate" — premium, refined, modern
   ============================================ */

/* ── Self-hosted fonts ─────────────────────────────────────────────────────
   Font files are served from /public/fonts/.
   Outfit (woff2), Vazirmatn (ttf), and NotoNaskhArabic (ttf) are loaded
   directly — no Google Fonts CDN needed.
   ─────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/Outfit-Variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/Vazirmatn-Variable.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/NotoNaskhArabic-Variable..ttf') format('truetype');
}

/* Twemoji as a COLR/CPAL color web font — replaces per-emoji SVG <img> loading.
   One ~470KB file, cached once, lets emoji render as plain text everywhere via
   per-glyph font fallback (only emoji codepoints fall through to this family).
   Chrome/Firefox/Edge render the Twemoji glyphs; Safari/iOS fall through to
   'Apple Color Emoji' (native) since its COLR support is weaker. */
@font-face {
    font-family: 'Twemoji Mozilla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/TwemojiMozilla.woff2') format('woff2');
}

/* ----- CSS VARIABLES (Light Theme) ----- */
:root {
    --bg-primary: #f4f6fa;
    --bg-secondary: #ffffff;
    --bg-sidebar: #eef0f6;
    --bg-hover: #e9ecf5;
    --border-color: #d4d8e8;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --accent-color: #6366f1;
    --accent-hover: #4f46e5;
    --message-bg: #eef0f6;
    --message-own-bg: #6366f1;
    --message-own-text: #ffffff;
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.06);
    --danger: #ef4444;
    --success: #10b981;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 9999px;
    /* Emoji font appended last so only emoji codepoints (absent from the text
       fonts) fall through to Twemoji; letters/RTL text are unaffected. */
    --font-emoji: 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    --font: 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, var(--font-emoji), sans-serif;
    --font-rtl: 'Vazirmatn', 'Noto Naskh Arabic', 'Tahoma', 'Arial Unicode MS', var(--font-emoji), sans-serif;
    --font-mixed: 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Vazirmatn', 'Noto Naskh Arabic', 'Tahoma', var(--font-emoji), sans-serif;
}

/* Light theme body gradient */
body:not(.dark):not(.midnight):not(.forest):not(.ocean):not(.vs-dark):not(.galaxy) {
    background: linear-gradient(135deg, #e8eaf6 0%, #f4f6fa 50%, #e3f0ff 100%);
}

/* ----- DARK THEME ----- */
body.dark {
    --bg-primary: #0f1117;
    --bg-secondary: #1a1d27;
    --bg-sidebar: #1a1d27;
    --bg-hover: #252a39;
    --border-color: #2e3347;
    --text-primary: #f1f3f9;
    --text-secondary: #c8cde0;
    --text-muted: #8b90a8;
    --accent-color: #818cf8;
    --accent-hover: #6366f1;
    --message-bg: #1a1d27;
    --message-own-bg: #6366f1;
    --message-own-text: #ffffff;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --danger: #f87171;
    --success: #34d399;
    background: linear-gradient(135deg, #0a0c14 0%, #0f1117 60%, #121622 100%);
}

body.dark .modal-content,
body.dark .settings-panes,
body.dark .chat-input {
    background: #1a1d27;
    border-color: #2e3347;
}

body.dark input,
body.dark textarea,
body.dark select {
    background: #0f1117;
    border-color: #2e3347;
    color: #f1f3f9;
}

body.dark button.secondary {
    background: #2e3347;
    color: #c8cde0;
}

/* ----- RESET & BASE ----- */
* {
    box-sizing: border-box;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

*::before,
*::after {
    box-sizing: inherit;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

html,
body {
    overflow-x: hidden;
}

body {
    font-family: var(--font-mixed);
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 15px;
    transition: background 0.3s, color 0.3s;
}

/* ----- TYPOGRAPHY ----- */
h2,
h3,
h4 {
    color: var(--text-primary);
    font-family: var(--font);
}

/* ----- FORMS ----- */
.form-group {
    margin-bottom: 18px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

input,
select,
textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 15px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: border 0.2s, box-shadow 0.2s;
    font-family: var(--font);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

body.dark select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c8cde0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* ----- BUTTONS ----- */
button {
    width: 100%;
    padding: 11px 16px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    font-family: var(--font);
    letter-spacing: 0.1px;
}

button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

button:active {
    transform: translateY(0);
}

button.secondary {
    background: var(--border-color);
    color: var(--text-secondary);
    box-shadow: none;
}

button.secondary:hover {
    background: var(--text-muted);
    color: white;
}

button.icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transform: none;
}

button.icon-btn:hover {
    background: var(--border-color);
    transform: none;
    box-shadow: none;
}

.modal-content button:not(.icon-btn) {
    width: auto;
    min-width: 80px;
}

/* ----- ERROR / SUCCESS MESSAGES ----- */
.error-message {
    color: var(--danger);
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
}

.success-message {
    color: var(--success);
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
}

/* ----- TABS ----- */
.tabs {
    display: flex;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border-color);
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    font-size: 14px;
}

.tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* ----- UTILITY ----- */
.hidden {
    display: none !important;
}

/* ============================================
   DASHBOARD CONTAINER
   ============================================ */
.dashboard-container {
    display: flex;
    height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--bg-secondary);
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    --sidebar-right-width: 220px;
    width: calc(80px + var(--sidebar-right-width));
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    position: relative;
}

/* TOP ROW */
.sidebar-top-row {
    display: flex;
    height: 65px;
    box-sizing: border-box;
}

/* MIDDLE ROW */
.sidebar-middle-row {
    flex: 1;
    display: flex;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

/* LEFT COLUMN (groups/servers) */
.sidebar-col-left {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
}

.btnBringMiddle {
    justify-content: center;
}

/* RIGHT COLUMN */
.sidebar-col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-resize-handle {
    position:absolute;
    top:0;
    right:-4px;
    bottom:0;
    width:8px;
    cursor:col-resize;
    z-index:40;
    touch-action:none;
}
.sidebar-resize-handle::after {
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:3px;
    width:2px;
    background:transparent;
    transition:background .15s;
}
.sidebar-resize-handle:hover::after,
.sidebar.resizing .sidebar-resize-handle::after { background:var(--accent-color); }
body.sidebar-resizing { cursor:col-resize !important; user-select:none !important; }
@media (max-width: 768px) {
    .sidebar-resize-handle { display:none; }
}

/* CHATS SECTION */
#chatsSection {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* SIDEBAR LABELS */
.sidebar-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    text-align: center;
}

.sidebar-col-right .sidebar-label {
    cursor: pointer;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: inline-block;
    user-select: none;
    margin: 8px;
}

.sidebar-col-right .sidebar-label:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* SIDEBAR FOOTER */
.sidebar-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 16px;
    background: var(--bg-sidebar);
}

.sidebar-footer .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* SIDEBAR MENU */
.sidebar-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 168px;
    overflow: hidden;
    visibility: visible;
}

.sidebar-menu button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    color: var(--text-primary);
    font-size: 14px;
    border-radius: 0;
    transition: background 0.15s;
    transform: none;
    box-shadow: none;
}

.sidebar-menu button:hover {
    background: var(--border-color);
    transform: none;
    box-shadow: none;
}

/* Typing indicator */
.typing-indicator {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 0;
    white-space: nowrap;
}

/* Conversation items */
.conversation-info {
    flex: 1;
    min-width: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.conversation-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.display-name-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.verified-badge-placeholder {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.verified-badge-placeholder .verified-badge {
    display: inline-block;
    vertical-align: middle;
}

.verified-badge-placeholder img,
.verified-badge img {
    width: auto;
    height: auto;
    max-width: 16px;
    max-height: 16px;
    display: block;
}

.conversation-display-name {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: visible;
}

.conversation-display-name .display-name-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.conversation-display-name .verified-badge {
    flex-shrink: 0;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.verified-badge img {
    width: auto;
    height: auto;
    max-width: 16px;
    max-height: 16px;
    display: block;
}

.conversation-username {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

#chatsList .group-item .unread-badge {
    position: absolute;
    top: 2px;
    right: 2px;
}

#confirmMessage {
    white-space: pre-line;
    line-height: 1.5;
    z-index: 100;
}

#callerRingingOverlay,
#incomingCallOverlay {
    display: flex;
    flex-direction: column;
}

/* DIRECT CALL BAR */
#directCallBar.show {
    display: block !important;
    max-height: 80px !important;
}

#directCallBar .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--border-color);
    color: var(--text-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

#directCallBar .icon-btn:hover {
    background: var(--text-muted);
    color: white;
}

#directCallEndBtn {
    background: var(--danger) !important;
    color: white !important;
}

#directCallSelfVideo {}

/* Direct Call Return Banner */
.direct-call-return-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(145deg, var(--accent-color), var(--accent-hover));
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
    z-index: 500;
    max-width: calc(100vw - 40px);
    transition: opacity 0.3s;
    cursor: default;
}

.direct-call-return-banner .banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.direct-call-return-banner .banner-icon {
    font-size: 20px;
}

.direct-call-return-banner .banner-duration {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
}

.direct-call-return-banner .banner-actions {
    display: flex;
    gap: 8px;
}

.direct-call-return-banner .banner-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    width: auto;
    transition: background 0.2s;
    transform: none;
    box-shadow: none;
}

.direct-call-return-banner .banner-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: none;
}

.direct-call-return-banner .banner-btn-leave {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

/* Floating remote video */
#floatingRemoteVideo {
    transition: opacity 0.2s;
}

#floatingRemoteVideo.dragging {
    opacity: 0.9;
}

#floatingVideoContainer video {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    background: #000;
}

/* Conversation item adjustments for chatsList */
#chatsList .group-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-height: 52px;
    padding: 6px 10px;
    gap: 10px;
}

#chatsList .group-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 0;
}

/* ============================================
   AVATARS & GROUP ITEMS
   ============================================ */
.avatar {
    position: relative;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
}

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

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


/* ── Left rail redesign (Discord-style) ──────────────────────────────────── */

/* Top-left Chat/Direct-Messages button (replaces the old add button). */
.dm-home-btn {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* Total unread-DM counter on the DM-home icon. */
.dm-home-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg-primary);
}
.dm-home-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.dm-home-btn .icon-svg { width: 24px; height: 24px; }

/* The left rail scrolls its middle (groups) while the DM avatars stay on top
   and the create-server button stays pinned at the bottom. */
.sidebar-middle-row .sidebar-col-left {
    overflow: hidden;
    padding-bottom: 8px;
}
.sidebar-col-left .dm-rail-list {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    /* push the DM avatars down from the top of the rail */
    margin-top: 12px;
}
.sidebar-col-left .dm-rail-divider {
    flex-shrink: 0;
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: var(--border-color);
    margin: 6px 0;
}
.sidebar-col-left .groups-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* DM-sender avatar in the rail — a rounded SQUARE matching the group items. */
.dm-rail-item {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    cursor: pointer;
    overflow: visible;
    transition: border-radius 0.18s, transform 0.15s;
    flex-shrink: 0;
}
.dm-rail-item .dm-rail-avatar {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}
.dm-rail-item .dm-rail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-rail-item:hover { border-radius: var(--radius-lg); transform: translateY(-1px); }
.dm-rail-item:hover .dm-rail-avatar { border-radius: var(--radius-lg); }

/* Wipe-out "puff" when a DM-rail avatar is clicked (it's opening + clearing). */
.dm-rail-item.dm-puff {
    animation: dmRailPuff 0.26s ease-out forwards;
    pointer-events: none;
}
@keyframes dmRailPuff {
    0%   { transform: scale(1);    opacity: 1; filter: blur(0); }
    45%  { transform: scale(1.28); opacity: 0.85; }
    100% { transform: scale(1.7);  opacity: 0; filter: blur(4px); }
}
/* Pending-request counters on the "Pending Requests" tab: incoming (green ⬇)
   and outgoing (red ⬆), shown side by side and updated in real time. */
.req-badge {
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 9px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    top: -1px;
    vertical-align: middle;
}
.req-badge-in { background: #2faa5a; }   /* incoming – green */
.req-badge-out { background: var(--danger); }  /* outgoing – red */

.dm-rail-item .unread-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-sidebar);
    box-sizing: border-box;
}

/* Create-server "+" button — pinned at the bottom of the rail, not draggable. */
.add-server-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-top: 8px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.add-server-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}
.add-server-btn .icon-svg { width: 22px; height: 22px; filter: brightness(0) invert(1); }

/* Explore button — sits just below the "+"; opens the search (groups + users)
   window. Neutral styling so it reads as secondary to the accent "+" button. */
.explore-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-top: 8px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.explore-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.05);
}

/* ── Right column group header (name + dropdown to settings) ─────────────── */
.group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0 14px;
    gap: 8px;
}
.group-header-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-header-dropdown {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.group-header-dropdown:hover { background: var(--bg-secondary); }
.group-header-dropdown .icon-svg { width: 18px; height: 18px; }

.chats-list {
    align-items: flex-start !important;
}

.groups-list,
.chats-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 4px 0;
}

/* Settings members */
#settingsMembersList {
    max-height: 200px;
    overflow-y: auto;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 4px 0;
}

.settings-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.settings-member-item:last-child {
    border-bottom: none;
}

.settings-member-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    overflow: hidden;
}

.settings-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-member-name {
    font-size: 14px;
}

.settings-member-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-member-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ============================================
   SLASH COMMAND BUTTON & MENU
   ============================================ */
.slash-cmd-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
    line-height: 1;
}
.slash-cmd-btn:hover,
.slash-cmd-btn[aria-expanded="true"] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.slash-cmd-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 200;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.22);
    min-width: 260px;
    max-width: 320px;
    padding: 6px;
    animation: slashMenuIn 0.15s ease;
}
@keyframes slashMenuIn {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.slash-cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.slash-cmd-item:hover,
.slash-cmd-item:focus {
    background: var(--hover-color);
    outline: none;
}
.slash-cmd-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.slash-cmd-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.slash-cmd-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.slash-cmd-desc {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Anchor the slash menu relative to the chat-input container */
.chat-input {
    position: relative;
}

/* ============================================
   MUSIC PARTY PLAYER CARD
   Mirrors the Music Party app's room-player layout:
   large artwork + track meta + progress + controls,
   using InTeraNet's own icon set (public/icons/Svg/Bold).
   ============================================ */
.music-party-player-card {
    --mpc-bg:     #0d0d12;
    --mpc-surface:#15151f;
    --mpc-surface2:#1c1c28;
    --mpc-border: rgba(255,255,255,0.08);
    --mpc-border2:rgba(255,255,255,0.14);
    --mpc-text:   #e2e8f0;
    --mpc-muted:  #7c849a;
    --mpc-dim:    #555d74;
    --mpc-accent: #7c6af7;
    --mpc-accent2:#9d8fff;
    --mpc-pink:   #ff6ba7;
    --mpc-glow:   rgba(124,106,247,0.25);

    width: 360px;
    max-width: 100%;
    margin: 6px 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--mpc-surface);
    border: 1px solid var(--mpc-border);
    box-shadow: 0 12px 36px rgba(0,0,0,.4);
    color: var(--mpc-text);
    font-family: inherit;
    transition: box-shadow .2s, border-color .2s;
}
.music-party-player-card:hover {
    box-shadow: 0 16px 44px rgba(0,0,0,.5);
    border-color: var(--mpc-border2);
}

/* ── Header: brand + open-in-MP link ─────────────────────────────────────── */
.mpc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mpc-border);
    background: var(--mpc-surface2);
}
.mpc-brand-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mpc-brand-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mpc-accent), var(--mpc-pink));
    color: #fff;
}
.mpc-brand-icon svg { width: 14px; height: 14px; }
.mpc-brand-icon img { width: 14px; height: 14px; }
.mpc-brand-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mpc-accent2);
}
.mpc-open-link {
    flex-shrink: 0;
    color: var(--mpc-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.mpc-open-link:hover {
    color: var(--mpc-text);
    background: rgba(255,255,255,.06);
}
.mpc-open-link svg, .mpc-open-link img { width: 14px; height: 14px; }

/* ── Body: artwork + track meta (like MP room player) ────────────────────── */
.mpc-body {
    display: flex;
    gap: 14px;
    padding: 16px 14px 12px;
    align-items: center;
}
.mpc-artwork-wrap {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
}
.mpc-artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.4);
}
.mpc-artwork-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mpc-accent), var(--mpc-pink));
    color: #fff;
}
.mpc-artwork-placeholder svg { width: 40px; height: 40px; opacity: .6; }
.mpc-artwork-glow {
    position: absolute;
    inset: -8px;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 50%, var(--mpc-glow), transparent 70%);
    filter: blur(12px);
    z-index: -1;
    opacity: 0;
    transition: opacity .3s;
}
.music-party-player-card:hover .mpc-artwork-glow { opacity: 1; }

.mpc-live-badge {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(13,13,18,.85);
    backdrop-filter: blur(6px);
    border: 1px solid var(--mpc-border2);
    font-size: 10px;
    font-weight: 700;
    color: var(--mpc-pink);
    white-space: nowrap;
}
.mpc-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mpc-pink);
}
.mpc-live-dot.is-pulsing { animation: mpcBreathe 1.6s ease-in-out infinite; }
.mpc-live-text {
    /* badge label; inherits pink color from .mpc-live-badge */
}

.mpc-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mpc-room-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mpc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mpc-track-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mpc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mpc-track-artist {
    font-size: 13px;
    color: var(--mpc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mpc-track-uploader {
    margin-top: 2px;
    font-size: 11px;
    color: var(--mpc-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Progress timeline ───────────────────────────────────────────────────── */
.mpc-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 10px;
}
.mpc-time-current,
.mpc-time-end {
    font-size: 10px;
    color: var(--mpc-muted);
    min-width: 32px;
    flex-shrink: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mpc-time-end { text-align: right; }
.mpc-progress-track {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    cursor: default;
    pointer-events: none;
    overflow: hidden;
}
.mpc-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mpc-accent), var(--mpc-pink));
    transition: width .3s linear;
}

/* ── Controls row: play/pause, stop, mute, volume, %, state pill ─────────── */
.mpc-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 14px;
    flex-wrap: wrap;
}
.mpc-ctrl {
    appearance: none;
    border: 1px solid var(--mpc-border2);
    background: var(--mpc-surface2);
    color: var(--mpc-text);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, transform .08s, opacity .15s;
}
.mpc-ctrl svg, .mpc-ctrl img { width: 16px; height: 16px; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mpc-ctrl:hover:not(:disabled) {
    background: var(--mpc-surface2);
    border-color: var(--mpc-accent);
    color: var(--mpc-accent2);
}
.mpc-ctrl:active:not(:disabled) { transform: scale(.95); }
.mpc-ctrl:disabled { opacity: .3; cursor: default; }

/* Stop and volume button use .mpc-ctrl base; no extra rules needed */
.mpc-stop { /* inherits .mpc-ctrl */ }
.mpc-vol-btn { /* inherits .mpc-ctrl */ }

/* Play/Pause is the primary control — gradient fill like MP's main button */
.mpc-play-pause {
    background: linear-gradient(135deg, var(--mpc-accent), var(--mpc-pink));
    border-color: transparent;
    color: #fff;
    width: 40px;
    height: 40px;
    box-shadow: 0 6px 16px var(--mpc-glow);
}
.mpc-play-pause svg, .mpc-play-pause img { width: 20px; height: 20px; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mpc-play-pause:hover:not(:disabled) {
    opacity: .92;
    box-shadow: 0 8px 20px rgba(124,106,247,.45);
}
.mpc-play-pause:disabled {
    background: var(--mpc-surface2);
    box-shadow: none;
    border-color: var(--mpc-border2);
    color: var(--mpc-dim);
}

/* Volume: button + slider grouped */
.mpc-vol-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 80px;
}
.mpc-vol-slider {
    flex: 1;
    min-width: 0;
    height: 4px;
    border-radius: 2px;
    accent-color: var(--mpc-accent);
    cursor: pointer;
}
.mpc-vol-slider:disabled { opacity: .4; cursor: default; }
.mpc-vol-pct {
    font-size: 10px;
    color: var(--mpc-muted);
    white-space: nowrap;
    min-width: 32px;
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* State pill — Listening / Paused / Live / Idle */
.mpc-state-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--mpc-border2);
    background: rgba(255,255,255,.04);
    color: var(--mpc-muted);
    white-space: nowrap;
}
.mpc-state-pill--idle      { color: var(--mpc-muted); background: rgba(255,255,255,.03); border-color: var(--mpc-border); }
.mpc-state-pill--live      { color: var(--mpc-pink);  background: rgba(255,107,167,.14); border-color: rgba(255,107,167,.4); }
.mpc-state-pill--paused    { color: #f59e0b;          background: rgba(245,158,11,.14);  border-color: rgba(245,158,11,.4); }
.mpc-state-pill--listening { color: var(--mpc-accent2); background: var(--mpc-glow);     border-color: rgba(124,106,247,.45); }

@keyframes mpcBreathe {
    0%   { opacity: .4; transform: scale(.85); }
    50%  { opacity: 1;  transform: scale(1.25); }
    100% { opacity: .4; transform: scale(.85); }

/* ── Iframe card override ── */
.mpc-iframe-card {
    width: 100% !important;
    max-width: 500px;
    padding: 0 !important;
    background: #0d0d12 !important;
    border-radius: 16px;
    overflow: hidden;
}
.mpc-iframe-card iframe { display: block; }}

/* ============================================
   INVITE CARD
   ============================================ */
.invite-card {
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 14px 18px;
    max-width: 560px;
    width: 100%;
    margin: 10px auto;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s;
    animation: cardFadeIn 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.invite-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), #a78bfa, var(--accent-color));
    opacity: 0.8;
}

.invite-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

@keyframes cardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.invite-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.invite-card-group-name {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.3px;
    background: linear-gradient(135deg, var(--accent-color), #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.invite-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 100px;
}

.invite-card-timer {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-primary);
    border-left: 3px solid var(--accent-color);
    transition: background 0.2s, border-color 0.2s;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    letter-spacing: 0.3px;
}

body.dark .invite-card-timer {
    background: rgba(129, 140, 248, 0.12);
}

.invite-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.invite-card-join-btn,
.invite-card-ping-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.invite-card-join-btn {
    background: linear-gradient(145deg, var(--accent-color), var(--accent-hover));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.invite-card-join-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.invite-card-join-btn:hover::before {
    width: 240px;
    height: 240px;
}

.invite-card-join-btn:hover {
    transform: scale(1.01);
    box-shadow: 0 5px 12px rgba(99, 102, 241, 0.35);
}

.invite-card-join-btn:active {
    transform: scale(0.98);
}

.invite-card-join-btn:disabled {
    background: var(--border-color);
    color: var(--text-muted);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    opacity: 0.6;
    border-color: transparent;
}

.invite-card-ping-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
    box-shadow: none;
}

.invite-card-ping-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
    border-color: var(--accent-color);
    transform: scale(1.01);
}

.invite-card-success {
    color: var(--success);
    font-weight: 600;
    text-align: center;
    padding: 12px 8px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-md);
    animation: successPop 0.3s ease;
    font-size: 14px;
}

@keyframes successPop {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    80% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.invite-card-error {
    color: var(--danger);
    font-style: italic;
    text-align: center;
    padding: 10px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 10px;
    font-size: 13px;
}

.invite-card-timer[data-expiring="true"] {
    animation: pulseWarning 1.8s infinite;
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    font-weight: 700;
}

@keyframes pulseWarning {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
        border-left-color: var(--danger);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
        border-left-color: #f87171;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
        border-left-color: var(--danger);
    }
}

/* Mentions */
.mention {
    background: rgba(99, 102, 241, 0.18);
    color: var(--accent-color);
    font-weight: 600;
    padding: 1px 6px 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    display: inline;
    border: none;
    text-decoration: none !important;
    white-space: nowrap;
}

.mention:hover {
    background: var(--accent-color);
    color: #fff;
}

body.dark .mention {
    background: rgba(129, 140, 248, 0.22);
    color: #a5b4fc;
}

body.dark .mention:hover {
    background: var(--accent-color);
    color: #fff;
}

body.dark .message.own.mentions-me {
    background: #4a3a1a !important;
    color: #f7fafc;
}

.message-row.mentions-me {
    background: rgba(99, 102, 241, 0.08) !important;
    border-radius: 8px;
    align-self: stretch;
    width: 100% !important;
    padding: 6px 8px;
    position: relative;
}

.message-row.mentions-me .mention {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 2px !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent-color);
    text-underline-offset: 2px;
}

.media-grid-item:hover {
    opacity: 0.9;
    cursor: pointer;
}

.message-row.mentions-me .message {
    box-shadow: none;
    max-width: none !important;
}

.message-row.mentions-me .message.own {
    color: var(--message-own-text, #ffffff);
}

.message.own .mention {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-weight: 600;
}

.message.own .mention:hover {
    background: rgba(255, 255, 255, 0.45) !important;
}

body.dark .message.own .mention {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.message:not(.own) .mention {
    background: rgba(99, 102, 241, 0.18) !important;
    color: var(--accent-color) !important;
    font-weight: 600;
}

body.dark .message:not(.own) .mention {
    background: rgba(129, 140, 248, 0.22) !important;
    color: #a5b4fc !important;
}

/* ── @everyone mention ─────────────────────────────────────────────────── */
.mention-everyone {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    font-weight: 700 !important;
    cursor: default !important;
    animation: everyone-pulse 2s ease-in-out 1;
}

.mention-everyone:hover {
    background: rgba(239, 68, 68, 0.28) !important;
    color: #ef4444 !important;
}

body.dark .mention-everyone {
    background: rgba(248, 113, 113, 0.18) !important;
    color: #f87171 !important;
}

body.dark .mention-everyone:hover {
    background: rgba(248, 113, 113, 0.30) !important;
    color: #f87171 !important;
}

.message.own .mention-everyone {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffe0e0 !important;
}

@keyframes everyone-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* @everyone in mention popup */
.mention-item-everyone .mention-item-avatar {
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
    font-size: 15px !important;
}

.mention-item-everyone .mention-item-name {
    color: #ef4444;
}

body.dark .mention-item-everyone .mention-item-name {
    color: #f87171;
}

.mention-item-everyone:hover .mention-item-name,
.mention-item-everyone.selected .mention-item-name {
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Role Badges  –  Owner / Admin / Member
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- entrance animation ---------- */
@keyframes badge-pop {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(4px);
    }

    65% {
        transform: scale(1.08) translateY(-1px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ---------- travelling shine overlay ---------- */
@keyframes badge-shine {
    0% {
        left: -80%;
    }

    60% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}

/* ---------- soft ambient glow pulse (owner & admin only) ---------- */
@keyframes badge-glow-owner {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, .0), 0 2px 6px rgba(245, 158, 11, .45);
    }

    50% {
        box-shadow: 0 0 8px 2px rgba(251, 191, 36, .35), 0 2px 8px rgba(245, 158, 11, .55);
    }
}

@keyframes badge-glow-admin {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(129, 140, 248, .0), 0 2px 6px rgba(99, 102, 241, .45);
    }

    50% {
        box-shadow: 0 0 8px 2px rgba(129, 140, 248, .35), 0 2px 8px rgba(99, 102, 241, .55);
    }
}

/* ---------- base ---------- */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    padding: 2px 7px 2px 6px;
    border-radius: 5px;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 15px;
    position: relative;
    top: -1px;
    overflow: hidden;
    user-select: none;
    cursor: default;
    animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

/* shine pseudo-element (runs on hover or continuously for owner/admin) */
.role-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent 20%,
            rgba(255, 255, 255, 0.38) 50%,
            transparent 80%);
    transform: skewX(-15deg);
    pointer-events: none;
}

.role-badge:hover::after {
    animation: badge-shine 0.55s ease forwards;
}

.role-badge:hover {
    transform: scale(1.08) translateY(-1px);
    filter: brightness(1.08);
}

/* ── Owner ─────────────────────────────────────────────────────────────── */
.role-badge--owner {
    background: linear-gradient(135deg, #f6b41a 0%, #e07b08 55%, #c96a00 100%);
    color: #fff;
    border: 1px solid rgba(255, 210, 80, .35);
    box-shadow: 0 2px 6px rgba(245, 158, 11, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
    animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        badge-glow-owner 2.8s ease-in-out 0.6s infinite;
}

.role-badge--owner .badge-icon {
    font-size: 10px;
    line-height: 1;
}

/* continuous shine for owner (loops every 3.5 s) */
.role-badge--owner::after {
    animation: badge-shine 1.1s ease 0.8s infinite;
    animation-delay: 1s;
}

body.dark .role-badge--owner {
    background: linear-gradient(135deg, #fdd44a 0%, #f59e0b 55%, #d97706 100%);
    border-color: rgba(255, 220, 90, .4);
    box-shadow: 0 2px 7px rgba(251, 191, 36, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* ── Admin ─────────────────────────────────────────────────────────────── */
.role-badge--admin {
    background: linear-gradient(135deg, #7c7ff5 0%, #5355d4 55%, #4238c8 100%);
    color: #fff;
    border: 1px solid rgba(160, 163, 255, .35);
    box-shadow: 0 2px 6px rgba(99, 102, 241, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
    animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        badge-glow-admin 3s ease-in-out 0.6s infinite;
}

.role-badge--admin .badge-icon {
    font-size: 10px;
    line-height: 1;
}

/* continuous shine for admin */
.role-badge--admin::after {
    animation: badge-shine 1.1s ease 1.3s infinite;
}

body.dark .role-badge--admin {
    background: linear-gradient(135deg, #a5a8ff 0%, #818cf8 50%, #6366f1 100%);
    border-color: rgba(165, 168, 255, .4);
    box-shadow: 0 2px 7px rgba(129, 140, 248, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ── Member ────────────────────────────────────────────────────────────── */
.role-badge--member {
    background: rgba(120, 120, 140, .12);
    color: var(--text-muted);
    border: 1px solid rgba(120, 120, 140, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    font-weight: 600;
}

.role-badge--member .badge-icon {
    font-size: 10px;
    line-height: 1;
    opacity: .75;
}

body.dark .role-badge--member {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
    color: var(--text-muted);
}

/* Voice participants — always-expanded, compact list under each voice channel.
   Rows are deliberately short so a busy channel fits many members at once. */
.voice-participants-list {
    border-left: 1px dashed var(--border-color);
    margin-left: 18px;
    padding-left: 8px;
    margin-bottom: 4px;
}

.voice-participant-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.voice-participant-item:hover {
    background: var(--border-color);
}

/* Avatars are always circular and small. */
.voice-participant-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
}

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

.voice-participant-name {
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ============================================
   CALL ACTIVE BANNER (draggable)
   ============================================ */
.call-active-banner {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(145deg, var(--accent-color), var(--accent-hover));
    color: white;
    padding: 8px 12px 8px 16px;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    user-select: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: calc(100vw - 40px);
    cursor: grab;
    transition: box-shadow 0.2s;
    backdrop-filter: blur(4px);
}

.call-active-banner:active {
    cursor: grabbing;
}

.call-active-banner:hover {
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.45);
}

.banner-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: grab;
    font-size: 20px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.banner-drag-handle:active {
    cursor: grabbing;
    background: rgba(255, 255, 255, 0.25);
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.banner-icon {
    font-size: 20px;
}

.banner-text {
    font-size: 14px;
    opacity: 0.9;
}

.banner-count {
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 20px;
}

.banner-actions {
    display: flex;
    gap: 6px;
}

.banner-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    width: auto;
    transform: none;
    box-shadow: none;
}

.banner-return-btn,
.banner-leave-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
    transform: none;
    box-shadow: none;
}

.banner-return-btn:hover,
.banner-leave-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.banner-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.banner-return-btn {
    font-size: 16px;
}

.banner-btn-leave {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
}

.banner-btn,
.banner-btn * {
    cursor: pointer;
}

/* SIDEBAR VOICE CALL BANNER */
.sidebar-call-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(145deg, var(--accent-color), var(--accent-hover));
    color: white;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.call-banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Live ping / packet-loss readout, sits directly above the call banner */
.sidebar-call-stats {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    background: var(--bg-tertiary, rgba(0,0,0,0.25));
    color: var(--text-secondary, #b9bbbe);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.sidebar-call-stats .ccs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sidebar-call-stats .ccs-sep { opacity: 0.5; }
.sidebar-call-stats .ccs-ping { font-weight: 600; }

/* SVG ICON STYLES */
.btn-icon,
.channel-icon,
.participant-mic-icon,
.video-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

.video-container.speaking {
    box-shadow: 0 0 20px 5px var(--accent-color);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: scale(1.02);
}

.btn-icon svg,
.channel-icon svg,
.participant-mic-icon svg,
.video-indicator svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

#muteBtn svg,
#cameraBtn svg,
#screenShareBtn svg,
#leaveBtn svg {
    width: 22px;
    height: 22px;
}

.participant-mic-icon svg {
    width: 14px;
    height: 14px;
}

.video-indicator svg {
    width: 12px;
    height: 12px;
}

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

/* ============================================
   THEME PICKER
   ============================================ */

/* MIDNIGHT THEME */
body.midnight {
    --bg-primary: #020617;
    --bg-secondary: #0d1224;
    --bg-sidebar: #0d1224;
    --bg-hover: #18213b;
    --border-color: #1e2a4a;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --accent-color: #818cf8;
    --accent-hover: #6366f1;
    --message-bg: #1e293b;
    --message-own-bg: #4f46e5;
    --message-own-text: #ffffff;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7);
    --danger: #f87171;
    --success: #4ade80;
    background: linear-gradient(135deg, #020617 0%, #0d1224 100%);
}

body.midnight .modal-content,
body.midnight .settings-panes,
body.midnight .chat-input {
    background: #0d1224;
    border-color: #1e2a4a;
}

body.midnight input,
body.midnight textarea,
body.midnight select {
    background: #020617;
    border-color: #1e2a4a;
    color: #e2e8f0;
}

body.midnight button.secondary {
    background: #1e2a4a;
    color: #cbd5e1;
}

/* FOREST THEME */
body.forest {
    --bg-primary: #022c22;
    --bg-secondary: #064e3b;
    --bg-sidebar: #064e3b;
    --bg-hover: rgba(255, 255, 255, 0.11);
    --border-color: rgba(255, 255, 255, 0.15);
    --text-primary: #d1fae5;
    --text-secondary: #a7f3d0;
    --text-muted: #6ee7b7;
    --accent-color: #34d399;
    --accent-hover: #10b981;
    --message-bg: #064e3b;
    --message-own-bg: #059669;
    --message-own-text: #ffffff;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --danger: #f87171;
    --success: #4ade80;
    background: linear-gradient(135deg, #022c22 0%, #064e3b 100%);
}

body.forest .modal-content,
body.forest .settings-panes,
body.forest .chat-input {
    background: #064e3b;
    border-color: rgba(255, 255, 255, 0.1);
}

body.forest input,
body.forest textarea,
body.forest select {
    background: #022c22;
    border-color: rgba(255, 255, 255, 0.1);
    color: #d1fae5;
}

body.forest button.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #a7f3d0;
}

/* OCEAN THEME */
body.ocean {
    --bg-primary: #0c1929;
    --bg-secondary: #0f2847;
    --bg-sidebar: #0f2847;
    --bg-hover: #17395d;
    --border-color: #1a3a5c;
    --text-primary: #e0f0ff;
    --text-secondary: #b8d8f8;
    --text-muted: #78a8d8;
    --accent-color: #38bdf8;
    --accent-hover: #0ea5e9;
    --message-bg: #0f2847;
    --message-own-bg: #1d4ed8;
    --message-own-text: #ffffff;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --danger: #f87171;
    --success: #4ade80;
    background: linear-gradient(135deg, #0c1929 0%, #0f2847 100%);
}

body.ocean .modal-content,
body.ocean .settings-panes,
body.ocean .chat-input {
    background: #0f2847;
    border-color: #1a3a5c;
}

body.ocean input,
body.ocean textarea,
body.ocean select {
    background: #0c1929;
    border-color: #1a3a5c;
    color: #e0f0ff;
}

body.ocean button.secondary {
    background: #1a3a5c;
    color: #b8d8f8;
}

/* VS DARK THEME */
body.vs-dark {
    --bg-primary: #1e1e1e;
    --bg-secondary: #252526;
    --bg-sidebar: #252526;
    --bg-hover: #333337;
    --border-color: #3c3c3c;
    --text-primary: #d4d4d4;
    --text-secondary: #cccccc;
    --text-muted: #848484;
    --accent-color: #4ec9b0;
    --accent-hover: #2db896;
    --message-bg: #2d2d30;
    --message-own-bg: #094771;
    --message-own-text: #ffffff;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --danger: #f48771;
    --success: #4ec9b0;
    background: linear-gradient(135deg, #1e1e1e 0%, #252526 100%);
}

body.vs-dark .modal-content,
body.vs-dark .settings-panes,
body.vs-dark .chat-input {
    background: #252526;
    border-color: #3c3c3c;
}

body.vs-dark input,
body.vs-dark textarea,
body.vs-dark select {
    background: #1e1e1e;
    border-color: #3c3c3c;
    color: #d4d4d4;
}

body.vs-dark button.secondary {
    background: #3c3c3c;
    color: #cccccc;
}

/* GALAXY THEME */
body.galaxy {
    --bg-primary: #0b0410;
    --bg-secondary: #150b24;
    --bg-sidebar: #150b24;
    --bg-hover: #24143a;
    --border-color: #2d1b4e;
    --text-primary: #f0e6ff;
    --text-secondary: #d8b4fe;
    --text-muted: #a78bfa;
    --accent-color: #c084fc;
    --accent-hover: #a855f7;
    --message-bg: #1f1035;
    --message-own-bg: #7c3aed;
    --message-own-text: #ffffff;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7);
    --danger: #f87171;
    --success: #4ade80;
    background: linear-gradient(135deg, #0b0410 0%, #150b24 60%, #1a0a2e 100%);
}

body.galaxy .modal-content,
body.galaxy .settings-panes,
body.galaxy .chat-input {
    background: #150b24;
    border-color: #2d1b4e;
}

body.galaxy input,
body.galaxy textarea,
body.galaxy select {
    background: #0b0410;
    border-color: #2d1b4e;
    color: #f0e6ff;
}

body.galaxy button.secondary {
    background: #2d1b4e;
    color: #d8b4fe;
}

/* ============================================
   GROUP ITEMS & REPLY PREVIEW
   ============================================ */
#groupsList .group-item {
    margin-top: 4px;
}

#groupsList .group-item:first-child {
    margin-top: 0;
}

.group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    cursor: grab;
    transition: background 0.2s, transform 0.15s;
    position: relative;
    background: transparent;
}

/* Reply preview bar */
#replyPreviewBar {
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#replyPreviewSender {
    font-size: 12px;
    color: var(--accent-color);
    font-weight: 600;
}

#replyPreviewText {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#emojiBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s, transform 0.1s;
}

#emojiBtn:hover {
    color: var(--accent-color);
    background: rgba(99, 102, 241, 0.08);
    transform: scale(1.1);
}

#emojiBtn.active {
    color: var(--accent-color);
    background: rgba(99, 102, 241, 0.12);
}

#attachBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s, transform 0.1s;
}

#attachBtn:hover {
    color: var(--accent-color);
    background: rgba(99, 102, 241, 0.08);
    transform: scale(1.1);
}

/* Reply bubble */
.reply-bubble {
    background: var(--bg-sidebar);
    border-left: 3px solid var(--accent-color);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 13px;
    max-width: 100%;
    overflow: hidden;
}

.reply-bubble .reply-bubble-sender {
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 2px;
}

.reply-bubble .reply-bubble-content {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-bubble:hover {
    background: var(--border-color);
}

/* Reply bubble – rich media/file preview strip */
.reply-bubble-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.reply-bubble-left {
    flex-shrink: 0;
}

.reply-bubble-text {
    min-width: 0;
    flex: 1;
}

.reply-bubble-media {
    display: flex;
    gap: 3px;
    align-items: center;
}

.rb-thumb {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.rb-thumb-img img,
.rb-thumb-vid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rb-thumb-fallback {
    font-size: 18px;
    line-height: 1;
}

.rb-thumb-vid .rb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 11px;
}

.rb-thumb-file {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.rb-thumb-file .rb-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.rb-thumb-file .rb-file-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.rb-thumb-overflow {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border-color);
}

/* Reply bubble – rich media/file preview strip */
.reply-bubble-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.reply-bubble-left {
    flex-shrink: 0;
}

.reply-bubble-text {
    min-width: 0;
    flex: 1;
}

.reply-bubble-media {
    display: flex;
    gap: 3px;
    align-items: center;
}

.rb-thumb {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.rb-thumb-img img,
.rb-thumb-vid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rb-thumb-fallback {
    font-size: 18px;
    line-height: 1;
}

.rb-thumb-vid .rb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 11px;
}

.rb-thumb-file {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.rb-thumb-file .rb-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.rb-thumb-file .rb-file-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.rb-thumb-overflow {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border-color);
}

/* Forward modal */
.forward-dest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.forward-dest-item:hover {
    background: var(--border-color);
}

.forward-dest-name {
    font-weight: 500;
}

.forward-dest-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Forwarded badge */
.forwarded-badge {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.forwarded-badge span {
    font-weight: 600;
    color: var(--accent-color);
}

/* Audio waveform */
.audio-waveform {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
    border-radius: inherit;
}

.group-item:active {
    cursor: grabbing;
}

.group-item:hover {
    background: var(--border-color);
    transform: scale(1.05);
}

.group-item.active {
    background: rgba(99, 102, 241, 0.15);
}

.group-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    transition: border-radius 0.2s;
}

.group-item.active .group-avatar {
    border-radius: var(--radius-xl);
}

.group-avatar .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}

.group-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.group-item.active .group-avatar {
    box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--accent-color);
}

.unread-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    z-index: 2;
}
/* Muted group: unread counter goes grey instead of red (Discord-style). The
   "@" marker text (set in JS) signals an unread mention while muted. */
.unread-badge.muted {
    background: var(--text-muted, #8a8f98);
    color: #fff;
}

/* ============================================
   FRIENDS PANEL
   ============================================ */
.friends-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.friends-header {
    border-bottom: 1px solid var(--border-color);
    min-height: 67px;
    height: 66px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: var(--bg-secondary);
}

.friends-tabs {
    display: flex;
    padding: 0 20px;
    gap: 20px;
}

.friends-tab {
    background: none;
    border: none;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    width: auto;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
    transform: none;
    box-shadow: none;
}

.friends-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.friends-tab:hover {
    background: rgba(128, 128, 128, 0.1);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

.friends-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.friend-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
}

.friend-item:hover {
    background: var(--border-color);
}

.friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

.friend-info {
    flex: 1;
}

.friend-name {
    font-weight: 600;
}

.friend-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.friend-actions button {
    width: auto;
    padding: 6px 12px;
    font-size: 13px;
}

.friend-menu-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    padding: 0;
    transform: none;
    box-shadow: none;
}

.friend-menu-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
    transform: none;
}

.friend-dropdown-menu {
    position: absolute;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 140px;
    overflow: hidden;
}

.friend-dropdown-menu button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    text-align: left;
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
    transition: background 0.15s;
}

.friend-dropdown-menu button:hover {
    background: var(--border-color);
    transform: none;
    box-shadow: none;
}

.friend-dropdown-menu .remove-friend-btn {
    color: var(--danger);
}

/* ============================================
   CHANNELS
   ============================================ */
#channelsSection {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.channels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 8px;
}

.channels-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
    overflow-x: hidden;
}

.channel-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 0.2s;
    color: var(--text-primary);
    font-size: 14px;
    position: relative;
}

.channel-item:hover {
    background: var(--border-color);
}

.channel-item.active {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
}

.channel-item.active-call {
    border-left: 3px solid #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.channel-icon {
    margin-right: 8px;
    font-size: 16px;
}

.channel-drag-handle {
    cursor: grab;
    margin-right: 6px;
    opacity: 0.6;
    font-size: 16px;
    user-select: none;
}

.channel-item.owner .channel-drag-handle,
.channel-item[draggable="true"] .channel-drag-handle {
    display: inline;
}

/* Unread separator */
.unread-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
}

.unread-separator-line {
    flex: 1;
    height: 1px;
    background: var(--danger);
    opacity: 0.4;
}

.unread-separator-text {
    white-space: nowrap;
}

.unread-banner {
    position: absolute;
    top: 70px;
    left: 20px;
    right: 20px;
    background: var(--accent-color);
    color: white;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow);
    border-radius: var(--radius-sm);
    display: none;
}

.unread-banner:hover {
    background: var(--accent-hover);
}

.add-channel-btn {
    display: none !important;
    /* removed in favour of right-click context menu */
}

/* ── Category sections ───────────────────────────────────────── */
.category-section {
    margin-bottom: 4px;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 4px 4px;
    cursor: default;
    user-select: none;
    border-radius: var(--radius-sm);
}

.category-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.category-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    box-shadow: none;
    transform: none;
}

.category-toggle:hover {
    color: var(--text-primary);
    background: var(--border-color);
    transform: none;
}

.category-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-channels {
    padding-left: 8px;
    /* Keeps empty categories droppable — SortableJS emptyInsertThreshold
       needs a non-zero bounding box to detect pointer proximity. */
    min-height: 8px;
}

/* Subtle "drop here" hint when a category has no channels yet */
.category-channels:empty {
    min-height: 32px;
    border: 1.5px dashed var(--border-color);
    border-radius: var(--radius-sm);
    margin: 2px 0 4px 8px;
    opacity: 0.5;
}

/* Category header turns into a drop target when a channel is dragged over it */
.category-header.chan-drag-over {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.18);
    outline: 1.5px solid var(--accent-color);
    border-radius: var(--radius-sm);
}

/* Ghost element (the placeholder left in place while dragging) */
.channel-drag-ghost {
    opacity: 0.35;
    background: var(--border-color) !important;
    border-radius: var(--radius-sm);
}

/* The item being dragged (highlighted in the list while cursor moves) */
.channel-drag-chosen {
    opacity: 0.85;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* A category block being dragged as a unit reads as one solid card */
.category-section.channel-drag-chosen {
    background: var(--bg-tertiary, rgba(127, 127, 127, 0.12));
    border-radius: var(--radius-md);
    outline: 1.5px solid var(--accent-color);
}

/* ── Group icon rail drag feel ──────────────────────────────────────── */
body.dragging-group #groupsList .group-item { cursor: grabbing; }

/* Placeholder slot left behind in the rail */
.group-drag-ghost {
    opacity: 0.25;
}
.group-drag-ghost .group-avatar {
    background: var(--border-color) !important;
    box-shadow: none !important;
}

/* The chosen source item (stays in the list under the floating clone) */
.group-drag-chosen {
    opacity: 0.4;
}

/* The floating clone that follows the pointer (forceFallback) */
.group-drag-fallback {
    opacity: 1 !important;
    cursor: grabbing;
    transform: scale(1.08);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
    z-index: 4000;
}

/* ── DM call-log message (centered system pill) ─────────────────────────── */
.call-log-row {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}
.call-log-bubble {
    font-size: 12.5px;
    color: var(--text-muted);
    background: var(--bg-tertiary, rgba(127, 127, 127, 0.12));
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 5px 14px;
    white-space: nowrap;
}

.voice-indicator-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--bg-sidebar);
    box-sizing: content-box;
    margin-right: -9px;
    transition: margin 0.1s;
}

.voice-participants-indicator {
    margin-left: auto;
    display: flex;
    gap: 2px;
}

.invite-recipient-item select {
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 4px;
}

.voice-participants-tooltip {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 12px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    min-width: 200px;
    max-width: 260px;
    z-index: 100;
    pointer-events: none;
}

.tooltip-participant {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: 10px;
}

.tooltip-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
}

.tooltip-name {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tooltip-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    background: var(--bg-primary);
}

/* ============================================
   CHAT HEADER
   ============================================ */
.chat-header {
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 67px;
    height: 66px;
    box-sizing: border-box;
    background: var(--bg-secondary);
    backdrop-filter: blur(8px);
}

#typingIndicator {
    font-style: italic;
    color: var(--text-muted);
    margin-left: 6px;
}

.chat-header-left {
    display: flex;
    flex-direction: column;
    position: relative;
}

.chat-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Collapsible message search: hidden until the search icon is clicked, then it
   fades/slides in. Scoped under .chat-header-right so it overrides the bare
   #searchInput width rules (incl. the mobile ones) without !important. */
.chat-header-right #searchInput {
    width: 0;
    min-width: 0;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    border-width: 0;
    overflow: hidden;
    pointer-events: none;
    box-sizing: border-box;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, border-width 0.2s ease;
}
.chat-header-right.search-open #searchInput {
    width: clamp(150px, 46vw, 230px);
    padding-left: 12px;
    padding-right: 12px;
    opacity: 1;
    border-width: 1.5px;
    pointer-events: auto;
}
@media screen and (max-width: 768px) {
    .chat-header-right.search-open #searchInput { width: 100%; flex: 1 1 auto; }
}

.chat-header-right button {
    width: auto;
    padding: 7px 14px;
    white-space: nowrap;
    font-size: 13px;
    border-radius: var(--radius-md);
}

#serverSettingsBtn {
    margin-right: 8px;
}

/* ============================================
   CHAT MESSAGES AREA
   ============================================ */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 15% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(167, 139, 250, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 40% 75%, rgba(99, 102, 241, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 55%, rgba(167, 139, 250, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 85%, rgba(99, 102, 241, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 80%, rgba(167, 139, 250, 0.04) 0%, transparent 55%);
}

body.dark .chat-messages {
    background-image:
        radial-gradient(ellipse at 10% 25%, rgba(99, 102, 241, 0.15) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(129, 140, 248, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 35% 70%, rgba(99, 102, 241, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 65% 50%, rgba(167, 139, 250, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 90%, rgba(99, 102, 241, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(129, 140, 248, 0.06) 0%, transparent 55%);
}

body.midnight .chat-messages {
    background-image:
        radial-gradient(ellipse at 5% 20%, rgba(109, 140, 255, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 15%, rgba(90, 122, 235, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 40% 70%, rgba(109, 140, 255, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 55%, rgba(90, 122, 235, 0.10) 0%, transparent 55%);
}

body.forest .chat-messages {
    background-image:
        radial-gradient(ellipse at 12% 28%, rgba(52, 211, 153, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 78% 18%, rgba(16, 185, 129, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 42% 72%, rgba(52, 211, 153, 0.08) 0%, transparent 55%);
}

body.ocean .chat-messages {
    background-image:
        radial-gradient(ellipse at 8% 22%, rgba(56, 189, 248, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 25%, rgba(14, 165, 233, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 38% 68%, rgba(56, 189, 248, 0.10) 0%, transparent 55%);
}

body.vs-dark .chat-messages {
    background-image:
        radial-gradient(ellipse at 12% 24%, rgba(78, 201, 176, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 76% 22%, rgba(14, 99, 156, 0.10) 0%, transparent 55%);
}

body.galaxy .chat-messages {
    background-image:
        radial-gradient(ellipse at 6% 18%, rgba(192, 132, 252, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 78% 12%, rgba(168, 85, 247, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 42% 72%, rgba(192, 132, 252, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 72% 55%, rgba(124, 58, 237, 0.10) 0%, transparent 55%);
}

/* ============================================
   CHAT INPUT
   ============================================ */
/* ===== Word counter & input wrapper ===== */
.message-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
    min-height: 46px;
}

.message-input-wrapper:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ── ContentEditable message input ──────────────────────── */
.message-input-wrapper #messageInput[contenteditable] {
    flex: 1;
    width: 100%;
    min-height: 44px;
    max-height: 120px;
    /* Symmetric padding by default so RTL/LTR text starts flush — the char
       counter is hidden until you're near the limit (see .counter-visible). */
    padding: 11px 16px;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    border-radius: 0;
    position: relative;
    z-index: 2;
    color: var(--text-primary);
    overflow-y: auto;
    word-break: break-word;
    white-space: pre-wrap;
    cursor: text;
    line-height: 1.5;
    font-size: 15px;
    font-family: var(--font);
    font-weight: 400;
    box-sizing: border-box;
    unicode-bidi: plaintext;
    text-align: start;
}

/* Placeholder shown when the div is empty */
.message-input-wrapper #messageInput[contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
    user-select: none;
}

/* Emoji images rendered inline inside the input */
.message-input-wrapper #messageInput img.px-emoji {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.25em;
    display: inline;
    cursor: text;
    pointer-events: none;
    user-select: none;
}

/* Emoji images inside the edit-message / edit-caption overlay.
   Without this rule the SVGs render at their natural viewBox size (36×36 px)
   inside a 15 px font — each emoji becomes 2× the line-height and the browser
   puts every image on its own tall "line", producing the column effect. */
#message-edit-overlay img.px-emoji {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.25em;
    display: inline !important;
    pointer-events: none;
    user-select: none;
}

/* Backdrop is no longer used — kept as stub so old JS refs are harmless */
.mention-backdrop {
    display: none;
}


.word-counter {
    /* Hidden until the user is close to the limit — keeps it out of the way of
       normal (and especially RTL) typing. Shown red by JS when remaining <= 100. */
    display: none;
    position: absolute;
    right: 12px;
    bottom: 9px;
    font-size: 11px;
    font-weight: 700;
    color: #ef4444;
    pointer-events: none;
    line-height: 1;
    user-select: none;
    text-align: right;
    font-family: var(--font);
    /* always LTR numerals, regardless of message direction */
    direction: ltr;
    background: var(--bg-primary);
    padding: 2px 4px;
    border-radius: 6px;
}
.word-counter.visible { display: block; }

/* When the counter is showing, reserve space on the right so it never sits on
   top of the text (works for both LTR end-of-line and RTL start-of-line). */
.message-input-wrapper.counter-visible #messageInput[contenteditable] {
    padding-right: 58px;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-3px);
    }

    40% {
        transform: translateX(3px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes vibrate {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-2px);
    }

    20% {
        transform: translateX(2px);
    }

    30% {
        transform: translateX(-2px);
    }

    40% {
        transform: translateX(2px);
    }

    50% {
        transform: translateX(-2px);
    }

    60% {
        transform: translateX(2px);
    }

    70% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }

    90% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0);
    }
}

.message-input-wrapper.shake {
    animation: shake 0.3s ease;
}

.message-input-wrapper.vibrate {
    animation: vibrate 0.4s linear;
}

/* ===== Telegram-style mention popup ===== */
.mention-popup {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 9999;
    display: none;
    min-width: 220px;
    max-width: 320px;
    max-height: 220px;
    overflow-y: auto;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-color);
}

.mention-item:last-child {
    border-bottom: none;
}

.mention-item:hover,
.mention-item.selected {
    background: var(--accent-color);
    color: #fff;
}

.mention-item-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.mention-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mention-item-name {
    font-weight: 600;
    line-height: 1.2;
}

.mention-item-handle {
    font-size: 12px;
    opacity: 0.65;
}

.mention-item:hover .mention-item-handle,
.mention-item.selected .mention-item-handle {
    opacity: 0.85;
}

.chat-input {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: auto;
    background: var(--bg-secondary);
    min-height: 70px;
}

.chat-input textarea {
    flex: 1;
    width: auto;
    padding: 12px 52px 12px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font);
    resize: none;
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
    transition: none;
    caret-color: var(--text-primary);
}

.chat-input textarea:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

.chat-input input,
.chat-input textarea {
    flex: 1;
    width: auto;
    padding: 12px 52px 12px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font);
    resize: none;
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
}

.chat-input button {
    width: auto;
    padding: 10px 20px;
    border-radius: var(--radius-xl);
    font-size: 14px;
}

.chat-input {
    align-items: center;
    gap: 8px;
}

.chat-input #mpConnectBtn,
.chat-input #attachBtn,
.chat-input #emojiBtn,
.audio-player-btn,
.audio-play-btn {
    color: var(--text-secondary);
}

.chat-input #mpConnectBtn,
.chat-input #attachBtn,
.chat-input #emojiBtn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.chat-input #mpConnectBtn:hover,
.chat-input #attachBtn:hover,
.chat-input #emojiBtn:hover {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    transform: none;
}

.chat-input button:disabled,
.chat-input button.is-disabled {
    opacity: .48;
    cursor: not-allowed;
    transform: none !important;
}

.chat-input.composer-disabled {
    background: var(--bg-secondary);
}

.chat-input.composer-disabled .message-input-wrapper {
    background: color-mix(in srgb, var(--bg-primary) 82%, var(--bg-secondary));
    border-style: dashed;
    box-shadow: none;
}

.chat-input.composer-disabled #messageInput {
    cursor: not-allowed;
    color: var(--text-muted);
}

#sendBtn {
    min-width: 44px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
}

.attachment-preview-box {
    margin: 8px 20px 0;
    padding: 10px 12px 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-sidebar) 92%, var(--bg-primary));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.attachment-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.attachment-clear-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content;
    min-height: 0;
    border: 0;
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.attachment-clear-btn:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.attachment-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 2px 6px;
    scrollbar-width: thin;
}

.attachment-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px 150px;
    gap: 10px;
    min-width: 238px;
    max-width: 260px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.attachment-card.upload-failed,
.attachment-card.upload-cancelled {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border-color));
}

.attachment-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--text-secondary);
}

.attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-thumb svg,
.attachment-thumb img.icon-svg {
    width: 28px;
    height: 28px;
}

.attachment-meta {
    min-width: 0;
    padding-right: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 13px;
}

.attachment-sub,
.attachment-error {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
}

.attachment-error {
    color: var(--danger);
}

.remove-attachment-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.remove-attachment-btn:hover {
    color: #fff;
    background: var(--danger);
}

.retry-attachment-btn {
    width: fit-content;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 11px;
    cursor: pointer;
}

.upload-progress-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.upload-progress-overlay.hidden {
    display: none;
}

.upload-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    animation: spin .8s linear infinite;
}

.attachment-progress-line {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 5px;
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border-color) 70%, transparent);
}

.attachment-progress-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-color);
    transition: width .15s ease;
}

.upload-uploaded .attachment-progress-line span {
    background: #22c55e;
}

.upload-failed .attachment-progress-line span,
.upload-cancelled .attachment-progress-line span {
    width: 100% !important;
    background: var(--danger);
}

.chat-drop-overlay {
    position: absolute;
    inset: 56px 16px 86px;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px dashed color-mix(in srgb, var(--accent-color) 60%, var(--border-color));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    color: var(--text-primary);
    pointer-events: none;
}

#chatPanel {
    position: relative;
}

.chat-drop-overlay.show {
    display: flex;
}

.chat-drop-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 22px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
    max-width: min(360px, calc(100% - 24px));
}

.chat-drop-overlay strong {
    display: block;
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
    white-space: normal;
}

.chat-drop-overlay span {
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
}

.device-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-left: 3px solid transparent;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
}

.device-item.current {
    border-left-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.device-main {
    flex: 1;
    min-width: 0;
}

.device-icon-wrap {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.device-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
    color: var(--text-primary);
}

.device-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
}

.device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.device-meta {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    line-height: 1.35;
}

.device-meta strong {
    color: var(--text-secondary);
    font-weight: 700;
    margin-right: 3px;
}

.device-badge,
.device-current-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.device-badge.active {
    color: #fff;
    background: #16a34a;
}

.device-badge.inactive {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.device-current-badge {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.device-logout-btn {
    flex: 0 0 auto;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}

.message-link {
    display: inline;
    max-width: 100%;
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 32%, transparent);
}

.message-link:hover {
    color: var(--accent-hover, var(--accent-color));
    border-bottom-color: currentColor;
}

.message-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
    outline-offset: 2px;
    border-radius: 3px;
}

.device-logout-btn:hover {
    color: #fff;
    background: var(--danger);
}

@media screen and (max-width: 768px) {
    .chat-input {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
    }

    .chat-input textarea {
        flex: 1;
        min-width: 0;
        padding: 11px 46px 11px 46px;
        border-radius: 0;
        font-size: 16px;
    }

    .message-input-wrapper {
        border-radius: 24px;
    }

    .mention-backdrop {
        padding: 11px 46px 11px 46px;
        font-size: 16px;
        line-height: 1.4;
        border-radius: 24px;
    }

    #attachBtn {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
        padding: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: none;
    }

    .emoji-picker-container {
        position: absolute;
        right: 58px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
    }

    .emoji-picker-container #emojiBtn {
        padding: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    #sendBtn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        padding: 0;
        background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
        transition: transform 0.15s, box-shadow 0.15s;
        flex-shrink: 0;
    }

    #sendBtn .send-btn-text {
        display: none;
    }

    #sendBtn .send-btn-icon {
        display: block !important;
        color: #fff;
    }

    #sendBtn:hover {
        transform: scale(1.07);
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    }

    #sendBtn:active {
        transform: scale(0.93);
    }

    .emoji-panel {
        bottom: calc(100% + 8px);
        right: 0;
        width: min(340px, calc(100vw - 20px));
        height: 400px;
        left: auto;
    }

    button,
    .channel-item,
    .group-item,
    .friend-item,
    .context-menu button {
        min-height: 44px;
        min-width: 44px;
    }
}

@media screen and (max-width: 600px) {
    .modal-content {
        width: 95%;
        max-width: 95%;
        padding: 20px 15px;
    }
}

/* Voice participants indicator */
.voice-participants-indicator {
    margin-left: auto;
    display: flex;
    gap: 0;
    flex-direction: row-reverse;
}

.voice-indicator-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--bg-sidebar);
    box-sizing: content-box;
    margin-left: -10px;
}

.voice-indicator-avatar:first-child {
    margin-left: 0;
}

.voice-participants-indicator {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
    overflow: visible;
    padding: 2px 0;
}

/* Overlapping avatar stack — each avatar is 18px, overlap by ~6px so several
   participants read as a neat cluster without hiding each other. */
.voice-indicator-avatar {
    width: 18px;
    height: 18px;
    margin-left: -6px;
    margin-right: 0;
}

.voice-indicator-avatar:first-child {
    margin-left: 0;
}

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

/* ============================================
   MESSAGE ROWS & BUBBLES
   ============================================ */
.message-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.message-row.own-row {
    align-self: flex-start;
    flex-direction: row;
}

.message-row.other-row {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* Telegram-style message chain grouping:
   chain-solo   = single message (avatar + name both shown)
   chain-first  = first in run  (name shown, avatar hidden)
   chain-middle = middle of run (name hidden, avatar hidden)
   chain-last   = last in run   (name hidden, avatar shown — anchors at bottom of chain) */

.chain-first .message-avatar,
.chain-middle .message-avatar {
    visibility: hidden;
    /* keeps layout space but invisible */
}

.chain-middle .message .message-sender,
.chain-last .message .message-sender {
    display: none;
}

/* Tighten spacing between messages in the same chain */
.chain-middle,
.chain-last {
    margin-top: -5px;
}

.message-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
    flex-shrink: 0;
    overflow: hidden;
}

.message-edit-textarea {
    resize: vertical;
    max-height: 200px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message {
    display: flex;
    flex-direction: column;
    max-width: 700px;
    min-width: 120px;
    padding: 10px 14px;
    border-radius: 18px;
    background: var(--message-bg);
    color: var(--text-primary);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    gap: 4px;
    align-self: unset !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.message.own {
    align-self: unset !important;
    background: linear-gradient(135deg, var(--message-own-bg), color-mix(in srgb, var(--message-own-bg) 80%, #000));
    color: var(--message-own-text);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.message-body {
    position: relative;
    overflow: visible;
    max-height: none;
    transition: none;
    line-height: 1.5;
}

.message.expanded .message-body {
    max-height: none;
}

.message-sender {
    font-size: 13px;
    margin-bottom: 4px;
    opacity: 0.8;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.sender-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

/* role badge sits at the far right — never compresses the name */
.message-sender .role-badge {
    flex-shrink: 0;
    margin-left: auto;
}

#floatingProfileDisplayName,
#floatingProfileUsername {
    cursor: pointer;
}

.message-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-size: 15px;
    font-family: var(--font-mixed);
    unicode-bidi: plaintext;
}

/* Each source line is rendered as its own <span class="msg-line">. Without a
   block display these spans sit inline and a multi-line message (Shift+Enter)
   collapses onto one line. Block-level keeps every line on its own row. */
.msg-line {
    display: block;
}

/* ── RTL / Arabic / Persian language support ───────────────────────────── */

[lang="ar"],
[lang="fa"],
.rtl-text {
    font-family: var(--font-rtl) !important;
    direction: rtl;
    text-align: right;
    line-height: 1.8;
}

/* rtl-font: font-only switch for textareas and their backdrops.
   No direction, no text-align — dir="auto" + unicode-bidi:plaintext
   on the element itself owns all of that. Mixing CSS direction with
   dir="auto" desyncs the UBA caret and causes the cursor to jump. */
.rtl-font {
    font-family: var(--font-rtl) !important;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0;
}

.message-content[dir="rtl"],
.message-text-caption[dir="rtl"],
.reply-bubble-content[dir="rtl"],
.file-card-name[dir="rtl"] {
    font-family: var(--font-rtl);
    line-height: 1.8;
    letter-spacing: 0;
}

.message-content,
.message-text-caption,
.reply-bubble-content,
.reply-bubble-sender,
.message-sender,
.file-card-name,
.mention-backdrop {
    font-family: var(--font-mixed);
}

/* contenteditable input already has unicode-bidi:plaintext in its main rule above */

/* message-edit-textarea also needs plaintext bidi */
.message-edit-textarea {
    unicode-bidi: plaintext;
}

/* RTL font class — only switches font-face, never overrides direction/alignment.
   Same reasoning as the old textarea rule. */
#messageInput.rtl-font,
.message-edit-textarea.rtl-font {
    font-family: var(--font-rtl);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0;
}

/* RTL: extra padding away from the word counter */
.message-input-wrapper #messageInput.rtl-font {
    padding-right: 68px;
}

.chat-name,
.channel-name,
.group-name,
.contact-name,
.sidebar-item-name {
    font-family: var(--font-mixed);
}

.profile-display-name,
.user-display-name,
#floatingProfileDisplayName,
#chatHeaderName {
    font-family: var(--font-mixed);
}

.toast-title,
.toast-message,
.modal-title {
    font-family: var(--font-mixed);
    unicode-bidi: plaintext;
}

#scrollToBottomBtn {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

#scrollToBottomBtn:hover {
    background: var(--accent-hover);
    transform: scale(1.1);
}

.read-more-btn {
    display: none;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 2px;
    width: auto;
    text-align: left;
    align-self: flex-start;
    transform: none;
    box-shadow: none;
}

.message-time {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.55;
}

/* ============================================
   SETTINGS MODAL
   ============================================ */
.settings-modal-content {
    max-width: 900px !important;
    width: 90%;
    padding: 0 !important;
    overflow: hidden;
}

.settings-container {
    display: flex;
    height: 500px;
    max-height: 70vh;
}

.settings-nav {
    width: 180px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    padding: 12px 0;
    flex-shrink: 0;
}

.settings-nav-item {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    transition: background 0.15s;
    border-left: 3px solid transparent;
}

.settings-nav-item[data-pane="voice"] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.settings-nav-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.settings-nav-item:hover {
    background: var(--border-color);
}

.settings-nav-item.active {
    background: var(--bg-secondary);
    color: var(--accent-color);
    border-left-color: var(--accent-color);
    font-weight: 600;
}

.settings-panes {
    flex: 1;
    padding: 24px;
    scroll-behavior: smooth;
    overflow-y: auto;
    background: var(--bg-secondary);
}

.settings-pane {
    display: none;
}

.settings-pane.active {
    display: block;
}

/* Voice & Audio */
.voice-settings-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.voice-settings-heading h3 { margin:0 0 5px; }
.voice-settings-heading p, .voice-test-row p { margin:0; color:var(--text-muted); font-size:12px; line-height:1.5; }
.voice-settings-saved { color:var(--accent-color); background:color-mix(in srgb, var(--accent-color) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent-color) 30%, transparent); border-radius:999px; padding:5px 9px; font-size:11px; white-space:nowrap; }
.voice-settings-card { background:color-mix(in srgb, var(--bg-primary) 58%, transparent); border:1px solid var(--border-color); border-radius:14px; padding:16px; margin-bottom:13px; }
.voice-field-label, .voice-section-title { display:block; font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:10px; }
.voice-select { width:100%; height:42px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-secondary); color:var(--text-primary); padding:0 12px; }
.voice-field-help { color:var(--text-muted); font-size:11px; margin:7px 0 0; }
.voice-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.voice-mode-option { position:relative; cursor:pointer; }
.voice-mode-option input { position:absolute; opacity:0; pointer-events:none; }
.voice-mode-option > span { min-height:76px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--border-color); border-radius:11px; padding:11px 12px; background:var(--bg-secondary); transition:.16s ease; }
.voice-mode-option strong { font-size:13px; color:var(--text-primary); }
.voice-mode-option small { margin-top:4px; color:var(--text-muted); font-size:10px; line-height:1.35; }
.voice-mode-option input:checked + span { border-color:var(--accent-color); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent); background:color-mix(in srgb, var(--accent-color) 9%, var(--bg-secondary)); }
.voice-vad-controls { margin-top:16px; padding-top:15px; border-top:1px solid var(--border-color); }
.voice-vad-controls.is-disabled { opacity:.38; pointer-events:none; }
.voice-slider-heading { display:flex; justify-content:space-between; align-items:center; margin:10px 0 7px; font-size:12px; color:var(--text-secondary); }
.voice-slider-heading output { color:var(--accent-color); font-variant-numeric:tabular-nums; }
.voice-meter-wrap { position:relative; }
.voice-meter { position:relative; height:9px; border-radius:999px; overflow:hidden; background:linear-gradient(90deg,#3ba55d 0 66%,#faa61a 82%,#ed4245 100%); opacity:.35; margin-bottom:8px; }
.voice-meter span { position:absolute; inset:0; background:var(--bg-primary); transform-origin:right center; transform:scaleX(1); transition:transform 70ms linear; }
.voice-meter i { position:absolute; top:-3px; bottom:-3px; width:2px; background:#fff; box-shadow:0 0 0 1px #111; left:40%; z-index:2; }
.voice-settings-card input[type="range"] {
    display:block;
    width:100%;
    margin:0;
    box-sizing:border-box;
    accent-color:var(--accent-color);
}
.voice-settings-card input[type="range"],
.audio-volume-slider,
.mpc-vol-slider {
    --range-progress: 0%;
    --range-track-bg: color-mix(in srgb,var(--text-muted) 28%,transparent);
    -webkit-appearance:none;
    appearance:none;
    height:22px;
    background:transparent;
    border:0;
    border-radius:999px;
    outline:none;
    cursor:pointer;
}
.voice-settings-card input[type="range"]:focus-visible,
.audio-volume-slider:focus-visible,
.mpc-vol-slider:focus-visible {
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-color) 24%,transparent);
}
.voice-settings-card input[type="range"]::-webkit-slider-runnable-track,
.audio-volume-slider::-webkit-slider-runnable-track,
.mpc-vol-slider::-webkit-slider-runnable-track {
    height:6px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--accent-color) 0 var(--range-progress),var(--range-track-bg) var(--range-progress) 100%);
}
.voice-settings-card input[type="range"]::-webkit-slider-thumb,
.audio-volume-slider::-webkit-slider-thumb,
.mpc-vol-slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:16px;
    height:16px;
    margin-top:-5px;
    border:2px solid var(--bg-primary);
    border-radius:50%;
    background:var(--accent-color);
    box-shadow:0 2px 7px rgba(0,0,0,.28);
}
.voice-settings-card input[type="range"]::-moz-range-track,
.audio-volume-slider::-moz-range-track,
.mpc-vol-slider::-moz-range-track {
    height:6px;
    border-radius:999px;
    background:var(--range-track-bg);
}
.voice-settings-card input[type="range"]::-moz-range-progress,
.audio-volume-slider::-moz-range-progress,
.mpc-vol-slider::-moz-range-progress {
    height:6px;
    border-radius:999px;
    background:var(--accent-color);
}
.voice-settings-card input[type="range"]::-moz-range-thumb,
.audio-volume-slider::-moz-range-thumb,
.mpc-vol-slider::-moz-range-thumb {
    width:16px;
    height:16px;
    border:2px solid var(--bg-primary);
    border-radius:50%;
    background:var(--accent-color);
    box-shadow:0 2px 7px rgba(0,0,0,.28);
}
.voice-setting-switch { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--border-color); cursor:pointer; }
.voice-setting-switch span { display:flex; flex-direction:column; }
.voice-setting-switch strong { font-size:12px; color:var(--text-primary); }
.voice-setting-switch small { color:var(--text-muted); font-size:10px; margin-top:3px; }
.voice-setting-switch input { position:absolute; opacity:0; }
.voice-setting-switch i { width:38px; height:22px; border-radius:999px; background:var(--border-color); position:relative; flex:0 0 auto; transition:.16s; }
.voice-setting-switch i::after { content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; left:3px; top:3px; transition:.16s; box-shadow:0 1px 3px #0005; }
.voice-setting-switch input:checked + i { background:var(--accent-color); }
.voice-setting-switch input:checked + i::after { transform:translateX(16px); }
.voice-test-row { display:flex; align-items:center; gap:14px; }
.voice-test-btn { width:auto; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.voice-test-btn svg { width:15px; height:15px; fill:currentColor; }

body.surface-web-mobile .voice-settings-heading,
body.surface-app-mobile .voice-settings-heading,
body.mobile-mode .voice-settings-heading { display:block; }
body.surface-web-mobile .voice-settings-saved,
body.surface-app-mobile .voice-settings-saved,
body.mobile-mode .voice-settings-saved { display:inline-block; margin-top:8px; }
body.surface-web-mobile .voice-mode-grid,
body.surface-app-mobile .voice-mode-grid,
body.mobile-mode .voice-mode-grid { grid-template-columns:1fr; }
body.surface-web-mobile .voice-mode-option > span,
body.surface-app-mobile .voice-mode-option > span,
body.mobile-mode .voice-mode-option > span { min-height:52px; }
body.surface-web-mobile .voice-test-row,
body.surface-app-mobile .voice-test-row,
body.mobile-mode .voice-test-row { align-items:flex-start; flex-direction:column; }

/* Global Audio Player Bar */
.global-audio-player {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 50;
}

.audio-player-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.audio-player-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-player-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-player-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-primary) !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    padding: 0;
    transform: none;
    box-shadow: none;
    line-height: 1;
}

.audio-player-btn svg {
    fill: var(--text-primary);
}

.audio-player-btn img,
.audio-player-btn svg {
    display: block;
    margin: auto;
}

.audio-player-btn:hover {
    background: var(--border-color);
    transform: none;
}

.audio-player-progress-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 16px;
    cursor: pointer;
    background: transparent;
    z-index: 2;
    display: flex;
    align-items: flex-end;
}

.audio-player-progress-fill {
    position: relative;
    width: 0%;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
    transition: width 0.1s linear;
    pointer-events: none;
}

.audio-player-progress-thumb {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 14px;
    height: 14px;
    background: var(--accent-color);
    border: 2px solid var(--bg-secondary);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}

.audio-player-progress-wrapper:hover .audio-player-progress-thumb,
.audio-player-progress-wrapper.dragging .audio-player-progress-thumb {
    opacity: 1;
    transform: scale(1);
}

.audio-player-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent-color);
    width: 0%;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}

button img {
    pointer-events: none;
}

/* Volume dropdown */
.volume-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.volume-percent {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 36px;
    text-align: left;
}

.volume-slider-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 4px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.vertical-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    writing-mode: bt-lr;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    direction: rtl;
    height: 120px;
    width: 6px;
    background: var(--text-muted);
    border-radius: 3px;
    outline: none;
    margin: 0 auto;
    display: block;
}

.vertical-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
}

.vertical-volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
    border: none;
}

/* Settings avatar+badge */
.settings-avatar-badge-preview {
    position: relative;
    width: 250px;
    margin: 0 auto;
}

.settings-badge-preview {
    width: 100%;
    height: 80px;
    border-radius: 16px 16px 0 0;
    background: var(--border-color);
    overflow: hidden;
}

.settings-badge-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-avatar-preview {
    position: relative;
    width: 64px;
    height: 64px;
    margin: -32px auto 0;
    border-radius: 50%;
    background: var(--accent-color);
    overflow: hidden;
    border: 4px solid var(--bg-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

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

.settings-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 28px;
    font-weight: bold;
    color: white;
}

/* ============================================
   FLOATING PROFILE PANEL
   ============================================ */
.floating-profile-panel {
    position: fixed;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 0 0 16px;
    z-index: 350;
    width: 260px;
    text-align: center;
    animation: profileSlideUp 0.25s ease-out;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100dvh - 20px);
    overscroll-behavior: contain;
}

#settingsModal {
    z-index: 1000;
}

@keyframes profileSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enlarged floating profile panel (1.5×) — opened by clicking a friend's
   avatar in the Friends tab. transform-origin top-left keeps positionPanel's
   scaled-footprint math correct; `forwards` holds the scale after the entrance. */
.floating-profile-panel.profile-panel-lg {
    transform-origin: top left;
    animation: profileSlideUpLg 0.25s ease-out forwards;
}
@keyframes profileSlideUpLg {
    from {
        opacity: 0;
        transform: scale(1.5) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1.5) translateY(0);
    }
}

.profile-panel-badge {
    width: 100%;
    height: 80px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    position: relative;
}

.settings-modal-content>div:last-child {
    padding: 12px 18px;
}

.profile-panel-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.profile-panel-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    margin: -32px auto 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    overflow: hidden;
    border: 4px solid var(--bg-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

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

.profile-panel-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 28px;
    font-weight: bold;
    color: white;
}

.profile-panel-displayname {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 12px;
}

.profile-panel-username {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
    padding: 0 12px;
}

.profile-panel-bio {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
    padding: 0 12px;
    white-space: pre-wrap;
    line-height: 1.4;
    max-height: 80px;
    overflow-y: auto;
}

/* ============================================
   REACTIONS
   ============================================ */
.reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.reaction-chip {
    background: var(--bg-sidebar);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    border: 1.5px solid var(--border-color);
    transition: border-color 0.15s;
}

.reaction-chip:hover {
    border-color: var(--accent-color);
}

.quality-select {
    padding: 8px 12px;
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: 14px;
    cursor: pointer;
    margin: 0 10px;
}

.reaction-popup {
    position: absolute;
    bottom: 0;
    transform: translateY(-100%);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 6px 8px;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 30;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: auto;
    min-width: auto;
    max-width: 300px;
}

.message:not(.own) .reaction-popup {
    right: calc(100% + 8px);
    left: auto;
}

.reaction-popup.show {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.reaction-popup .reaction-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    padding: 4px;
    border-radius: 8px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    box-shadow: none;
}

.reaction-popup .reaction-btn:hover {
    background: var(--border-color);
    transform: scale(1.1);
}

.message.own .reaction-popup {
    left: calc(100% + 8px);
    right: auto;
}

/* ============================================
   AUTHENTICATION PAGES (Login / Signup)
   ============================================ */
.auth-container {
    max-width: 420px;
    width: 100%;
    padding: 40px 36px;
    background: var(--bg-secondary);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1.5px solid var(--border-color);
    transition: box-shadow 0.3s, border-color 0.3s;
    animation: authSlideUp 0.4s ease-out;
}

@keyframes authSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-container h2 {
    text-align: center;
    margin-bottom: 28px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.auth-container .tabs {
    margin-bottom: 28px;
    border-bottom: 2px solid var(--border-color);
}

.auth-container .tab {
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 3px solid transparent;
}

.auth-container .tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.auth-container .form-group {
    margin-bottom: 20px;
}

.auth-container label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.auth-container input {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-container input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
    background: var(--bg-secondary);
}

.auth-container button[type="submit"] {
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    margin-top: 12px;
    transition: all 0.2s;
    width: 100%;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.auth-container button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--accent-hover), #3730a3);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.auth-container .error-message,
.auth-container .success-message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.auth-container .error-message {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    border: 1.5px solid rgba(239, 68, 68, 0.2);
}

.auth-container .success-message {
    background: rgba(16, 185, 129, 0.08);
    color: var(--success);
    border: 1.5px solid rgba(16, 185, 129, 0.2);
}

.auth-container #adminLink {
    margin-top: 16px;
    width: 100%;
    padding: 11px;
    border-radius: var(--radius-md);
    font-weight: 600;
    background: var(--border-color);
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s;
}

.auth-container #adminLink:hover {
    background: var(--text-muted);
    color: white;
}

body.dark .auth-container {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark .auth-container input {
    background: var(--bg-primary);
}

body.auth-page {
    background: linear-gradient(135deg, #e8eaf6 0%, #f4f6fa 50%, #e3f0ff 100%);
}

/* ── Mobile login / signup (phones) ──────────────────────────────────────
   The desktop floating card becomes an edge-to-edge, full-height sheet with
   touch-sized fields, safe-area padding, and 16px inputs (no iOS zoom). Only
   affects the auth pages (.auth-container exists only there). */
@media screen and (max-width: 600px) {
    body.auth-page {
        align-items: stretch;
        min-height: 100dvh;
    }
    .auth-container {
        max-width: 100%;
        width: 100%;
        min-height: 100dvh;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: var(--bg-secondary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: calc(28px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
    }
    .auth-container > div:first-child { margin-bottom: 26px; }
    .auth-container > div:first-child img { height: 72px; }
    .auth-container .tabs { margin-bottom: 22px; }
    .auth-container .tab { padding: 14px 0; font-size: 16px; }
    .auth-container .form-group { margin-bottom: 16px; }
    .auth-container label { font-size: 14px; }
    .auth-container input,
    .auth-container select,
    .auth-container textarea {
        font-size: 16px;          /* prevents iOS zoom-on-focus */
        padding: 15px 16px;
        border-radius: 12px;
    }
    .auth-container button[type="submit"] {
        padding: 16px;
        font-size: 16px;
        border-radius: 12px;
        margin-top: 8px;
    }
    .auth-container .secondary,
    .auth-container #adminLink,
    #googleBtn {
        padding: 14px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }
    /* Show/hide-password toggle stays inside the field, finger-sized */
    #togglePassword,
    #toggleSignupPassword { min-width: 44px; min-height: 44px; }
}

#message {
    display: none;
}

/* Dark theme auth */
body.dark .auth-container {
    background: linear-gradient(145deg, #1a1d27 0%, #0f1117 100%);
}

body.midnight .auth-container {
    background: linear-gradient(145deg, #0d1224 0%, #020617 100%);
}

body.forest .auth-container {
    background: linear-gradient(145deg, #064e3b 0%, #022c22 100%);
}

body.ocean .auth-container {
    background: linear-gradient(145deg, #0f2847 0%, #0c1929 100%);
}

body.vs-dark .auth-container {
    background: linear-gradient(145deg, #252526 0%, #1e1e1e 100%);
}

body.galaxy .auth-container {
    background: linear-gradient(145deg, #150b24 0%, #0b0410 100%);
}

/* Fix friends tab hover */
.friends-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* ============================================
   ONLINE STATUS DOTS
   ============================================ */
.avatar,
.group-avatar,
.profile-panel-avatar {
    position: relative;
}

.online-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #718096;
    border: 2px solid var(--bg-secondary);
    border-radius: 50%;
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.online-dot.online {
    background: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    animation: onlineWave 2s ease-out infinite;
}

.online-dot.away {
    background: #f59e0b !important;
}

.online-dot.dnd {
    background: #ef4444 !important;
}

.online-dot.offline {
    background: #6b7280 !important;
}

#selfOnlineDot {
    cursor: pointer;
    transition: transform 0.1s;
}

#selfOnlineDot:hover {
    transform: scale(1.15);
}

#selfOnlineDot.online {
    background: #10b981;
}

#selfOnlineDot.away {
    background: #f59e0b;
}

#selfOnlineDot.dnd {
    background: #ef4444;
}

#selfOnlineDot.offline {
    background: #6b7280;
}

@keyframes onlineWave {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        transform: scale(1);
    }
}

.online-dot.online:hover {
    transform: scale(1.15);
    animation-duration: 1s;
}

/* ----- Group Members Modal (read-only member list) ----- */
.gm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.12s;
}

.gm-row:hover {
    background: var(--bg-tertiary, rgba(127, 127, 127, 0.12));
}

.gm-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    overflow: visible;
}

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

.gm-info {
    flex: 1 1 auto;
    min-width: 0;
}

.gm-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-status {
    font-size: 12px;
    color: var(--text-muted);
}

.gm-role {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.gm-role.owner {
    color: #d69e2e;
    border-color: rgba(214, 158, 46, 0.5);
    background: rgba(214, 158, 46, 0.12);
}

.gm-role.admin {
    color: #4299e1;
    border-color: rgba(66, 153, 225, 0.5);
    background: rgba(66, 153, 225, 0.12);
}

#groupDescText.clickable {
    cursor: pointer;
}

#groupDescText.clickable:hover {
    text-decoration: underline;
}

/* Status picker */
.status-picker {
    position: fixed;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    min-width: 160px;
    overflow: hidden;
}

.status-option {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.15s;
}

.status-option:hover {
    background: var(--border-color);
}

/* Call wave */
@keyframes callWave {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(16, 185, 129, 0), 0 0 0 40px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

#incomingCallOverlay {
    animation: callWave 1.5s ease-out infinite;
    border-radius: 24px;
}

#acceptDirectCallBtn {
    animation: buttonPulse 1s ease-in-out infinite;
}

@keyframes buttonPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }

    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.incoming-waveform {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 32px;
    margin-top: 20px;
}

.incoming-waveform .wave-bar {
    width: 4px;
    height: 8px;
    background: linear-gradient(135deg, var(--accent-color), #10b981);
    border-radius: 2px;
    animation: waveBounce 0.9s ease-in-out infinite;
}

.incoming-waveform .wave-bar:nth-child(1) {
    animation-delay: 0.0s;
}

.incoming-waveform .wave-bar:nth-child(2) {
    animation-delay: 0.15s;
}

.incoming-waveform .wave-bar:nth-child(3) {
    animation-delay: 0.3s;
}

.incoming-waveform .wave-bar:nth-child(4) {
    animation-delay: 0.45s;
}

.incoming-waveform .wave-bar:nth-child(5) {
    animation-delay: 0.6s;
}

@keyframes waveBounce {

    0%,
    100% {
        height: 8px;
        opacity: 0.5;
    }

    50% {
        height: 28px;
        opacity: 1;
    }
}

#ringingSineWave {
    position: absolute;
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    pointer-events: none;
    z-index: 1;
    border-radius: 20px;
}

/* Scroll to bottom */
#scrollToBottomBtn {
    position: relative;
}

#scrollToBottomBtnWrapper {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.3s ease;
}

#scrollToBottomBtn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    position: relative;
}

.scroll-unread-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger);
    color: white;
    border-radius: 20px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* ── Music Party Now-Playing Bar ── */
#mpNowPlayingBar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    min-height: 52px;
    padding: 0 14px;
    background: linear-gradient(90deg,
        rgba(99, 102, 241, 0.18) 0%,
        rgba(99, 102, 241, 0.10) 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.25);
    backdrop-filter: blur(8px);
    overflow: hidden;
    flex-shrink: 0;
    animation: mpNpBarSlideIn 0.22s ease;
}

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

/* Album art thumbnail */
#mpNowPlayingArt {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Scrolling marquee wrapper */
.mp-np-marquee-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.mp-np-marquee-wrap::before,
.mp-np-marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 18px;
    z-index: 1;
    pointer-events: none;
}
.mp-np-marquee-wrap::before {
    left: 0;
    background: linear-gradient(to right,
        rgba(var(--bg-secondary-rgb, 30,30,50), 0.9),
        transparent);
}
.mp-np-marquee-wrap::after {
    right: 0;
    background: linear-gradient(to left,
        rgba(var(--bg-secondary-rgb, 30,30,50), 0.9),
        transparent);
}

.mp-np-marquee {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}

/* Only animate when text overflows (JS adds class .mp-np-overflows) */
.mp-np-marquee.mp-np-overflows {
    animation: mpNpScroll 14s linear infinite;
}

@keyframes mpNpScroll {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(0); }
    90%  { transform: translateX(calc(-50% - 24px)); }
    100% { transform: translateX(calc(-50% - 24px)); }
}

#mpNowPlayingText {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0 8px;
    letter-spacing: 0.01em;
}

/* Stop button */
#mpNowPlayingStop {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: none;
    border-radius: var(--radius-md, 6px);
    background: rgba(239, 68, 68, 0.18);
    color: #fc8181;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    width: auto;
    height: 30px;
}
#mpNowPlayingStop:hover {
    background: rgba(239, 68, 68, 0.35);
    color: #fff;
}

/* ============================================
   MEDIA PREVIEWS
   ============================================ */
.chat-media-container {
    width: 340px;
    max-width: 100%;
    height: 220px;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #000;
}

.chat-media-container img,
.chat-media-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: 0;
    display: block;
}

.media-caption {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
    word-break: break-word;
    max-width: 100%;
    padding: 0 4px;
}

.single-media-wrapper {
    display: inline-flex;
    flex-direction: column;
    max-width: 340px;
    width: 100%;
}

.message.own .media-caption {
    color: rgba(255, 255, 255, 0.75);
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

/* ============================================
   AUDIO PLAYER CARD
   ============================================ */
.audio-message-card {
    display: flex;
    align-items: center;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    padding: 10px 12px;
    border-radius: 14px;
    max-width: 100%;
    width: min(420px, 100%);
    min-width: 0;
    gap: 10px;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.message.own .audio-message-card {
    background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-sidebar));
    color: var(--text-primary);
}

.audio-play-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    background: var(--bg-secondary);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    transition: background 0.2s;
    flex-shrink: 0;
    order: 0;
    transform: none;
    box-shadow: none;
}

.audio-play-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 14%, var(--bg-secondary));
    color: var(--accent-color);
    transform: none;
}

.audio-info {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    order: 1;
}

.audio-volume-container {
    width: 50% !important;
    min-width: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto !important;
    min-width: auto !important;
    order: 2;
    margin-left: auto;
}

.audio-message-card>div:first-child {
    flex-wrap: nowrap;
    min-width: 0;
    display: flex;
    align-items: center;
}

.audio-volume-container span {
    width: 24px;
    text-align: center;
    font-size: 16px;
}

.audio-volume-slider {
    flex: 1;
    width: 50% !important;
    min-width: 100px;
    flex-shrink: 0;
    height: 22px;
    background: transparent;
    border-radius: 999px;
    margin: 0;
    --range-track-bg: rgba(0, 0, 0, 0.2);
}

.message.own .audio-volume-slider {
    --range-track-bg: rgba(255, 255, 255, 0.3);
}

.message.own .audio-volume-slider::-webkit-slider-thumb {
    background: var(--accent-color);
}

.audio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
    margin-top: -5px;
    border: 2px solid var(--bg-primary);
}

.audio-volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.audio-volume-slider::-moz-range-track {
    height: 6px;
    background: var(--range-track-bg);
    border-radius: 999px;
}

.message.own .audio-volume-slider::-moz-range-track {
    background: var(--range-track-bg);
}

.message.own .audio-volume-slider::-moz-range-thumb {
    background: var(--accent-color);
}

.audio-progress-container {
    width: 100%;
    height: 5px;
    background: color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 999px;
    cursor: pointer;
    margin: 6px 0;
}

.message.own .audio-progress-container {
    background: rgba(255, 255, 255, 0.25);
}

.audio-progress-bar {
    height: 100%;
    background: var(--accent-color);
    border-radius: inherit;
    width: 0%;
    transition: width 0.1s linear;
}

.audio-time {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
}

/* ============================================
   MODALS
   ============================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg-secondary);
    padding: 28px;
    border-radius: var(--radius-xl);
    width: 800px;
    max-width: 90%;
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    max-height: 85vh;
    overflow-y: auto;
    border: 1.5px solid var(--border-color);
    animation: modalSlideUp 0.2s ease-out;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* CONTEXT MENUS */
.context-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    min-width: 180px;
    padding: 6px;
    overflow: hidden;
    animation: contextMenuIn 0.15s ease-out;
}

@keyframes contextMenuIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    text-align: left;
    color: var(--text-primary);
    font-size: 14px;
    border-radius: 6px;
    transition: background 0.15s;
    transform: none;
    box-shadow: none;
}

.context-menu button:hover {
    background: var(--border-color);
    transform: none;
    box-shadow: none;
}

.context-menu button.danger {
    color: var(--danger);
}

/* Message context menu: icon + label rows (icons inherit text color via
   currentColor, so they stay visible on every theme). */
.msg-context-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
}
.msg-context-menu .mctx-ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* EMOJI PICKER */
.emoji-picker-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ===== Full Emoji Picker ===== */
.emoji-panel {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 360px;
    height: 440px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: emojiPanelIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes emojiPanelIn {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.emoji-panel.show {
    display: flex;
}

/* Search bar */
.ep-search-bar {
    padding: 10px 10px 6px;
    flex-shrink: 0;
}

.ep-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.ep-search:focus {
    border-color: var(--accent-color);
}

/* Category tabs */
.ep-categories {
    display: flex;
    gap: 2px;
    padding: 2px 8px 6px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.ep-categories::-webkit-scrollbar {
    display: none;
}

.ep-cat-btn {
    background: none;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.ep-cat-btn:hover {
    opacity: 0.9;
    background: var(--border-color);
    transform: scale(1.15);
}

.ep-cat-btn.active {
    opacity: 1;
    background: rgba(99, 102, 241, 0.15);
}

/* Scrollable body */
.ep-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 6px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.ep-body::-webkit-scrollbar {
    width: 5px;
}

.ep-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* Section labels */
.ep-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    padding: 8px 4px 4px;
}

/* Emoji grid */
.ep-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 1px;
}

.ep-search-results {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding-bottom: 4px;
}

.ep-emoji {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    transition: background 0.1s, transform 0.12s;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-emoji:hover {
    background: var(--border-color);
    transform: scale(1.28);
}

.ep-emoji:active {
    transform: scale(0.9);
}

/* TOAST NOTIFICATIONS */
#toastContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 350px;
}

.toast {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border-left: 4px solid var(--accent-color);
    min-width: 280px;
    max-width: 350px;
    cursor: pointer;
    transition: opacity 0.3s;
    pointer-events: auto;
    position: relative;
    animation: toastIn 0.25s ease-out;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.toast-body {
    font-size: 14px;
    color: var(--text-secondary);
}

/* UPLOAD PROGRESS */
.upload-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.upload-item-info {
    flex: 1;
    margin-left: 10px;
}

.upload-item-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.upload-item-progress {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin-top: 4px;
}

.upload-item-progress-bar {
    height: 100%;
    background: var(--accent-color);
    border-radius: 2px;
    width: 0%;
    transition: width 0.2s;
}

.upload-item-status {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 10px;
}

/* ============================================
   LOADING SPINNER & SEARCH
   ============================================ */
.loading-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 20px auto;
}

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

.upload-progress-overlay {
    transition: opacity 0.3s ease;
}

.messages-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 100px;
}

.search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-wrapper input {
    width: 220px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
}

.search-wrapper button {
    width: auto;
    padding: 8px 12px;
}

/* INVITE MODAL */
.invite-recipient-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.invite-recipient-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.invite-recipient-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-color);
    margin-left: 10px;
    flex-shrink: 0;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media screen and (max-width: 768px) {
    .dashboard-container {
        height: 100vh;
        border-radius: 0;
    }

    .sidebar {
        width: 280px;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    }

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

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 190;
    }

    .sidebar-overlay.show {
        display: block;
    }

    .mobile-menu-btn {
        display: none;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
        color: white;
        border: none;
        border-radius: 50%;
        padding: 0;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
        align-items: center;
        justify-content: center;
    }

    .main-content {
        width: 100%;
    }

    .chat-header {
        padding-top: 8px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .chat-header-left {
        flex: 1 1 100%;
    }

    .chat-header-right {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .message-row {
        max-width: 90%;
    }

    .message {
        max-width: 100%;
    }

    .message-avatar {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    #typingIndicator {
        font-size: 12px;
        margin-left: 4px;
    }

    .chat-input {
        position: relative;
        gap: 6px;
    }

    .chat-input textarea {
        flex: 1;
        padding-left: 46px;
        padding-right: 46px;
        border-radius: 24px;
        min-height: 44px;
        line-height: 1.4;
        font-size: 16px;
    }

    .message-input-wrapper {
        border-radius: 24px;
    }

    .mention-backdrop {
        padding-left: 46px;
        padding-right: 46px;
        line-height: 1.4;
        font-size: 16px;
        border-radius: 24px;
    }

    #attachBtn {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
        padding: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        box-shadow: none;
    }

    .emoji-picker-container {
        position: absolute;
        right: 58px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
    }

    .emoji-picker-container #emojiBtn {
        padding: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: transparent;
        font-size: 0;
        transform: none;
        box-shadow: none;
    }

    #sendBtn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        padding: 0;
        background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
        transition: transform 0.15s;
    }

    #sendBtn .send-btn-text {
        display: none;
    }

    #sendBtn .send-btn-icon {
        display: block !important;
        color: #fff;
    }

    #sendBtn:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    }

    #sendBtn:active {
        transform: scale(0.95);
    }

    .emoji-panel {
        bottom: calc(100% + 8px);
        right: 0;
        width: min(320px, calc(100vw - 20px));
        height: 400px;
        left: auto;
    }

    .chat-input button {
        padding: 10px 14px;
    }

    .modal-content {
        width: 90%;
        max-width: 400px;
        padding: 20px;
    }

    .context-menu {
        min-width: 150px;
    }

    .context-menu button {
        padding: 12px 18px;
        font-size: 15px;
    }

    .unread-banner {
        top: 60px;
    }

    .friends-header {
        flex-wrap: wrap;
        height: auto;
        min-height: 66px;
    }

    .friends-tabs {
        flex-wrap: wrap;
        gap: 10px;
    }

    .friends-search-container {
        padding: 0 10px;
    }
}

/* PHONES */
@media screen and (max-width: 480px) {
    .sidebar {
        width: 70%;
    }

    .mobile-menu-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .chat-header {
        padding-top: 8px;
    }

    .chat-header-left h3 {
        font-size: 18px;
    }

    #currentGroupDesc {
        font-size: 13px;
    }

    .message-row {
        max-width: 95%;
    }

    .message {
        padding: 8px 10px;
        border-radius: 14px;
    }

    .message-avatar {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .message-sender {
        font-size: 11px;
    }

    .message-content {
        font-size: 14px;
        line-height: 1.4;
    }

    .message-time {
        font-size: 9px;
    }

    .reaction-chip {
        font-size: 11px;
        padding: 1px 6px;
    }

    .reaction-popup .reaction-btn {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    #typingIndicator {
        font-size: 11px;
    }

    .unread-separator-text {
        font-size: 11px;
    }

    .chat-input {
        padding: 8px 10px;
    }

    .chat-input textarea {
        padding: 10px 12px;
        font-size: 15px;
    }

    .chat-input button {
        padding: 10px 12px;
        font-size: 14px;
    }

    .emoji-panel {
        width: min(300px, calc(100vw - 16px));
        height: 360px;
        bottom: calc(100% + 8px);
        right: 0;
        left: auto;
    }

    .ep-grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .ep-emoji {
        font-size: 20px;
        padding: 3px;
    }

    .mention-popup {
        max-height: 180px;
        min-width: 180px;
        max-width: calc(100vw - 20px);
    }

    .invite-card {
        padding: 10px 14px;
        max-width: 100%;
    }

    .invite-card-group-name {
        font-size: 16px;
    }

    .invite-card-timer {
        font-size: 13px;
    }

    .invite-card-join-btn,
    .invite-card-ping-btn {
        padding: 8px 10px;
        font-size: 13px;
    }

    .call-active-banner {
        padding: 6px 8px 6px 12px;
        gap: 8px;
    }

    .banner-icon {
        font-size: 18px;
    }

    .banner-text {
        font-size: 12px;
    }

    .banner-count {
        font-size: 12px;
        padding: 2px 8px;
    }

    .banner-btn {
        padding: 4px 10px;
        font-size: 12px;
    }

    .banner-btn-leave {
        width: 28px;
        height: 28px;
    }

    #scrollToBottomBtn {
        width: 40px;
        height: 40px;
        bottom: 80px;
        right: 15px;
    }

    .settings-member-actions-grid {
        grid-template-columns: 1fr;
    }

    .settings-member-name {
        max-width: 80px;
    }

    .invite-recipient-item select {
        width: 100px;
    }
}

/* FOCUS & ACCESSIBILITY */
:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Group settings avatar */
#settingsGroupAvatarPreview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 10px;
    overflow: hidden;
}

#settingsGroupAvatarPreview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Multi-media grid */
.message-body.has-media-grid {
    max-height: none !important;
    overflow: visible !important;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.media-grid-wrapper {
    max-width: min(520px, 100%);
    width: 100%;
    box-sizing: border-box;
}

/* ── Discord-style CSS Grid ──────────────────────────────────────────────── */
.media-grid-wrapper .media-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
}

/* 1 image — single full-width, natural aspect ratio */
.media-grid-wrapper .media-grid[data-count="1"] {
    grid-template-columns: 1fr;
}

.media-grid-wrapper .media-grid[data-count="1"] .media-grid-item {
    aspect-ratio: unset !important;
    max-height: 430px;
}

.media-grid-wrapper .media-grid[data-count="1"] .media-grid-item img,
.media-grid-wrapper .media-grid[data-count="1"] .media-grid-item video {
    height: auto !important;
    max-height: 430px;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
}

/* 2 images — side-by-side columns */
.media-grid-wrapper .media-grid[data-count="2"] {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 images — one large tile and two stacked tiles */
.media-grid-wrapper .media-grid[data-count="3"] {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
}

.media-grid-wrapper .media-grid[data-count="3"] .media-grid-item:first-child {
    grid-row: span 2;
}

/* 4 images — 2×2 */
.media-grid-wrapper .media-grid[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
}

/* 5 images — 2 top + 3 bottom */
.media-grid-wrapper .media-grid[data-count="5"] {
    grid-template-columns: repeat(6, 1fr);
}

.media-grid-wrapper .media-grid[data-count="5"] .media-grid-item:nth-child(1),
.media-grid-wrapper .media-grid[data-count="5"] .media-grid-item:nth-child(2) {
    grid-column: span 3;
}

.media-grid-wrapper .media-grid[data-count="5"] .media-grid-item:nth-child(3),
.media-grid-wrapper .media-grid[data-count="5"] .media-grid-item:nth-child(4),
.media-grid-wrapper .media-grid[data-count="5"] .media-grid-item:nth-child(5) {
    grid-column: span 2;
}

/* ── Individual cell ─────────────────────────────────────────────────────── */
.media-grid-wrapper .media-grid-item {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 10px;
    cursor: pointer;
    min-width: 0 !important;
}

/* ── Firefox aspect-ratio fix ────────────────────────────────────────────── */
/* Firefox doesn't reliably compute height from aspect-ratio on block-level
   grid items when width is percentage-based (a known Firefox layout bug).
   The fix: explicitly set grid-auto-rows to pixel values that mirror the
   expected column track width, making cells truly square without depending on
   aspect-ratio for height resolution.
   
   Wrapper max-width = 420px, gap = 4px.
   3-col track ≈ (420 - 8) / 3 = ~137px
   2-col track ≈ (420 - 4) / 2 = ~208px                                       */
@supports (-moz-appearance: none) {
    .media-grid-wrapper .media-grid[data-count="2"] {
        grid-auto-rows: 208px;
    }

    .media-grid-wrapper .media-grid[data-count="3"] {
        grid-auto-rows: 137px;
    }

    .media-grid-wrapper .media-grid[data-count="4"] {
        grid-auto-rows: 208px;
    }

    .media-grid-wrapper .media-grid[data-count="5"] {
        /* 6-col base; top 2 items span 3 cols each (≈208px wide), bottom 3 span 2 cols each (≈136px wide).
           Use the larger value so top row looks square; bottom row will be slightly portrait — acceptable. */
        grid-auto-rows: 208px;
    }

    .media-grid-wrapper .media-grid[data-count="6"] {
        grid-auto-rows: 137px;
    }

    /* Fall back for any other count using 3-col default */
    .media-grid-wrapper .media-grid {
        grid-auto-rows: 137px;
    }

    /* With rows sized by the grid, aspect-ratio is no longer needed for height */
    .media-grid-wrapper .media-grid-item {
        aspect-ratio: unset !important;
        height: 100%;
    }

    /* Single-image stays natural — no row sizing interference */
    .media-grid-wrapper .media-grid[data-count="1"] {
        grid-auto-rows: auto;
    }

    .media-grid-wrapper .media-grid[data-count="1"] .media-grid-item {
        height: auto;
        max-height: 350px;
    }

    /* Small screens: wrapper is narrower, scale the row heights proportionally.
       At max-width ~320px: 2-col ≈ 158px, 3-col ≈ 104px */
    @media screen and (max-width: 380px) {

        .media-grid-wrapper .media-grid[data-count="2"],
        .media-grid-wrapper .media-grid[data-count="4"],
        .media-grid-wrapper .media-grid[data-count="5"] {
            grid-auto-rows: 150px;
        }

        .media-grid-wrapper .media-grid[data-count="3"],
        .media-grid-wrapper .media-grid[data-count="6"],
        .media-grid-wrapper .media-grid {
            grid-auto-rows: 100px;
        }
    }
}

.media-grid-wrapper .media-grid-item.hidden {
    display: none !important;
}

/* ── Images & videos — fill the cell uniformly ───────────────────────────── */
.media-grid-wrapper .media-grid-item img,
.media-grid-wrapper .media-grid-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.2s ease;
    will-change: transform;
    border-radius: 0;
    background: transparent;
}

/* Hover zoom */
.media-grid-wrapper .media-grid-item:hover img,
.media-grid-wrapper .media-grid-item:hover video {
    transform: scale(1.06);
}

/* ── "+N more" overlay ───────────────────────────────────────────────────── */
.media-grid-wrapper .remaining-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    pointer-events: none;
    border-radius: inherit;
}

/* Keep chat-media-container transparent inside grid — sizing handled by grid */
.media-grid-wrapper .chat-media-container {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
}

/* Selection overlay */
.selection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    z-index: 5;
    border-radius: inherit;
    text-shadow: 0 0 5px black;
}

.media-grid-item,
.file-stack-item {
    position: relative;
}

.selected .selection-checkbox {
    background: var(--accent-color);
    border-color: white;
}

.selection-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid white;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: all 0.2s;
}

.media-grid-item .selection-checkbox {
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
}

.media-grid-item.selected .selection-checkbox {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.media-grid-item.selected .selection-checkbox::after {
    content: '✓';
    font-weight: bold;
}

/* Discord Markdown */
.message-content strong {
    font-weight: 700;
}

.message-content em {
    font-style: italic;
}

.message-content u {
    text-decoration: underline;
}

.message-content del {
    text-decoration: line-through;
}

.message-content .spoiler {
    background: #1f2333;
    color: transparent;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s;
}

.message-content .spoiler:hover {
    background: #2a2f44;
}

.message-content .spoiler.revealed {
    background: transparent;
    color: inherit;
    cursor: default;
}

.message-content code {
    background: #1e2030;
    padding: 2px 5px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
}

.message-content pre {
    background: #1e2030;
    border: 1px solid #2e3347;
    border-radius: var(--radius-sm);
    padding: 12px;
    overflow-x: auto;
    margin: 6px 0;
}

.message-content pre code {
    background: none;
    padding: 0;
    font-size: 0.9em;
}

.message-content blockquote {
    border-left: 4px solid var(--accent-color);
    margin: 4px 0;
    padding: 2px 12px;
    color: var(--text-secondary);
    font-style: italic;
}

.message-content h1 {
    font-size: 1.4em;
    font-weight: 700;
    margin: 4px 0;
}

.message-content h2 {
    font-size: 1.2em;
    font-weight: 700;
    margin: 4px 0;
}

.message-content h3 {
    font-size: 1.1em;
    font-weight: 700;
    margin: 4px 0;
}

.message-content ul {
    margin: 4px 0;
    padding-left: 24px;
}

.message-content li {
    margin-bottom: 2px;
}

/* Copy button */
.copy-message-btn {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    position: absolute;
    bottom: -30px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transform: none;
    box-shadow: none;
}

.message-row:hover .message .copy-message-btn {
    opacity: 1;
    visibility: visible;
}

.copy-message-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
    transform: none;
}

.copy-message-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.copy-message-btn img {
    width: 14px;
    height: 14px;
}

.message.own .copy-message-btn {
    left: calc(100% + 8px);
    bottom: 0;
}

.message:not(.own) .copy-message-btn {
    left: auto;
    right: calc(100% + 8px);
    bottom: 0;
}

/* Media Viewer Modal */
/* ============================================================
   CINEMATIC MEDIA VIEWER
   ============================================================ */
#mediaViewerModal {
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(20px) saturate(0.5) !important;
    -webkit-backdrop-filter: blur(20px) saturate(0.5) !important;
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

/* Transparent backdrop catches outside-click */
.mvs-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: zoom-out;
}

/* Main shell floats above the backdrop */
.mvs-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(96vw, 1120px);
    /* A definite height is required so that:
       - .mvs-stage's flex:1 resolves to a real pixel value
       - #mediaViewerImage / #mediaViewerVideo max-height:100% has something to
         measure against — without this, max-height:100% collapses and oversized
         media bleeds outside the modal.
       90vh keeps the viewer cinematic; max-height:94vh is a belt-and-suspenders cap. */
    height: 90vh;
    max-height: 94vh;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.07);
    animation: mvsIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mvsIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(14px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── Top bar ── */
.mvs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px 9px 16px;
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    min-height: 46px;
}

.mvs-filename {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    letter-spacing: 0.015em;
}

.mvs-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mvs-badge {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.11);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.mvs-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.mvs-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

.mvs-close-btn:hover {
    background: rgba(220, 38, 38, 0.7);
    border-color: transparent;
    color: #fff;
}

.mvs-close-btn {
    padding: 0 9px;
}

/* ── Stage: the media display area ── */
.mvs-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
    min-height: 0;
    position: relative;
}

/* Image: always expand to fill the full stage.
   object-fit:contain scales to whichever axis hits the boundary first —
   portrait fills height, landscape fills width — dark bars fill the rest. */
#mediaViewerImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: transparent;
}

/* Video: same rule — fill the stage, contain the aspect ratio */
#mediaViewerVideo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #000;
    outline: none;
}

/* Audio card inside stage */
.mvs-stage audio {
    width: min(440px, 88%);
    margin: 52px auto;
    display: block;
}

/* ── Counter ── */
.mvs-counter {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Left / right nav arrows ── */
.mvs-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvs-nav-prev {
    left: 14px;
}

.mvs-nav-next {
    right: 14px;
}

.mvs-nav:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%);
    box-shadow: none;
}

.mvs-nav:active {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-50%);
}

/* ── Filmstrip ── */
.mvs-filmstrip {
    flex-shrink: 0;
    height: 64px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 8px 12px;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.mvs-shell:hover .mvs-filmstrip,
.mvs-filmstrip.mvs-filmstrip--visible {
    opacity: 1;
    pointer-events: auto;
}

.mvs-filmstrip-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    padding-bottom: 2px;
}

.mvs-filmstrip-inner::-webkit-scrollbar {
    height: 3px;
}

.mvs-filmstrip-inner::-webkit-scrollbar-track {
    background: transparent;
}

.mvs-filmstrip-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.mvs-thumb {
    flex-shrink: 0;
    width: 62px;
    height: 46px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.15s, opacity 0.15s, transform 0.15s;
    opacity: 0.55;
    background: #111;
}

.mvs-thumb:hover {
    opacity: 0.85;
    transform: scale(1.06);
}

.mvs-thumb.mvs-thumb--active {
    border-color: #fff;
    opacity: 1;
}

.mvs-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mvs-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mvs-thumb-play svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

/* Play overlay for video thumbnails in grids */
.media-grid-item .video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    font-size: 13px;
    border-radius: inherit;
}

/* File list */
.media-grid-wrapper[data-file-list="true"] {
    max-width: none !important;
    width: 100% !important;
}

.file-list-item.media-grid-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    max-width: none !important;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-list-item .selection-overlay {
    position: static !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    background: transparent !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.file-list-item .selection-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-muted);
    border-radius: 4px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
}

.file-list-item.selected .selection-checkbox {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.file-list-item.selected .selection-checkbox::after {
    content: '✓';
    font-weight: bold;
}

.file-list-item.selected {
    background: rgba(99, 102, 241, 0.1);
    outline: 2px solid var(--accent-color);
}

/* Pre-upload */
.pre-upload-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.pre-upload-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.pre-upload-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pre-upload-remove {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--danger);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: none;
    box-shadow: none;
}

.pre-upload-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: none;
}

.upload-cancel-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: none;
    color: var(--danger);
    font-size: 16px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: none;
    box-shadow: none;
}

.upload-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: none;
}

#floatingUploadBtn {
    cursor: pointer;
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 48px;
    height: 48px;
    z-index: 9999;
    display: none;
}

#floatingUploadBtn svg {
    width: 100%;
    height: 100%;
}

#floatingUploadBtnInner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    transform: none;
    box-shadow: none;
}

#floatingUploadBtnInner:hover {
    background: var(--accent-hover);
    transform: none;
}

/* Upload review */
.upload-review-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.upload-review-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.upload-review-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-review-delete {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--danger);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: none;
    box-shadow: none;
}

.upload-review-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: none;
}

#preUploadModal {
    z-index: 10001 !important;
}

.edited-indicator {
    font-size: 10px;
    opacity: 0.65;
    margin-left: 4px;
    white-space: nowrap;
}

.participant-card.speaking .participant-avatar {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

#directCallBtn {
    display: none;
}

/* Device management */
.device-item:hover {
    background: color-mix(in srgb, var(--bg-secondary) 86%, var(--accent-color) 6%);
}

.device-logout-btn:hover {
    color: #fff;
    background: var(--danger) !important;
    border-radius: 10px;
}

.forward-channel-select {
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
}

/* SVG icons for dark themes */
body.dark .icon-svg,
body.midnight .icon-svg,
body.forest .icon-svg,
body.ocean .icon-svg,
body.vs-dark .icon-svg,
body.galaxy .icon-svg {
    filter: invert(1) hue-rotate(180deg);
}

/* Custom theme color picker */
#customThemePickers input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 28px !important;
    height: 28px !important;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    background: none;
}

#customThemePickers input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

#customThemePickers input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

#customThemeModal .modal-content button {
    width: auto;
    padding: 10px 20px;
    font-size: 15px;
    flex: 1;
    white-space: nowrap;
}

/* Login page enhanced */
.auth-container {
    background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-sidebar) 100%);
    border: 1.5px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.auth-container input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
    background: var(--bg-primary);
}

.auth-container button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--accent-hover), #3730a3);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.auth-container input[type="checkbox"] {
    accent-color: var(--accent-color);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#message.error-message {
    background: rgba(239, 68, 68, 0.08);
    border: 1.5px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-weight: 500;
}

#message.success-message {
    background: rgba(16, 185, 129, 0.08);
    border: 1.5px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-weight: 500;
}

/* ============================================
   SETTINGS MEMBER NAME TRUNCATION
   ============================================ */
.settings-member-name {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    padding-right: 0;
}

.settings-member-name:hover {
    max-width: 200px;
    direction: rtl;
    text-align: left;
    padding-right: 4px;
    background: linear-gradient(to right, transparent, var(--bg-secondary) 10%);
}

/* Verified badge */
.verified-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    vertical-align: middle;
}

.verified-badge svg {
    width: 16px;
    height: 16px;
}

.remove-attachment-btn:hover {
    background: var(--danger) !important;
}

.message-text-caption {
    margin-bottom: 8px;
    word-break: break-word;
    white-space: pre-wrap;
}

.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    background: rgba(0, 0, 0, 0.18);
    border-radius: inherit;
}

/* Blocked avatars */
.blocked-avatar {
    filter: blur(4px);
    pointer-events: none;
    opacity: 0.7;
    transition: filter 0.2s;
}

.blocked-avatar:hover {
    filter: blur(4px);
}

.floating-avatar-blurred img,
.floating-avatar-blurred .profile-panel-initial {
    filter: blur(4px);
    opacity: 0.7;
}

.floating-badge-blurred img {
    filter: blur(4px);
    opacity: 0.7;
}

.reaction-menu-btn.active-reaction {
    border: 2px solid var(--accent-color) !important;
    background-color: rgba(99, 102, 241, 0.1) !important;
}

/* Missing media placeholder */
.missing-media-placeholder {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 110px;
    min-height: 70px;
    max-width: 280px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.07);
    border: 1.5px dashed rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    color: #ef4444;
    font-size: 12px;
    text-align: center;
}

.missing-media-placeholder span:first-child {
    font-size: 20px;
}

/* Edit textarea */
.message-edit-textarea {
    resize: vertical !important;
    min-height: 60px !important;
    max-height: 70vh !important;
    font-family: var(--font) !important;
}

/* Confirm dialog input */
.confirm-dialog-input {
    width: 100%;
    padding: 9px 12px;
    margin: 4px 0 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
    display: block;
    outline: none;
    transition: border-color .15s;
}

.confirm-dialog-input:focus {
    border-color: var(--accent-color);
}

/* Video grid */
.media-grid-item:hover {
    opacity: 0.9;
    cursor: pointer;
}

.video-play-overlay.full-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-play-overlay img {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s;
}

/* Smaller play button specifically inside media grid cards */
.media-grid-item .video-play-overlay img {
    width: 16px;
    height: 16px;
}

.media-grid-item:hover .video-play-overlay img {
    transform: scale(1.1);
}

.chat-image-thumbnail {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity 0.2s;
}

.chat-image-thumbnail:hover {
    opacity: 0.8;
}

/* File message cards */
.message.own .file-message-card {
    background: var(--message-own-bg);
    color: var(--message-own-text);
}

.message:not(.own) .file-message-card {
    background: var(--message-bg);
    color: var(--text-primary);
}

.file-message-card button {
    background: rgba(255, 255, 255, 0.2);
    transform: none;
    box-shadow: none;
}

.file-message-card button:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: none;
}

.message.own .file-message-card button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: none;
}

.file-message-card button img {
    width: 20px;
    height: 20px;
    display: block;
}

.file-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--message-attachment-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: 0.2s ease;
    direction: ltr;
}

.file-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

.file-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    direction: ltr;
}

.file-card-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.file-card-info {
    min-width: 0;
}

.file-card-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    unicode-bidi: plaintext;
}

.file-card-ext {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 2px;
}

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

.file-open-btn,
.file-download-btn {
    border: none;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    transform: none;
    box-shadow: none;
}

.file-list-item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Message text/code in own messages */
.message .message-content h1,
.message .message-content h2,
.message .message-content h3,
.message .message-content h4,
.message .message-content ul,
.message .message-content ol,
.message .message-content li,
.message .message-content blockquote,
.message .message-content p {
    color: inherit;
}

.message.own .message-content code,
.message.own .message-content pre {
    background: rgba(0, 0, 0, 0.2);
    color: inherit;
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark .message.own .message-content code,
body.dark .message.own .message-content pre,
body.midnight .message.own .message-content code,
body.midnight .message.own .message-content pre,
body.forest .message.own .message-content code,
body.forest .message.own .message-content pre,
body.ocean .message.own .message-content code,
body.ocean .message.own .message-content pre,
body.vs-dark .message.own .message-content code,
body.vs-dark .message.own .message-content pre,
body.galaxy .message.own .message-content code,
body.galaxy .message.own .message-content pre {
    background: rgba(255, 255, 255, 0.15);
}

.message:not(.own) .message-content code,
.message:not(.own) .message-content pre {
    background: #1e2030;
    color: #e2e8f0;
    border-color: #2e3347;
}

.message.own .message-content .spoiler {
    background: rgba(255, 255, 255, 0.2);
    color: transparent;
}

.message.own .message-content .spoiler.revealed {
    background: transparent;
    color: inherit;
}

.message.own .message-content blockquote {
    border-left-color: rgba(255, 255, 255, 0.5);
    color: inherit;
    opacity: 0.9;
}

/* ============================================================
   Pixel-Art Emoji Engine — global styles
   ============================================================ */

/* Base pixel emoji — crisp scaling everywhere */
img.px-emoji {
    vertical-align: -0.2em;
    display: inline;
    pointer-events: none;
    border: none;
    background: transparent;
    flex-shrink: 0;
}

/* Inline in message text — size relative to font so it scales with text */
.message-content img.px-emoji,
.message-text-caption img.px-emoji,
img.px-emoji-inline {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    margin: 0 0.05em;
    display: inline;
    image-rendering: auto;
}

/* Emoji picker grid buttons */
.ep-emoji {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 3px !important;
    min-width: 34px;
    min-height: 34px;
}

.ep-emoji img.px-emoji {
    width: 22px;
    height: 22px;
    transition: transform 0.08s ease;
}

.ep-emoji:hover img.px-emoji {
    transform: scale(1.35);
}

/* Category bar icons */
.ep-cat-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.ep-cat-btn img.px-emoji {
    width: 18px;
    height: 18px;
}

/* Reaction bar (context menu quick-react row) */
#reactionEmojiMenu button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.1s, transform 0.1s;
    padding: 5px 7px !important;
}

#reactionEmojiMenu button:hover {
    background: var(--hover-color, rgba(255, 255, 255, 0.08)) !important;
    transform: scale(1.25) translateY(-2px);
}

img.reaction-bar-emoji {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Reaction chips on messages */
.reaction-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
}

.reaction-chip img.chip-px-emoji {
    width: 16px;
    height: 16px;
}

/* Search results */
.ep-search-results .ep-emoji {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   InTeraNet Bot — UI styles
═══════════════════════════════════════════════════════════════════ */

/* BOT badge next to sender name in messages */
.bot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5865f2, #7c3aed);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1.6;
    text-transform: uppercase;
    pointer-events: none;
    flex-shrink: 0;
}

/* BOT avatar indicator — small gear overlay */
.bot-avatar-wrap {
    position: relative;
    display: inline-block;
}

.bot-avatar-wrap::after {
    content: '⚙';
    position: absolute;
    bottom: -2px;
    right: -3px;
    font-size: 9px;
    background: var(--bg-primary, #1e1e2e);
    border-radius: 50%;
    padding: 0 1px;
    line-height: 1;
    pointer-events: none;
}

/* BOT DM — request chat wall */
.bot-chat-wall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 24px;
    text-align: center;
    flex: 1;
    min-height: 0;
}

.bot-chat-wall .bot-wall-icon {
    font-size: 48px;
    filter: drop-shadow(0 0 12px rgba(88, 101, 242, .5));
}

.bot-chat-wall h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.bot-chat-wall p {
    font-size: 13px;
    color: var(--text-secondary, #888);
    margin: 0;
    max-width: 300px;
}

.bot-request-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #5865f2, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}

.bot-request-btn:hover {
    opacity: .88;
    transform: translateY(-1px);
}

.bot-request-btn:active {
    transform: translateY(0);
}

.bot-request-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.bot-pending-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary, #888);
    background: var(--bg-secondary, #2a2a3d);
    border-radius: 8px;
    padding: 10px 16px;
}

/* "Now playing" bar in voice channel */
.bot-now-playing {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(88, 101, 242, .15);
    border: 1px solid rgba(88, 101, 242, .3);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-primary, #eee);
    margin: 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bot-now-playing .np-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.bot-now-playing .np-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-grid-item>.video-play-overlay img {
    scale: 0.45;
}

.play-overlay img {
    scale: 1.5;
    background: transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — comprehensive mobile / tablet adjustments
   Added as a single additive block at the end so existing rules are untouched.
   Covers: settings modal, media viewer, search bar, friends panel, chat
   header, safe-area insets, tablet sidebar, touch targets.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (769–1024px): narrower sidebar, comfortable chat ─────────────── */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .sidebar { width: 220px; }
    .settings-nav { width: 150px; }
    .settings-modal-content { width: 92%; }
    .chat-header { padding: 0 14px; }
    #searchInput { width: 150px; }
}

/* ── Mobile (≤768px): the big rebuild ──────────────────────────────────── */
@media screen and (max-width: 768px) {
    /* Lock the body so it never scrolls — the chat header, messages, and
       input must stay fixed within the viewport.  Without this, the wrapped
       mobile chat header (132px instead of 66px) can push the total layout
       past 100vh, causing the body to scroll and the user to "pull down" to
       reach the input box.  Using 100dvh (dynamic viewport height) accounts
       for mobile browser address bars that shrink the visible area. */
    html, body {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
    }
    /* Kill the top gap: body is a flex container that vertically CENTERS its
       single child (.dashboard-container).  On mobile 100vh exceeds the
       visible area (browser address bar), so centering pushes the app down
       and leaves a blank strip at the top.  Pin to the top instead. */
    body {
        align-items: flex-start;
        justify-content: flex-start;
    }
    /* Copy-to-clipboard button is a hover-reveal affordance on desktop; on
       touch a tap would fire it unintentionally, so hide it entirely.  The
       Pinterest-style focus view provides text actions on mobile instead. */
    .copy-message-btn { display: none !important; }
    /* The dashboard container fills exactly the viewport — no overflow. */
    .dashboard-container {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }
    /* The chat panel constrains its children — header + messages + input
       flex within the panel's height, and only the messages area scrolls. */
    #chatPanel {
        overflow: hidden;
        height: 100%;
    }
    /* Chat header stays at top (flex-shrink: 0 so it doesn't compress). */
    .chat-header {
        flex-shrink: 0;
    }
    /* Messages fill the remaining space + scroll internally. */
    #messagesContainer,
    .messages-container {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Chat input stays at bottom (flex-shrink: 0 so it doesn't compress). */
    .chat-input {
        flex-shrink: 0;
    }
    /* Settings modal — stack nav above content, not side-by-side */
    .settings-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .settings-container {
        flex-direction: column;
        height: 100vh;
        max-height: 100vh;
    }
    .settings-nav {
        width: 100%;
        display: flex;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 8px;
        flex-shrink: 0;
        -webkit-overflow-scrolling: touch;
    }
    .settings-nav-item {
        white-space: nowrap;
        padding: 10px 16px;
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    .settings-nav-item.active {
        border-left: none;
        border-bottom-color: var(--accent-color);
    }
    .settings-panes {
        padding: 16px;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Media viewer — full-screen on mobile */
    .mvs-shell {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .mvs-topbar { padding: 8px 10px; min-height: 44px; }
    .mvs-filename { font-size: 11px; max-width: 60%; }
    .mvs-stage { padding: 4px; }
    .mvs-nav { width: 36px; }
    .mvs-nav svg { width: 20px; height: 20px; }
    .mvs-filmstrip { max-height: 60px; }
    .mvs-thumb { width: 44px; height: 44px; }

    /* Chat header — compact, stack search below group name */
    .chat-header {
        padding: 8px 10px 6px 10px;
        min-height: 0;
        height: auto;
        flex-wrap: wrap;
        gap: 4px;
    }
    .chat-header-left {
        flex: 1 1 100%;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    /* Text group (group name + description) stays on the left */
    .chat-header-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    /* Hamburger — pushed to the far right by justify-content: space-between */
    .chat-header-left .mobile-menu-btn {
        flex-shrink: 0;
    }
    .chat-header-left h3 {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #currentGroupDesc { font-size: 11px; }
    .chat-header-right {
        flex: 1 1 100%;
        gap: 6px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    #searchInput {
        width: 100%;
        flex: 1;
        min-width: 0;
        font-size: 15px;
        padding: 8px 12px;
    }
    #searchBtn, #clearSearchBtn, #inviteBtn {
        padding: 8px 10px;
        flex-shrink: 0;
        font-size: 13px;
    }

    /* Friends panel — stack tabs above search, full-width */
    .friends-header { padding-top: env(safe-area-inset-top); }
    .friends-header {
        padding: 8px 10px 0 10px;
        height: auto;
        min-height: 0;
    }
    .friends-header > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
    }
    /* Hamburger in friends header — push to the right of the tabs row */
    .friends-header > div:first-child > .mobile-menu-btn {
        margin-left: auto;
        flex-shrink: 0;
    }
    .friends-header > div:first-child > .friends-tabs {
        flex: 0 1 auto;
    }
    .friends-header > div:first-child > #friendsSearchContainer {
        flex: 1 1 100%;
        order: 3;
    }
    .friends-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        padding: 0 8px;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
    }
    .friends-tab {
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 13px;
    }
    #friendsSearchContainer {
        padding: 0 12px;
        width: 100%;
        flex: none;
    }
    #friendsSearchInput {
        width: 100%;
        font-size: 16px;
        padding: 10px 14px;
    }
    .friends-content { padding: 8px; }

    /* Selection mode header — wrap buttons */
    #selectionHeader { flex-wrap: wrap; gap: 8px; }
    #selectionHeader button { font-size: 12px; padding: 6px 10px; }

    /* Sidebar — slightly wider on larger phones */
    .sidebar { width: 85%; max-width: 320px; }

    /* Modals — full-width, bottom-sheet style */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        border-radius: 0;
        padding: 20px 16px;
        max-height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal { align-items: stretch; }

    /* Profile panel — full width, slide from bottom */
    #floatingProfilePanel {
        position: fixed !important;
        bottom: 0; left: 0; right: 0;
        top: auto;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Global audio player — compact */
    .global-audio-player { padding: 4px 8px; }
    .audio-player-title { font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .audio-player-progress-wrapper { height: 4px; }

    /* Direct call bar — compact, no video preview in bar */
    #directCallBar > div:first-child { padding: 6px 8px; gap: 6px; flex-wrap: nowrap; }
    #directCallName { font-size: 13px; max-width: 80px; }
    #directCallDuration { font-size: 11px; }
    #directCallSelfVideo, #directCallRemoteVideo { width: 36px; height: 28px; }

    /* Context menus — wider, touch-friendly */
    .context-menu { min-width: 180px; }
    .context-menu button { padding: 14px 18px; font-size: 15px; }

    /* Invite card — full width */
    .invite-card { max-width: 100%; margin: 8px 0; }

    /* Scrollbars — hidden on mobile (momentum scrolling) */
    ::-webkit-scrollbar { width: 0; height: 0; }
    .messages-container, .channels-list, .groups-list, .chats-list, .settings-panes {
        -webkit-overflow-scrolling: touch;
    }

    /* Safe area insets for notched phones — apply to the elements that need
       them directly, NOT on the dashboard container (that would shrink the
       usable height and cause overflow that pushes the footer down). */
    .chat-header {
        padding-top: env(safe-area-inset-top);
    }
    .sidebar-footer { padding-bottom: env(safe-area-inset-bottom); }
    /* The chat input's bottom padding includes the safe-area inset so the
       keyboard/sent button isn't hidden behind the home indicator.  This
       padding is INSIDE the chat-input's box (box-sizing: border-box by
       default via the global * selector), so it doesn't add extra height
       beyond the flex-shrink:0 element — it just reduces the inner space. */
    .chat-input {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Typing indicator — inline, not overlapping */
    #typingIndicator { font-size: 11px; position: static; }

    /* Message content — prevent overflow on narrow screens */
    .message-content {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .message-content pre {
        max-width: 100%;
        overflow-x: auto;
        font-size: 12px;
        padding: 8px;
    }
    .message-content code { font-size: 12px; }
    .message-content h1 { font-size: 1.2em; }
    .message-content h2 { font-size: 1.1em; }
    .message-content h3 { font-size: 1.05em; }

    /* Emoji panel — compact, fits screen.
       On mobile the panel is a viewport-pinned bottom sheet.  Must use
       position:fixed (not absolute) because .emoji-picker-container is itself
       position:absolute (a 0×0 anchor at the emoji button) — position:absolute
       would resolve bottom:0/left:0/right:0 against that anchor, not the
       viewport, leaving the sheet floating mid-screen. */
    .emoji-panel {
        position: fixed;
        width: 100vw;
        height: 50vh;
        max-height: 320px;
        bottom: 0;
        right: 0;
        left: 0;
        border-radius: 12px 12px 0 0;
    }
    .ep-grid { grid-template-columns: repeat(7, 1fr); }

    /* Mention popup — full width */
    .mention-popup {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        left: 10px !important;
        bottom: auto;
        top: auto;
    }

    /* Reactions popup — centered, larger touch targets */
    .reaction-popup { gap: 4px; padding: 6px; }
    .reaction-popup .reaction-btn { width: 38px; height: 38px; font-size: 22px; }

    /* ═══════════════════════════════════════════════════════════════════════
       MOBILE FOCUS VIEW — Pinterest-style: blur the chat, spotlight the
       tapped message, present a stacked action sheet (Reply + Forward on top,
       Edit below, Delete below that, reaction bar at the bottom).  Dismissed
       by tapping the blurred backdrop, the X button, or swiping the sheet down.
       ═══════════════════════════════════════════════════════════════════════ */
    .mobile-focus-overlay {
        position: fixed;
        inset: 0;
        z-index: 9000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        transition: opacity 0.18s ease;
        touch-action: none;
    }
    .mobile-focus-overlay.show { opacity: 1; }

    /* Spotlight card — holds a clone of the tapped message plus the actions */
    .mobile-focus-card {
        position: relative;
        width: 100%;
        max-width: 440px;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        transform: translateY(24px) scale(0.96);
        opacity: 0;
        transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.18s ease;
        will-change: transform, opacity;
    }
    .mobile-focus-overlay.show .mobile-focus-card {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Clone of the message — pinned to top of card, scrollable if long */
    .mobile-focus-msg {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        padding: 12px;
        margin-bottom: 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: 50vh;
        box-shadow: var(--shadow-lg);
    }
    /* The clone keeps message styling but resets positioning helpers */
    .mobile-focus-msg .message {
        position: static;
        max-width: none;
        margin: 0;
    }

    /* Close (X) button — top-right of the card */
    .mobile-focus-close {
        position: absolute;
        top: -12px;
        right: -8px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: 20px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        box-shadow: var(--shadow-lg);
        cursor: pointer;
    }
    .mobile-focus-close:active { transform: scale(0.92); }

    /* Action sheet — stacked rows */
    .mobile-focus-actions {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        touch-action: pan-y; /* allow swipe-down to start on the sheet */
    }

    /* Top row: Reply + Forward side by side */
    .mobile-focus-top-row {
        display: flex;
        gap: 1px;
        background: var(--border-color);
    }
    .mobile-focus-top-row > button {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 12px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: 15px;
        font-weight: 600;
        border: none;
        border-radius: 0;
        cursor: pointer;
    }
    .mobile-focus-top-row > button:active { background: var(--border-color); }

    /* Full-width rows (Edit, Delete) */
    .mobile-focus-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 12px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: 15px;
        font-weight: 600;
        border: none;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
        cursor: pointer;
    }
    .mobile-focus-row:active { background: var(--border-color); }
    .mobile-focus-row.danger { color: #e53e3e; }

    /* Reaction bar — horizontal scroll of emoji, pinned to bottom */
    .mobile-focus-reactions {
        display: flex;
        gap: 4px;
        padding: 10px 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0 0 14px 14px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mobile-focus-reactions::-webkit-scrollbar { display: none; }
    .mobile-focus-reactions .reaction-btn {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .mobile-focus-reactions .reaction-btn.reacted {
        border-color: var(--accent-color);
    }
    .mobile-focus-reactions .reaction-btn:active { transform: scale(0.9); }

    /* ═══════════════════════════════════════════════════════════════════════
       MODAL INNER LISTS — relax fixed max-heights on mobile so the modal
       itself is the single scroll context (avoids nested-scroll jank where a
       300px inner list can't be reached because the outer modal scrolls first).
       ═══════════════════════════════════════════════════════════════════════ */
    #searchResults,
    #settingsMembersList,
    #inviteRecipientsList,
    #forwardSearchResults,
    #devicesListContainer {
        max-height: 40vh !important;
    }
    #attachmentList { max-height: 90px !important; }

    /* ═══════════════════════════════════════════════════════════════════════
       CALL OVERLAYS — fixed pixel widths/min-widths overflow ≤360px phones.
       #floatingRemoteVideo: 320px @ left:100px → 420px total, clipped.
       Call-overlay cards: min-width:320px overflows ≤320px devices.
       ═══════════════════════════════════════════════════════════════════════ */
    #floatingRemoteVideo {
        width: calc(100vw - 24px) !important;
        max-width: 360px !important;
        left: 12px !important;
        top: 12px !important;
        min-width: 0 !important;
    }
    #callerRingingOverlay > div,
    #incomingCallOverlay > div {
        min-width: 0 !important;
        width: calc(100vw - 32px) !important;
        max-width: 360px !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       DIRECT CALL BAR — the base .show rule forces max-height:80px !important
       and the inline content (avatar+name+2 videos+4×36px buttons ≈380px)
       overflows 360px.  Allow wrap + hide the tiny video previews (the mobile
       comment already intended "no video preview in bar").
       ═══════════════════════════════════════════════════════════════════════ */
    #directCallBar.show { max-height: 140px !important; }
    #directCallBar > div:first-child { flex-wrap: wrap; }
    #directCallSelfVideo,
    #directCallRemoteVideo { display: none !important; }

    /* ═══════════════════════════════════════════════════════════════════════
       BETWEEN-HEADER-AND-INPUT BARS — reply preview, attachment box, global
       audio player.  They are flex siblings of .chat-input inside #chatPanel.
       Add horizontal safe-area insets + flex-shrink:0 so they don't compress or
       sit under the notch, and never push the input off-screen.
       ═══════════════════════════════════════════════════════════════════════ */
    #replyPreviewBar,
    #attachmentPreviewBox,
    #globalAudioPlayer {
        flex-shrink: 0;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* ═══════════════════════════════════════════════════════════════════════
       MUSIC PARTY BUTTON — secondary feature, hides from the cramped mobile
       input row (accessible via settings/other entry points).
       ═══════════════════════════════════════════════════════════════════════ */
    #mpConnectBtn { display: none !important; }

    /* ═══════════════════════════════════════════════════════════════════════
       Z-INDEX — raise modals above the mobile focus overlay (z-9000) so a
       just-opened modal isn't hidden behind the 200ms close transition.
       ═══════════════════════════════════════════════════════════════════════ */
    .modal { z-index: 9500; }

    /* ═══════════════════════════════════════════════════════════════════════
       REACTION POPUP — on desktop it opens to the side (right/left of the
       message).  On a 360px phone an incoming message sits at the left edge, so
       right:calc(100% + 8px) pushes the popup off-screen (clipped by
       overflow-x:hidden).  Center it above the message instead.
       ═══════════════════════════════════════════════════════════════════════ */
    .message:not(.own) .reaction-popup {
        right: auto;
        left: 50%;
        transform: translate(-50%, -100%);
    }
    .message.own .reaction-popup {
        left: auto;
        right: 50%;
        transform: translate(50%, -100%);
    }

    /* ═══════════════════════════════════════════════════════════════════════
       MEDIA VIEWER NAV — 36px is below the 44px touch target guideline.
       ═══════════════════════════════════════════════════════════════════════ */
    .mvs-nav { width: 44px; height: 44px; }
}

/* ── Small phones (≤480px): tighter spacing, larger touch targets ───────── */
@media screen and (max-width: 480px) {
    .sidebar { width: 88%; }
    .chat-header { padding: 8px 8px 6px 8px; }
    .chat-header-left h3 { font-size: 15px; }
    #currentGroupDesc { font-size: 11px; }
    .message-row { max-width: 96%; gap: 6px; }
    .message { padding: 7px 9px; border-radius: 12px; }
    .message-content { font-size: 14px; }
    .message-time { font-size: 11px; }
    .friends-tab { padding: 6px 10px; font-size: 12px; }
    .settings-nav-item { padding: 8px 12px; font-size: 13px; }
    .mvs-filename { font-size: 12px; max-width: 50%; }
    #searchInput { font-size: 14px; }
    .preloader-name { font-size: 22px; }
}

/* ── Landscape phones — use height efficiently ─────────────────────────── */
@media screen and (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .chat-header { padding-top: 6px; min-height: 40px; height: auto; }
    .chat-header-left h3 { font-size: 14px; }
    #currentGroupDesc { display: none; }
    .chat-input { padding: 4px 8px; }
    .emoji-panel { height: 40vh; }
    .settings-container { height: 100vh; }
}

/* ── Reduced motion: disable heavy transitions on mobile ───────────────── */
@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
    .mvs-shell { animation: none; }
    #appPreloader { transition: none; }
}
/* ============================================
   SHARED CONTENT WINDOW (B6/B9) — DM & group media/music/files/links
   ============================================ */
.shared-content-modal {
    max-width: 560px;
    width: 560px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    overflow: hidden;
}
.shared-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shared-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 16px 14px;
    border-bottom: 1px solid var(--border-color);
}
.shared-profile-header .sp-badge { max-height: 60px; margin-bottom: 6px; }
.shared-profile-header .sp-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
    background: var(--accent-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
}
.shared-profile-header .sp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.shared-profile-header .sp-name { font-size: 20px; font-weight: 700; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.shared-profile-header .sp-username { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.shared-profile-header .sp-bio { margin-top: 8px; font-size: 13px; color: var(--text-muted); max-width: 90%; white-space: pre-wrap; }
.shared-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 14px 0;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.shared-tab {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.shared-tab.active { color: var(--text-primary); border-bottom-color: var(--accent-color); }
.shared-body { flex: 1; overflow: hidden; display: flex; min-height: 200px; }
.shared-pane { flex: 1; overflow-y: auto; padding: 12px 14px; }
.shared-pane-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-content: start;
}
.shared-media-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-tertiary, #1e1f25);
}
.shared-media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shared-media-cell .smc-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-size: 22px;
}
.shared-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border-color);
}
.shared-row .sr-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 7px;
    background: var(--bg-tertiary, #1e1f25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.shared-row .sr-main { min-width: 0; flex: 1; }
.shared-row .sr-name { color: var(--text-primary); text-decoration: none; font-size: 13px; word-break: break-word; display: block; }
.shared-row a.sr-name:hover { text-decoration: underline; }
.shared-row .sr-sub { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.shared-row .sr-date { margin-left: auto; color: var(--text-muted); font-size: 11px; flex-shrink: 0; align-self: flex-start; }
.shared-empty { text-align: center; color: var(--text-muted); padding: 44px 0; font-size: 13px; }

/* ============================================
   CHAT APPEARANCE SETTINGS (B18) — applied to #messagesContainer
   ============================================ */
/* Message position overrides (default = mine left / others right). */
#messagesContainer.chat-pos-reversed .message-row.own-row { align-self: flex-end; flex-direction: row-reverse; }
#messagesContainer.chat-pos-reversed .message-row.other-row { align-self: flex-start; flex-direction: row; }
#messagesContainer.chat-pos-all-left .message-row.own-row,
#messagesContainer.chat-pos-all-left .message-row.other-row { align-self: flex-start; flex-direction: row; }
#messagesContainer.chat-pos-all-right .message-row.own-row,
#messagesContainer.chat-pos-all-right .message-row.other-row { align-self: flex-end; flex-direction: row-reverse; }

/* Bubble styles. */
#messagesContainer.chat-bubble-square .message { border-radius: 6px; }
#messagesContainer.chat-bubble-minimal .message { box-shadow: none; border-radius: 8px; }
#messagesContainer.chat-bubble-minimal .message:not(.own) { background: transparent; border: 1px solid var(--border-color); }

/* Chat backgrounds. */
#messagesContainer.chat-bg-dim { background: #14151a; }
#messagesContainer.chat-bg-aurora { background: linear-gradient(160deg, #1a1d2e 0%, #2a2350 50%, #16263a 100%); }
#messagesContainer.chat-bg-dusk { background: linear-gradient(160deg, #2a1d2e 0%, #3a2540 60%, #1a1626 100%); }
#messagesContainer.chat-bg-forest { background: linear-gradient(160deg, #14241c 0%, #1c3327 60%, #0f1a14 100%); }
#messagesContainer.chat-bg-mesh {
    background-color: #16171d;
    background-image: radial-gradient(circle at 20% 20%, rgba(99,102,241,0.16), transparent 40%),
                      radial-gradient(circle at 80% 60%, rgba(16,185,129,0.12), transparent 40%);
}

/* Settings pane controls. */
.chat-setting-group { margin-bottom: 20px; }
.chat-setting-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.chat-setting-select {
    width: 100%;
    max-width: 360px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
}
.chat-bg-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.chat-bg-swatch {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    padding: 0;
    color: var(--text-muted);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-bg-swatch.active { border-color: var(--accent-color); box-shadow: 0 0 0 2px var(--accent-color); }
.chat-bg-swatch[data-bg="dim"] { background: #14151a; }
.chat-bg-swatch[data-bg="aurora"] { background: linear-gradient(160deg, #1a1d2e, #2a2350, #16263a); }
.chat-bg-swatch[data-bg="dusk"] { background: linear-gradient(160deg, #2a1d2e, #3a2540, #1a1626); }
.chat-bg-swatch[data-bg="forest"] { background: linear-gradient(160deg, #14241c, #1c3327, #0f1a14); }
.chat-bg-swatch[data-bg="mesh"] { background-color: #16171d; background-image: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.5), transparent 50%); }

/* ============================================
   GROUP SERVER BADGE (B12)
   ============================================ */
.group-header-badge { max-height: 22px; max-width: 60px; object-fit: contain; margin-right: 6px; vertical-align: middle; }
/* Right-click group card: badge + avatar + name above the actions. */
.context-menu.expanded { min-width: 200px; }
.ctx-group-card {
    display:flex; flex-direction:column; align-items:center;
    text-align: center;
    gap:4px; padding:0 0 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom:4px; overflow:hidden;
}
.ctx-group-banner { width:100%; height:72px; overflow:hidden; background:var(--bg-tertiary); }
.ctx-group-badge { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.ctx-group-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow:hidden; margin-top:-27px; border:4px solid var(--bg-primary); position:relative; z-index:1;
    background: var(--accent-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
}
.ctx-group-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ctx-group-name { font-weight:700; font-size:13px; color:var(--text-primary); padding:0 10px; }
.ui-icon { width:17px; height:17px; object-fit:contain; vertical-align:middle; flex:0 0 auto; }
.group-settings-heading h3 { display:flex; align-items:center; gap:7px; }
.context-menu button .ui-icon { margin-right:8px; }

/* ============================================
   DM CALL BUTTON STATES (B5)
   ============================================ */
@keyframes dmCallRingPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    15% { transform: scale(1.18) rotate(-13deg); }
    30% { transform: scale(1.18) rotate(13deg); }
    45% { transform: scale(1.12) rotate(-9deg); }
    60% { transform: scale(1.12) rotate(9deg); }
    75% { transform: scale(1.06) rotate(-4deg); }
}
.dm-call-ringing { animation: dmCallRingPulse 0.85s ease-in-out infinite; transform-origin: center; }
.dm-call-incall { background: rgba(245, 101, 101, 0.12) !important; }
/* B15 — server roles and permissions */
.group-settings-shell {
    width: min(920px, calc(100vw - 32px));
    max-width: 920px;
    min-height: 620px;
}
.group-settings-heading { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.group-settings-tabs { display:flex; gap:6px; border-bottom:1px solid var(--border-color); margin-bottom:18px; overflow-x:auto; }
.group-settings-tab {
    width:auto; border:0; border-radius:8px 8px 0 0; padding:9px 14px;
    background:transparent; color:var(--text-muted); cursor:pointer;
}
.group-settings-tab.active { color:var(--text-primary); background:var(--bg-hover); box-shadow:inset 0 -2px var(--accent-color); }
.group-settings-pane { display:none; }
.group-settings-pane.active { display:block; }
.settings-section-title { margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border-color); }
.settings-section-title.danger { color:var(--danger); border-bottom-color:var(--danger); }
.roles-settings-pane.active { display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; min-height:470px; }
.roles-sidebar { border-right:1px solid var(--border-color); padding-right:14px; min-width:0; }
.roles-sidebar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.roles-sidebar-head h4 { margin:0; }
.role-create-btn { width:34px; height:32px; padding:0; }
.settings-roles-list { display:flex; flex-direction:column; gap:5px; }
.settings-role-row {
    display:flex; align-items:center; gap:8px; padding:9px; border-radius:7px;
    background:var(--bg-secondary); cursor:pointer; user-select:none;
}
.settings-role-row.active { outline:2px solid var(--accent-color); }
.settings-role-row.dragging { opacity:.5; }
.role-drag-handle { color:var(--text-muted); cursor:grab; }
.role-color-dot { width:12px; height:12px; border-radius:50%; background:var(--text-muted); flex:0 0 auto; }
.role-row-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-lock { margin-left:auto; font-size:12px; color:var(--text-muted); }
.role-editor { min-width:0; }
.roles-empty, .settings-feature-stub {
    min-height:180px; display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:8px; color:var(--text-muted); text-align:center; border:1px dashed var(--border-color); border-radius:10px;
}
.role-editor-tabs { display:flex; gap:6px; margin-bottom:14px; }
.role-editor-tab { width:auto; padding:8px 12px; background:var(--bg-secondary); color:var(--text-muted); }
.role-editor-tab.active { background:var(--accent-color); color:#fff; }
.role-editor-pane { display:none; }
.role-editor-pane.active { display:block; }
.role-form-grid { display:grid; grid-template-columns:1fr 120px; gap:12px; }
.role-display-preview { margin:14px 0; padding:12px; border-radius:8px; background:var(--bg-secondary); }
.role-preview-tag { display:inline-flex; padding:3px 9px; border-radius:999px; background:rgba(88,101,242,.15); font-size:12px; font-weight:700; }
.permission-category { margin:16px 0; }
.permission-category h5 { margin:0 0 8px; text-transform:capitalize; color:var(--text-muted); }
.permission-row {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:10px 0;
    border-bottom:1px solid var(--border-color);
}
.permission-label { font-weight:650; }
.permission-desc { color:var(--text-muted); font-size:12px; margin-top:3px; }
.permission-row.stub { opacity:.48; }
.role-member-list { display:flex; flex-direction:column; gap:7px; max-height:none; overflow:visible; }
.role-member-row { display:flex; align-items:center; justify-content:space-between; padding:9px; background:var(--bg-secondary); border-radius:7px; }
.role-editor-actions { display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.role-editor-actions button { width:auto; }
.profile-panel-group-roles {
    margin:12px 12px 0; padding:11px; border:1px solid var(--border-color); border-radius:12px;
    background:color-mix(in srgb,var(--bg-primary) 55%,transparent); font-size:11px;
}
.profile-roles-heading { display:flex; align-items:center; min-height:20px; margin-bottom:8px; }
.profile-roles-label {
    color:var(--text-muted); font-weight:800; text-transform:uppercase; letter-spacing:.075em; font-size:10px;
}
.profile-role-count {
    margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:flex; align-items:center; justify-content:center;
    border-radius:999px; color:var(--text-muted); background:var(--bg-tertiary); font-size:10px; font-weight:750;
}
.profile-roles-loading { margin-left:auto; color:var(--text-muted); }
.profile-role-tags { display:flex; flex-wrap:wrap; gap:5px; }
.profile-role-tag {
    max-width:100%; display:inline-flex; align-items:center; gap:5px; padding:4px 7px; overflow:hidden;
    border:1px solid color-mix(in srgb,var(--role-color) 35%,var(--border-color)); border-radius:999px;
    color:color-mix(in srgb,var(--role-color) 82%,white); background:color-mix(in srgb,var(--role-color) 11%,transparent);
    font-weight:700; line-height:1.2; text-overflow:ellipsis; white-space:nowrap;
}
.profile-role-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--role-color); box-shadow:0 0 0 2px color-mix(in srgb,var(--role-color) 16%,transparent); }
.profile-role-editor { margin-top:9px; border-top:1px solid var(--border-color); padding-top:7px; }
.profile-role-editor summary {
    list-style:none; display:flex; align-items:center; justify-content:space-between; padding:5px 3px;
    color:var(--text-muted); font-size:11px; font-weight:750; cursor:pointer; user-select:none;
}
.profile-role-editor summary::-webkit-details-marker { display:none; }
.profile-role-editor-chevron {
    width:7px; height:7px; margin-right:3px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .16s;
}
.profile-role-editor[open] .profile-role-editor-chevron { transform:rotate(225deg); }
.profile-role-manage {
    display:flex; flex-direction:column; gap:3px; margin-top:4px; max-height:170px; padding-right:2px; overflow:auto;
    scrollbar-width:thin;
}
.profile-role-manage label {
    min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 7px;
    border-radius:8px; cursor:pointer; transition:background .15s;
}
.profile-role-manage label:hover { background:var(--bg-hover); }
.profile-role-option-name { min-width:0; display:flex; align-items:center; gap:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; }
.profile-role-switch { width:34px; height:20px; flex-basis:34px; }
.profile-role-switch::after { width:14px; height:14px; }
.profile-role-switch:checked::after { transform:translateX(14px); }
body.surface-web-desktop .floating-profile-panel:has(.profile-role-editor) { width:280px; }
body.surface-app-desktop .floating-profile-panel:has(.profile-role-editor) { width:268px; }
body.surface-app-desktop .profile-panel-group-roles { margin:9px 10px 0; padding:9px; }
body.surface-app-desktop .profile-role-manage { max-height:132px; }
body.surface-web-mobile #floatingProfilePanel {
    max-height:min(78dvh,620px); overflow-y:auto; padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
body.surface-web-mobile .profile-panel-group-roles { margin:12px 16px 0; }
body.surface-web-mobile .profile-role-manage { max-height:190px; }
body.surface-app-mobile #floatingProfilePanel {
    max-height:88dvh; overflow-y:auto; border-radius:22px 22px 0 0;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
body.surface-app-mobile .profile-panel-group-roles { margin:14px 16px 0; padding:13px; }
body.surface-app-mobile .profile-role-manage label { min-height:46px; }
body.surface-app-mobile .profile-role-switch { width:42px; height:24px; flex-basis:42px; }
body.surface-app-mobile .profile-role-switch::after { width:18px; height:18px; }
body.surface-app-mobile .profile-role-switch:checked::after { transform:translateX(18px); }

.badge-crop-modal { width:min(680px,calc(100vw - 28px)); max-width:680px; padding:22px; overflow:hidden; }
.badge-crop-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.badge-crop-heading h3 { margin:2px 0 16px; }
.badge-crop-heading .icon-btn { width:36px; height:36px; padding:0; display:grid; place-items:center; }
.badge-crop-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:4px; margin-bottom:14px; border-radius:12px; background:var(--bg-tertiary); }
.badge-crop-tabs button { border:0; border-radius:9px; padding:9px; background:transparent; color:var(--text-muted); cursor:pointer; }
.badge-crop-tabs button.active { background:var(--accent-color); color:#fff; box-shadow:0 5px 14px color-mix(in srgb,var(--accent-color) 28%,transparent); }
.badge-crop-stage {
    position:relative; width:100%; margin:auto; overflow:hidden; border:1px solid var(--border-color);
    border-radius:14px; background:#111; cursor:grab; touch-action:none; user-select:none;
}
.badge-crop-stage.dragging { cursor:grabbing; }
.badge-crop-stage.crop-settings { aspect-ratio:4.36/1; }
.badge-crop-stage.crop-header { width:74%; aspect-ratio:4.75/1; }
.badge-crop-stage.crop-context { width:48%; aspect-ratio:2.78/1; }
.badge-crop-stage>img { width:100%; height:100%; object-fit:cover; pointer-events:none; will-change:transform,object-position; }
.badge-crop-grid { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 33.1%,rgba(255,255,255,.32) 33.3%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.32) 66.6%,transparent 66.8%),linear-gradient(transparent 33.1%,rgba(255,255,255,.32) 33.3%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.32) 66.6%,transparent 66.8%); }
.badge-crop-controls { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-top:15px; }
.badge-crop-controls label { display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:12px; font-weight:700; }
.badge-crop-controls input { width:100%; accent-color:var(--accent-color); }
.badge-crop-controls button { width:auto; padding:7px 12px; }
.badge-crop-help { margin:9px 0 0; color:var(--text-muted); font-size:11px; text-align:center; }
.badge-crop-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:17px; }
.badge-crop-footer button { width:auto; padding:9px 15px; }
body.surface-web-mobile .badge-crop-modal { position:absolute; left:0; right:0; bottom:0; width:100%; max-width:none; border-radius:20px 20px 0 0; }
body.surface-app-mobile .badge-crop-modal { position:fixed; inset:0; width:100%; max-width:none; border-radius:0; padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
body.surface-web-mobile .badge-crop-tabs button,
body.surface-app-mobile .badge-crop-tabs button { padding:10px 4px; font-size:11px; }
body.surface-web-mobile .badge-crop-stage.crop-context,
body.surface-app-mobile .badge-crop-stage.crop-context { width:68%; }
.channel-permissions-modal { width:min(620px,calc(100vw - 28px)); max-width:620px; }
.channel-permission-rows { max-height:430px; overflow:auto; margin:14px 0; }
.channel-permission-row { display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border-color); }
.channel-permission-row select { width:100%; }
@media (max-width: 760px) {
    .group-settings-shell { min-height:0; }
    .roles-settings-pane.active { grid-template-columns:1fr; }
    .roles-sidebar { border-right:0; border-bottom:1px solid var(--border-color); padding:0 0 12px; }
    .role-form-grid { grid-template-columns:1fr; }
}

/* 2026 settings and permissions system — shared semantics, surface-specific layouts */
.sidebar-col-right.btnBringMiddle { position:relative; overflow:hidden; }
.group-header { position:relative; isolation:isolate; width:100%; height:100%; padding:0 14px; }
.group-header-badge {
    position:absolute; inset:0; z-index:-2; width:100%; height:100%; max-width:none; max-height:none;
    margin:0; object-fit:cover; object-position:center; opacity:.9; image-rendering:auto;
}
.group-header.has-badge::before {
    display:none;
}
.group-header::after {
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(90deg,rgba(15,17,22,.52),rgba(15,17,22,.16),rgba(15,17,22,.58));
}
.group-header-name { position:relative; z-index:1; text-shadow:0 1px 8px rgba(0,0,0,.72); }
.group-header-dropdown { position:relative; z-index:1; }

.group-settings-shell { overflow:hidden; padding:0; display:flex; flex-direction:column; }
.group-settings-heading { flex:0 0 auto; padding:20px 24px 8px; margin:0; }
.group-settings-tabs {
    flex:0 0 auto; margin:0 24px; padding:3px 3px 9px; overflow-x:auto; overflow-y:visible;
    scrollbar-width:none;
}
.group-settings-tabs::-webkit-scrollbar { display:none; }
.group-settings-tab { position:relative; flex:0 0 auto; }
.group-settings-tab.active { box-shadow:none; }
.group-settings-tab.active::after {
    content:""; position:absolute; height:3px; left:12px; right:12px; bottom:-10px;
    border-radius:3px 3px 0 0; background:var(--accent-color);
}
.group-settings-pane { min-height:0; overflow:auto; padding:22px 28px 26px; }
.group-settings-pane.active { flex:1 1 auto; }
.roles-settings-pane.active { padding:18px 24px 24px; }

.group-identity-editor {
    position:relative; max-width:620px; margin:0 auto 28px; padding-bottom:112px;
    border:1px solid var(--border-color); border-radius:18px; overflow:visible;
    background:var(--bg-secondary); box-shadow:0 16px 35px rgba(0,0,0,.14);
}
.group-identity-banner {
    height:142px; overflow:hidden; border-radius:17px 17px 0 0;
    display:flex; align-items:center; justify-content:center; color:var(--text-muted);
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent-color) 34%,var(--bg-secondary)),var(--bg-tertiary));
}
.group-identity-banner img { width:100%; height:100%; object-fit:cover; }
.group-identity-avatar {
    position:absolute; left:50%; top:98px; transform:translateX(-50%); width:92px; height:92px;
    border-radius:50%; border:6px solid var(--bg-secondary); overflow:hidden;
    display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:750;
    color:#fff; background:linear-gradient(145deg,var(--accent-color),var(--accent-hover));
    box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.group-identity-avatar img { width:100%!important; height:100%!important; object-fit:cover; border-radius:50%; }
.group-identity-actions {
    position:absolute; left:50%; top:198px; transform:translateX(-50%);
    display:grid; grid-template-columns:1fr 1fr; gap:7px; width:min(500px,calc(100% - 28px));
    padding:9px; border:1px solid var(--border-color); border-radius:14px;
    background:color-mix(in srgb,var(--bg-primary) 88%,transparent); box-shadow:0 10px 26px rgba(0,0,0,.24);
    backdrop-filter:blur(12px);
}
.group-identity-actions button { width:100%; min-height:36px; padding:7px 11px; font-size:12px; }
.group-identity-actions #changeSettingsGroupAvatarBtn::before,
.group-identity-actions #changeSettingsGroupBadgeBtn::before {
    content:""; display:inline-block; width:16px; height:16px; margin-right:7px; vertical-align:-3px;
    background-size:contain; background-position:center; background-repeat:no-repeat;
}
.group-identity-actions #changeSettingsGroupAvatarBtn::before { background-image:url('/icons/Svg/Bold/Camera.svg'); }
.group-identity-actions #changeSettingsGroupBadgeBtn::before { background-image:url('/icons/Svg/Bold/Image.svg'); }
.identity-remove-btn {
    min-height:28px!important; border:0; background:transparent; color:var(--text-muted); cursor:pointer; border-radius:8px;
}
.identity-remove-btn:hover { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); }

.settings-member-item {
    min-height:58px; padding:9px 12px; border:1px solid transparent; border-bottom-color:var(--border-color);
    transition:background .15s,border-color .15s;
}
.settings-member-item:hover { background:var(--bg-secondary); border-color:var(--border-color); border-radius:10px; }
.settings-member-actions { flex-direction:row; align-items:center; gap:5px; }
.settings-member-actions-grid { display:flex; gap:5px; }
.settings-action-btn { width:auto!important; min-height:30px; padding:5px 9px!important; font-size:11px; }
.member-action-menu { position:relative; }
.member-action-menu summary {
    list-style:none; width:36px; height:34px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-color); border-radius:9px; color:var(--text-muted); cursor:pointer;
    font-weight:800; letter-spacing:1px;
}
.member-action-menu summary::-webkit-details-marker { display:none; }
.member-action-menu[open] summary { color:var(--accent-color); border-color:var(--accent-color); background:var(--bg-hover); }
.member-action-popover {
    position:absolute; z-index:15; top:calc(100% + 6px); right:0; min-width:220px; padding:7px;
    border:1px solid var(--border-color); border-radius:11px; background:var(--bg-primary);
    box-shadow:0 14px 38px rgba(0,0,0,.34);
}
.member-action-popover.is-floating {
    position:fixed; top:auto; right:auto; z-index:10050; min-width:190px; max-width:min(260px,calc(100vw - 24px));
}
.member-action-popover .settings-member-actions-grid { display:grid; grid-template-columns:1fr; gap:4px; }
.member-action-popover .settings-action-btn { width:100%!important; }
.member-action-popover .settings-action-btn {
    min-height:32px; justify-content:flex-start; border:0; border-radius:8px; background:transparent;
    color:var(--text-primary); text-align:left;
}
.member-action-popover .settings-action-btn:hover { background:var(--bg-hover); }
.member-action-popover .kick-member-btn,
.member-action-popover .ban-member-btn {
    color:var(--danger);
}
.member-action-popover .kick-member-btn:hover,
.member-action-popover .ban-member-btn:hover {
    background:color-mix(in srgb,var(--danger) 12%,transparent);
}

.roles-settings-pane.active {
    grid-template-columns:220px minmax(0,1fr);
    min-height:0;
    height:clamp(460px,calc(100dvh - 190px),690px);
    overflow:hidden;
}
.roles-sidebar {
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.settings-roles-list {
    min-height:0;
    overflow:auto;
    padding:2px 4px 2px 2px;
    scrollbar-width:thin;
}
.role-editor {
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.role-editor-tabs {
    flex:0 0 auto; position:sticky; top:0; z-index:2; padding:4px; border-radius:10px;
    background:var(--bg-secondary); width:max-content; max-width:100%;
}
.role-editor-tab { border-radius:8px; }
.role-editor-pane {
    min-height:0;
    overflow:hidden;
}
.role-editor-pane.active {
    flex:1 1 auto;
    overflow:auto;
    padding-right:6px;
    scrollbar-width:thin;
}
.permission-category {
    border:1px solid var(--border-color); border-radius:13px; overflow:hidden; background:var(--bg-secondary);
}
.permission-category h5 {
    margin:0; padding:9px 13px; background:var(--bg-tertiary); letter-spacing:.06em; font-size:11px;
}
.permission-row { padding:12px 14px; }
.ui-switch {
    appearance:none; -webkit-appearance:none; width:42px; height:24px; border:0; border-radius:999px;
    background:var(--border-color); position:relative; cursor:pointer; flex:0 0 auto;
    transition:background .18s,box-shadow .18s;
}
.ui-switch::after {
    content:""; position:absolute; width:18px; height:18px; top:3px; left:3px; border-radius:50%;
    background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.26); transition:transform .18s;
}
.ui-switch:checked { background:var(--accent-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-color) 18%,transparent); }
.ui-switch:checked::after { transform:translateX(18px); }
.ui-switch:disabled { opacity:.38; cursor:not-allowed; }
.role-member-row { min-height:52px; border:1px solid var(--border-color); border-radius:11px; padding:8px 12px; }
.role-member-identity { display:flex; align-items:center; gap:10px; min-width:0; }
.role-member-avatar {
    width:34px; height:34px; flex:0 0 34px; border-radius:50%; overflow:hidden; display:flex;
    align-items:center; justify-content:center; color:#fff; background:var(--accent-color); font-weight:700;
}
.role-member-avatar img { width:100%; height:100%; object-fit:cover; }

.channel-permissions-modal { position:relative; overflow:hidden; padding:0; display:flex; flex-direction:column; max-height:min(760px,90vh); }
.channel-permissions-modal .group-settings-heading { padding:20px 22px 14px; border-bottom:1px solid var(--border-color); }
.channel-permissions-modal #closeChannelPermissionsBtn {
    width:34px; height:34px; padding:0; display:grid; place-items:center; border:1px solid var(--border-color);
    border-radius:10px; background:var(--bg-secondary); color:var(--text-muted); font-size:13px;
}
.channel-permissions-modal #closeChannelPermissionsBtn:hover {
    color:var(--text-primary); border-color:color-mix(in srgb,var(--accent-color) 55%,var(--border-color));
    background:var(--bg-hover);
}
.channel-permission-intro { position:relative; padding:16px 22px 4px; }
.permission-kicker { display:block; color:var(--text-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:7px; }
.channel-permissions-modal button.permission-target-button {
    width:100%; height:48px; padding:0 14px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center;
    gap:9px; text-align:left; color:var(--text-primary); background:var(--bg-secondary);
    border:1px solid var(--border-color); border-radius:12px; cursor:pointer;
}
.channel-permissions-modal button.permission-target-button[aria-expanded="true"] { border-color:var(--accent-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-color) 18%,transparent); }
.permission-target-icon,.permission-target-option-icon {
    width:24px; height:24px; display:grid; place-items:center; flex:0 0 24px; border-radius:7px;
    color:var(--accent-color); background:color-mix(in srgb,var(--accent-color) 12%,transparent); font-weight:800;
}
#channelPermissionTargetLabel { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.permission-target-chevron { font-size:20px; color:var(--text-muted); }
.permission-target-menu {
    position:absolute; left:22px; right:22px; top:91px; z-index:20; padding:8px;
    border:1px solid var(--border-color); border-radius:13px; background:var(--bg-primary);
    box-shadow:0 18px 50px rgba(0,0,0,.38);
}
.permission-target-menu[hidden] { display:none; }
.permission-target-search {
    width:100%; height:38px; padding:0 11px; margin-bottom:7px; border:1px solid var(--border-color);
    border-radius:9px; background:var(--bg-secondary); color:var(--text-primary);
}
.permission-target-search:focus {
    outline:0; border-color:var(--accent-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-color) 16%,transparent);
}
.permission-target-options { max-height:230px; overflow:auto; scrollbar-width:thin; }
.permission-target-options::-webkit-scrollbar,
.settings-roles-list::-webkit-scrollbar,
.role-editor-pane.active::-webkit-scrollbar { width:8px; }
.permission-target-options::-webkit-scrollbar-thumb,
.settings-roles-list::-webkit-scrollbar-thumb,
.role-editor-pane.active::-webkit-scrollbar-thumb {
    border-radius:999px; background:color-mix(in srgb,var(--text-muted) 34%,transparent);
}
.permission-target-group>span { display:block; padding:7px 9px 4px; color:var(--text-muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.channel-permissions-modal .permission-target-group button {
    width:100%; min-height:42px; padding:7px 10px; display:flex; gap:9px; align-items:center; border:0; border-radius:8px;
    background:transparent; color:var(--text-primary); text-align:left; cursor:pointer;
    min-width:0;
}
.channel-permissions-modal .permission-target-group button:hover,
.channel-permissions-modal .permission-target-group button.is-selected { background:var(--bg-hover); }
.permission-target-option-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.permission-target-empty { padding:12px; color:var(--text-muted); text-align:center; }
.permission-target-native { position:absolute!important; width:1px!important; height:1px!important; opacity:0; pointer-events:none; }
.channel-permission-rows { flex:1 1 auto; max-height:none; padding:8px 22px 18px; margin:0; }
.channel-permission-row { grid-template-columns:minmax(0,1fr) auto; min-height:66px; padding:10px 0; }
.channel-permission-row:hover { background:color-mix(in srgb,var(--bg-hover) 54%,transparent); }
.permission-choice {
    display:grid; grid-template-columns:repeat(3,minmax(74px,1fr)); gap:4px; width:min(100%,270px); min-width:238px;
    padding:4px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-tertiary);
}
.channel-permissions-modal .permission-choice button {
    min-width:0; width:100%; height:36px; padding:0 8px; border:0; border-radius:8px; background:transparent;
    color:var(--text-muted); cursor:pointer; font-size:10px; font-weight:750;
    display:flex; align-items:center; justify-content:center; gap:5px;
    white-space:nowrap;
}
.channel-permissions-modal .permission-choice button:hover:not(:disabled) { background:var(--bg-hover); color:var(--text-primary); }
.channel-permissions-modal .permission-choice button:focus-visible { outline:2px solid var(--accent-color); outline-offset:1px; }
.channel-permissions-modal .permission-choice button:disabled { opacity:.42; cursor:not-allowed; }
.permission-choice-icon {
    width:17px; height:17px; display:grid; place-items:center; flex:0 0 17px;
    color:currentColor; font-size:15px; line-height:1;
}
.channel-permissions-modal .permission-choice button[data-choice="deny"].active { background:color-mix(in srgb,var(--danger) 20%,var(--bg-secondary)); color:var(--danger); }
.channel-permissions-modal .permission-choice button[data-choice="neutral"].active { background:var(--bg-hover); color:var(--text-primary); }
.channel-permissions-modal .permission-choice button[data-choice="allow"].active { background:color-mix(in srgb,var(--success) 20%,var(--bg-secondary)); color:var(--success); }
.channel-permission-footer {
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:13px 22px; border-top:1px solid var(--border-color); background:var(--bg-secondary);
    color:var(--text-muted); font-size:11px;
}
.channel-permission-footer button { width:auto; padding:9px 15px; }

/* Copy follows the rendered side, not message ownership. */
#messagesContainer.chat-pos-reversed .message-row.own-row .copy-message-btn,
#messagesContainer.chat-pos-all-right .message-row .copy-message-btn {
    left:auto; right:calc(100% + 8px);
}
#messagesContainer.chat-pos-reversed .message-row.other-row .copy-message-btn,
#messagesContainer.chat-pos-all-left .message-row .copy-message-btn {
    right:auto; left:calc(100% + 8px);
}

/* Desktop app: deliberately denser for a persistent native window. */
body.surface-app-desktop .group-settings-shell { width:min(860px,calc(100vw - 20px)); min-height:560px; }
body.surface-app-desktop .group-settings-heading { padding:15px 20px 6px; }
body.surface-app-desktop .group-settings-pane { padding:16px 22px 20px; }
body.surface-app-desktop .group-identity-banner { height:118px; }
body.surface-app-desktop .group-identity-avatar { top:78px; width:82px; height:82px; }
body.surface-app-desktop .group-identity-actions { top:172px; }
body.surface-app-desktop .group-identity-editor { padding-bottom:106px; }
body.surface-app-desktop .permission-choice { grid-template-columns:repeat(3,minmax(64px,1fr)); min-width:210px; width:min(100%,240px); }
body.surface-app-desktop .permission-choice button { width:100%; }
body.surface-app-desktop .settings-member-item { min-height:52px; }

/* Web mobile: bottom-sheet settings with browser navigation still visible. */
body.surface-web-mobile .group-settings-shell,
body.surface-web-mobile .channel-permissions-modal {
    position:absolute; left:0; right:0; bottom:0; width:100%; max-width:none; max-height:92dvh;
    min-height:72dvh; border-radius:20px 20px 0 0;
}
body.surface-web-mobile .group-settings-tabs { margin:0 14px; }
body.surface-web-mobile .group-settings-pane { padding:16px; }
body.surface-web-mobile .roles-settings-pane.active { display:block; }

/* Mobile app: native-feeling full-screen settings, safe-area aware. */
body.surface-app-mobile .group-settings-shell,
body.surface-app-mobile .channel-permissions-modal {
    position:fixed; inset:0; width:100%; max-width:none; max-height:none; min-height:100dvh; border-radius:0;
    padding-top:env(safe-area-inset-top);
}
body.surface-app-mobile .group-settings-heading { padding:14px 16px 8px; }
body.surface-app-mobile .group-settings-tabs { margin:0 12px; }
body.surface-app-mobile .group-settings-pane { padding:15px 16px calc(20px + env(safe-area-inset-bottom)); }
body.surface-app-mobile .roles-settings-pane.active { display:block; }
body.surface-app-mobile .channel-permission-footer { padding-bottom:calc(13px + env(safe-area-inset-bottom)); }

body.surface-web-mobile .roles-sidebar,
body.surface-app-mobile .roles-sidebar {
    border:0; border-bottom:1px solid var(--border-color); padding:0 0 12px; margin-bottom:14px;
}
body.surface-web-mobile .roles-settings-pane.active,
body.surface-app-mobile .roles-settings-pane.active {
    height:auto;
    min-height:0;
    overflow:auto;
}
body.surface-web-mobile .role-editor,
body.surface-app-mobile .role-editor {
    overflow:visible;
}
body.surface-web-mobile .role-editor-pane.active,
body.surface-app-mobile .role-editor-pane.active {
    overflow:visible;
    padding-right:0;
}
body.surface-web-mobile .settings-roles-list,
body.surface-app-mobile .settings-roles-list { flex-direction:row; overflow-x:auto; padding:2px; }
body.surface-web-mobile .settings-role-row,
body.surface-app-mobile .settings-role-row { flex:0 0 auto; min-width:128px; }
body.surface-web-mobile .group-identity-banner,
body.surface-app-mobile .group-identity-banner { height:112px; }
body.surface-web-mobile .group-identity-avatar,
body.surface-app-mobile .group-identity-avatar { top:75px; width:76px; height:76px; border-width:5px; }
body.surface-web-mobile .group-identity-actions,
body.surface-app-mobile .group-identity-actions { top:166px; display:grid; grid-template-columns:1fr 1fr; width:calc(100% - 20px); padding:8px; }
body.surface-web-mobile .group-identity-editor,
body.surface-app-mobile .group-identity-editor { padding-bottom:112px; }
body.surface-web-mobile .settings-member-actions-grid,
body.surface-app-mobile .settings-member-actions-grid { max-width:138px; overflow-x:auto; }
body.surface-web-mobile .channel-permission-intro,
body.surface-app-mobile .channel-permission-intro { padding-left:16px; padding-right:16px; }
body.surface-web-mobile .permission-target-menu,
body.surface-app-mobile .permission-target-menu { left:16px; right:16px; }
body.surface-web-mobile .channel-permission-rows,
body.surface-app-mobile .channel-permission-rows { padding-left:16px; padding-right:16px; }
body.surface-web-mobile .channel-permission-row,
body.surface-app-mobile .channel-permission-row { grid-template-columns:minmax(0,1fr); gap:8px; align-items:start; }
body.surface-web-mobile .permission-choice,
body.surface-app-mobile .permission-choice { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; min-width:0; }
body.surface-web-mobile .permission-choice button,
body.surface-app-mobile .permission-choice button { width:100%; height:38px; padding:0 4px; font-size:9px; gap:3px; }
body.surface-web-mobile .permission-choice-icon,
body.surface-app-mobile .permission-choice-icon { font-size:15px; }


/* === InTeraNet attachment upload bar v2 === */
#attachmentPreviewBox {
    box-sizing: border-box;
    margin: 10px 20px 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
}

/* Header row: Pending attachments + Clear all */
#attachmentPreviewBox .attachment-preview-header,
#attachmentPreviewBox > div:first-child:not(#attachmentList) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    min-height: 30px !important;
}

#attachmentPreviewBox .attachment-preview-header span,
#attachmentPreviewBox > div:first-child:not(#attachmentList) span {
    color: var(--text-primary, #f4f4f5) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Fix huge green full-width Clear all button */
#clearAllAttachmentsBtn,
#clearAllAttachmentsBtn.attachment-clear-btn {
    width: auto !important;
    min-width: 78px !important;
    max-width: max-content !important;
    height: 30px !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(248,113,113,.36) !important;
    background: rgba(239,68,68,.16) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform .14s ease, background .14s ease, border-color .14s ease !important;
}

#clearAllAttachmentsBtn:hover {
    transform: translateY(-1px) !important;
    background: rgba(239,68,68,.28) !important;
    border-color: rgba(248,113,113,.58) !important;
}

/* Attachment grid */
#attachmentList {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 10px !important;
    max-height: 222px !important;
    overflow: auto !important;
    padding: 2px 4px 2px 0 !important;
}

/* Scrollbar */
#attachmentList::-webkit-scrollbar {
    width: 8px !important;
}

#attachmentList::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.16) !important;
    border-radius: 999px !important;
}

#attachmentList::-webkit-scrollbar-track {
    background: transparent !important;
}

/* Attachment card */
#attachmentPreviewBox .attachment-card {
    position: relative !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 9px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    background: rgba(0,0,0,.20) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

#attachmentPreviewBox .attachment-card.upload-uploaded {
    border-color: rgba(52,211,153,.26) !important;
}

#attachmentPreviewBox .attachment-card.upload-failed,
#attachmentPreviewBox .attachment-card.upload-cancelled {
    border-color: rgba(248,113,113,.40) !important;
}

/* Thumbnail */
#attachmentPreviewBox .attachment-thumb {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.06) !important;
    color: var(--text-muted, #a1a1aa) !important;
    cursor: pointer !important;
}

#attachmentPreviewBox .attachment-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#attachmentPreviewBox .attachment-thumb svg {
    width: 26px !important;
    height: 26px !important;
}

/* Metadata */
#attachmentPreviewBox .attachment-meta {
    min-width: 0 !important;
    padding: 0 22px 0 0 !important;
}

#attachmentPreviewBox .attachment-name {
    color: var(--text-primary, #f4f4f5) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#attachmentPreviewBox .attachment-sub {
    margin-top: 4px !important;
    color: var(--text-muted, #a1a1aa) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#attachmentPreviewBox .attachment-error {
    margin-top: 4px !important;
    color: #fca5a5 !important;
    font-size: 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Remove button */
#attachmentPreviewBox .remove-attachment-btn {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    z-index: 5 !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.58) !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

#attachmentPreviewBox .remove-attachment-btn:hover {
    background: rgba(239,68,68,.92) !important;
}

/* Progress */
#attachmentPreviewBox .attachment-progress-line {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    background: rgba(255,255,255,.07) !important;
    overflow: hidden !important;
}

#attachmentPreviewBox .attachment-progress-line span {
    display: block !important;
    height: 100% !important;
    width: 0%;
    border-radius: 999px !important;
    background: var(--accent-color, #51ceb5) !important;
    transition: width .18s ease !important;
}

#attachmentPreviewBox .upload-uploaded .attachment-progress-line span {
    background: #34d399 !important;
}

#attachmentPreviewBox .upload-failed .attachment-progress-line span,
#attachmentPreviewBox .upload-cancelled .attachment-progress-line span {
    background: #f87171 !important;
}

/* Upload overlay */
#attachmentPreviewBox .upload-progress-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 3px !important;
    background: rgba(0,0,0,.58) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    z-index: 3 !important;
}

#attachmentPreviewBox .upload-progress-overlay.hidden,
#attachmentPreviewBox .upload-progress-overlay[hidden] {
    display: none !important;
}

#attachmentPreviewBox .upload-spinner {
    width: 16px !important;
    height: 16px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255,255,255,.28) !important;
    border-top-color: white !important;
    animation: interanetAttachmentSpin .8s linear infinite !important;
}

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

/* Retry */
#attachmentPreviewBox .retry-attachment-btn {
    width: auto !important;
    margin-top: 6px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(81,206,181,.36) !important;
    background: rgba(81,206,181,.18) !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

#attachmentPreviewBox .retry-attachment-btn:hover {
    background: rgba(81,206,181,.28) !important;
}

/* Mobile */
@media (max-width: 720px) {
    #attachmentPreviewBox {
        margin: 8px 10px 10px !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    #attachmentList {
        grid-template-columns: 1fr !important;
        max-height: 190px !important;
    }

    #attachmentPreviewBox .attachment-card {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        min-height: 70px !important;
    }

    #attachmentPreviewBox .attachment-thumb {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }
}
/* === End InTeraNet attachment upload bar v2 === */

/* === InTeraNet chat media bubble compact v1 === */
/* Makes uploaded image/video messages compact like Discord:
   no huge blue empty bubble, media card owns the shape. */

:root {
    --int-chat-media-max: min(420px, 72vw);
    --int-chat-media-large: min(460px, 74vw);
    --int-chat-media-gap: 4px;
}

/* The message bubble should shrink to the media grid, not stretch wide. */
.message-body.has-media-grid {
    width: fit-content !important;
    max-width: min(460px, 78vw) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.message.own .message-body.has-media-grid,
.message:not(.own) .message-body.has-media-grid {
    background: transparent !important;
}

/* Wrapper/card sizing */
.media-grid-wrapper {
    width: fit-content !important;
    max-width: var(--int-chat-media-large) !important;
    margin-top: 2px !important;
}

.media-grid-wrapper .media-grid {
    width: var(--int-chat-media-max) !important;
    max-width: var(--int-chat-media-max) !important;
    gap: var(--int-chat-media-gap) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.18) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
}

/* Single image/video: natural size, capped. */
.media-grid-wrapper .media-grid[data-count="1"] {
    display: block !important;
    width: fit-content !important;
    max-width: var(--int-chat-media-max) !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.media-grid-wrapper .media-grid[data-count="1"] .media-grid-item {
    width: fit-content !important;
    max-width: var(--int-chat-media-max) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.18) !important;
}

.media-grid-wrapper .media-grid[data-count="1"] .media-grid-item img,
.media-grid-wrapper .media-grid[data-count="1"] .media-grid-item video {
    width: auto !important;
    height: auto !important;
    max-width: var(--int-chat-media-max) !important;
    max-height: 430px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 16px !important;
}

/* Multi media: compact tiles, no oversized bubble. */
.media-grid-wrapper .media-grid:not([data-count="1"]) {
    display: grid !important;
    width: var(--int-chat-media-max) !important;
    max-width: var(--int-chat-media-max) !important;
}

.media-grid-wrapper .media-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: min(210px, 34vw) !important;
}

.media-grid-wrapper .media-grid[data-count="3"],
.media-grid-wrapper .media-grid[data-count="4"] {
    width: var(--int-chat-media-max) !important;
    max-width: var(--int-chat-media-max) !important;
    grid-auto-rows: min(150px, 24vw) !important;
}

.media-grid-wrapper .media-grid[data-count="5"],
.media-grid-wrapper .media-grid[data-count="6"] {
    width: var(--int-chat-media-large) !important;
    max-width: var(--int-chat-media-large) !important;
    grid-auto-rows: min(132px, 20vw) !important;
}

.media-grid-wrapper .media-grid-item {
    border-radius: 0 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.20) !important;
    min-height: 0 !important;
}

.media-grid-wrapper .media-grid:not([data-count="1"]) .media-grid-item {
    aspect-ratio: 1 / 1 !important;
}

.media-grid-wrapper .media-grid-item img,
.media-grid-wrapper .media-grid-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Remove nested media padding/background inside grid cells. */
.media-grid-wrapper .chat-media-container {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Caption gets its own neat bubble under the media. */
.message-body.has-media-grid .media-caption,
.message-body.has-media-grid .message-text-caption {
    margin-top: 6px !important;
    max-width: var(--int-chat-media-max) !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
    background: rgba(0,0,0,.20) !important;
    color: var(--text-primary, #f4f4f5) !important;
}

/* Single-media wrapper path, used by some render branches. */
.single-media-wrapper {
    width: fit-content !important;
    max-width: var(--int-chat-media-max) !important;
}

.single-media-wrapper .chat-media-container {
    width: fit-content !important;
    max-width: var(--int-chat-media-max) !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

.single-media-wrapper .chat-media-container img,
.single-media-wrapper .chat-media-container video {
    width: auto !important;
    height: auto !important;
    max-width: var(--int-chat-media-max) !important;
    max-height: 430px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 16px !important;
}

@media (max-width: 720px) {
    :root {
        --int-chat-media-max: min(360px, 84vw);
        --int-chat-media-large: min(360px, 84vw);
    }

    .message-body.has-media-grid {
        max-width: 86vw !important;
    }

    .media-grid-wrapper .media-grid[data-count="2"],
    .media-grid-wrapper .media-grid[data-count="3"],
    .media-grid-wrapper .media-grid[data-count="4"],
    .media-grid-wrapper .media-grid[data-count="5"],
    .media-grid-wrapper .media-grid[data-count="6"] {
        width: var(--int-chat-media-max) !important;
        max-width: var(--int-chat-media-max) !important;
        grid-auto-rows: min(150px, 39vw) !important;
    }

    .media-grid-wrapper .media-grid[data-count="1"] .media-grid-item img,
    .media-grid-wrapper .media-grid[data-count="1"] .media-grid-item video,
    .single-media-wrapper .chat-media-container img,
    .single-media-wrapper .chat-media-container video {
        max-height: 360px !important;
    }
}
/* === End InTeraNet chat media bubble compact v1 === */


/* === InTeraNet message bubble v4 clean === */
/*
Rules:
1) There are two bubble types:
   - text-only: .message[data-bubble-layout="text"] .message-body
   - attachment + optional text: .message.message-has-attachments, with caption .message-text-caption
2) Settings > Chat > Message position decides side:
   - left side => sharp/tail corner is bottom-left
   - right side => sharp/tail corner is bottom-right
3) Text direction only affects writing direction inside the bubble. It does not decide side.
4) Theme variables only. No hardcoded blue/dark theme.
*/

:root {
    --int-bubble-radius: 18px;
    --int-bubble-tail: 6px;
    --int-card-radius: 16px;
    --int-card-tail: 8px;
    --int-attach-max: min(520px, 78vw);
    --int-attach-card: min(400px, 74vw);
    --int-attach-card-wide: min(460px, 78vw);
    --int-attach-gap: 6px;
    --int-soft-shadow: 0 8px 22px rgba(0,0,0,.13);
}

/* ---------- Message-position source of truth ---------- */

/* Default: own right, others left. */
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
}

#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row {
    align-self: flex-start !important;
    flex-direction: row !important;
}

/* Reversed: same visual left/right groups as current app naming expects. */
#messagesContainer.chat-pos-reversed .message-row.own-row {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
}

#messagesContainer.chat-pos-reversed .message-row.other-row {
    align-self: flex-start !important;
    flex-direction: row !important;
}

/* All left / all right. */
#messagesContainer.chat-pos-all-left .message-row.own-row,
#messagesContainer.chat-pos-all-left .message-row.other-row {
    align-self: flex-start !important;
    flex-direction: row !important;
}

#messagesContainer.chat-pos-all-right .message-row.own-row,
#messagesContainer.chat-pos-all-right .message-row.other-row {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
}

/* ---------- Shared layout ---------- */

.message[data-bubble-layout="text"],
.message.message-has-attachments {
    display: flex !important;
    flex-direction: column !important;
    width: fit-content !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.message[data-bubble-layout="text"] {
    max-width: min(700px, 78vw) !important;
}

.message.message-has-attachments {
    max-width: var(--int-attach-max) !important;
}

.message.own[data-bubble-layout="text"],
.message.own.message-has-attachments {
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

/* Text-only bubble lives on .message-body. */
.message[data-bubble-layout="text"] .message-body {
    box-sizing: border-box !important;
    width: fit-content !important;
    max-width: min(700px, 78vw) !important;
    min-width: min-content !important;
    padding: 10px 14px !important;
    border-radius: var(--int-bubble-radius) !important;
    background: var(--message-bg) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    overflow: visible !important;
}

.message.own[data-bubble-layout="text"] .message-body {
    background: linear-gradient(135deg, var(--message-own-bg), color-mix(in srgb, var(--message-own-bg) 80%, #000)) !important;
    color: var(--message-own-text) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--message-own-bg) 30%, transparent) !important;
}

/* Attachment wrapper is transparent; cards/caption own the shape. */
.message.message-has-attachments .message-body {
    width: fit-content !important;
    max-width: var(--int-attach-max) !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.message.message-has-attachments .message-content {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--int-attach-gap) !important;
    width: fit-content !important;
    max-width: var(--int-attach-max) !important;
    min-width: 0 !important;
    white-space: normal !important;
}

/* Attachment caption/text bubble. */
.message.message-has-attachments .message-text-caption {
    box-sizing: border-box !important;
    width: fit-content !important;
    max-width: var(--int-attach-card-wide) !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 15px !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
}

.message.own.message-has-attachments .message-text-caption {
    color: var(--message-own-text) !important;
    background: linear-gradient(135deg, var(--message-own-bg), color-mix(in srgb, var(--message-own-bg) 82%, #000)) !important;
}

.message:not(.own).message-has-attachments .message-text-caption {
    color: var(--text-primary) !important;
    background: var(--message-bg) !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent) !important;
}

/* Media/file/audio cards. */
.message.message-has-attachments .media-grid-wrapper,
.message.message-has-attachments .single-media-wrapper {
    width: fit-content !important;
    max-width: var(--int-attach-card-wide) !important;
    margin: 0 !important;
}

.message.message-has-attachments .media-grid-wrapper .media-grid,
.message.message-has-attachments .message-content > .chat-media-container,
.message.message-has-attachments .single-media-wrapper .chat-media-container {
    border-radius: var(--int-card-radius) !important;
    background: color-mix(in srgb, var(--bg-secondary) 82%, var(--message-bg)) !important;
    box-shadow: var(--int-soft-shadow) !important;
    overflow: hidden !important;
}

.message.message-has-attachments .audio-message-card,
.message.message-has-attachments .file-card {
    box-sizing: border-box !important;
    width: var(--int-attach-card) !important;
    max-width: var(--int-attach-card) !important;
    min-width: min(260px, 70vw) !important;
    border-radius: var(--int-card-radius) !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent) !important;
    background: color-mix(in srgb, var(--message-bg) 72%, var(--bg-sidebar)) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--int-soft-shadow) !important;
}

.message.own.message-has-attachments .audio-message-card,
.message.own.message-has-attachments .file-card {
    background: color-mix(in srgb, var(--message-own-bg) 18%, var(--bg-sidebar)) !important;
    border-color: color-mix(in srgb, var(--message-own-bg) 32%, var(--border-color)) !important;
}

.message.message-has-attachments .audio-message-card.is-playing-audio {
    border-color: color-mix(in srgb, var(--accent-color) 60%, var(--border-color)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 30%, transparent),
                var(--int-soft-shadow) !important;
}

.message.message-has-attachments .file-stack-wrapper {
    box-sizing: border-box !important;
    width: var(--int-attach-card) !important;
    max-width: var(--int-attach-card) !important;
    margin: 0 !important;
    gap: var(--int-attach-gap) !important;
}

.message.message-mixed-attachments .file-stack-wrapper {
    width: min(420px, 74vw) !important;
    max-width: min(420px, 74vw) !important;
}

.message.message-has-attachments .file-stack-item {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.message.message-has-attachments .file-stack-item .audio-message-card,
.message.message-has-attachments .file-stack-item .file-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------- LEFT side rules ---------- */

#messagesContainer.chat-pos-all-left .message-row .message,
#messagesContainer.chat-pos-all-left .message-row .message .message-content,
#messagesContainer.chat-pos-reversed .message-row.other-row .message,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .message-content,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .message-content {
    align-items: flex-start !important;
}

#messagesContainer.chat-pos-all-left .message-row .message .message-body,
#messagesContainer.chat-pos-all-left .message-row .message .message-text-caption,
#messagesContainer.chat-pos-all-left .message-row .message .message-time,
#messagesContainer.chat-pos-all-left .message-row .message .reactions,
#messagesContainer.chat-pos-all-left .message-row .message .media-grid-wrapper,
#messagesContainer.chat-pos-all-left .message-row .message .single-media-wrapper,
#messagesContainer.chat-pos-all-left .message-row .message .file-stack-wrapper,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .message-body,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .message-text-caption,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .message-time,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .reactions,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .media-grid-wrapper,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .single-media-wrapper,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .file-stack-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .message-body,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .message-text-caption,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .message-time,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .reactions,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .media-grid-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .single-media-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .file-stack-wrapper {
    align-self: flex-start !important;
    text-align: left !important;
}

/* Left side sharp corner. */
#messagesContainer.chat-pos-all-left .message-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-pos-all-left .message-row .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-pos-reversed .message-row.other-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-pos-reversed .message-row.other-row .message.message-has-attachments .message-text-caption,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .message-text-caption {
    border-bottom-left-radius: var(--int-bubble-tail) !important;
    border-bottom-right-radius: var(--int-bubble-radius) !important;
}

/* Left side attachment-card hint. */
#messagesContainer.chat-pos-all-left .message-row .message.message-has-attachments .audio-message-card,
#messagesContainer.chat-pos-all-left .message-row .message.message-has-attachments .file-card,
#messagesContainer.chat-pos-all-left .message-row .message.message-has-attachments .media-grid-wrapper .media-grid,
#messagesContainer.chat-pos-reversed .message-row.other-row .message.message-has-attachments .audio-message-card,
#messagesContainer.chat-pos-reversed .message-row.other-row .message.message-has-attachments .file-card,
#messagesContainer.chat-pos-reversed .message-row.other-row .message.message-has-attachments .media-grid-wrapper .media-grid,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .audio-message-card,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .file-card,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .media-grid-wrapper .media-grid {
    border-bottom-left-radius: var(--int-card-tail) !important;
    border-bottom-right-radius: var(--int-card-radius) !important;
}

/* ---------- RIGHT side rules ---------- */

#messagesContainer.chat-pos-all-right .message-row .message,
#messagesContainer.chat-pos-all-right .message-row .message .message-content,
#messagesContainer.chat-pos-reversed .message-row.own-row .message,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .message-content,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .message-content {
    align-items: flex-end !important;
}

#messagesContainer.chat-pos-all-right .message-row .message .message-body,
#messagesContainer.chat-pos-all-right .message-row .message .message-text-caption,
#messagesContainer.chat-pos-all-right .message-row .message .message-time,
#messagesContainer.chat-pos-all-right .message-row .message .reactions,
#messagesContainer.chat-pos-all-right .message-row .message .media-grid-wrapper,
#messagesContainer.chat-pos-all-right .message-row .message .single-media-wrapper,
#messagesContainer.chat-pos-all-right .message-row .message .file-stack-wrapper,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .message-body,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .message-text-caption,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .message-time,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .reactions,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .media-grid-wrapper,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .single-media-wrapper,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .file-stack-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .message-body,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .message-text-caption,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .message-time,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .reactions,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .media-grid-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .single-media-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .file-stack-wrapper {
    align-self: flex-end !important;
    text-align: right !important;
}

/* Right side sharp corner. */
#messagesContainer.chat-pos-all-right .message-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-pos-all-right .message-row .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-pos-reversed .message-row.own-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-pos-reversed .message-row.own-row .message.message-has-attachments .message-text-caption,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .message-text-caption {
    border-bottom-right-radius: var(--int-bubble-tail) !important;
    border-bottom-left-radius: var(--int-bubble-radius) !important;
}

/* Right side attachment-card hint. */
#messagesContainer.chat-pos-all-right .message-row .message.message-has-attachments .audio-message-card,
#messagesContainer.chat-pos-all-right .message-row .message.message-has-attachments .file-card,
#messagesContainer.chat-pos-all-right .message-row .message.message-has-attachments .media-grid-wrapper .media-grid,
#messagesContainer.chat-pos-reversed .message-row.own-row .message.message-has-attachments .audio-message-card,
#messagesContainer.chat-pos-reversed .message-row.own-row .message.message-has-attachments .file-card,
#messagesContainer.chat-pos-reversed .message-row.own-row .message.message-has-attachments .media-grid-wrapper .media-grid,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .audio-message-card,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .file-card,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .media-grid-wrapper .media-grid {
    border-bottom-right-radius: var(--int-card-tail) !important;
    border-bottom-left-radius: var(--int-card-radius) !important;
}

/* ---------- Text direction: writing flow only ---------- */

.message[data-text-dir="ltr"] .message-content,
.message[data-text-dir="ltr"] .message-text-caption {
    direction: ltr !important;
    unicode-bidi: plaintext !important;
}

.message[data-text-dir="rtl"] .message-content,
.message[data-text-dir="rtl"] .message-text-caption {
    direction: rtl !important;
    unicode-bidi: plaintext !important;
}

/* ---------- Date + reactions outside bubble ---------- */

.message .message-sender { order: 0; }
.message .message-body { order: 1; }
.message .read-more-btn { order: 2; }

.message .reactions {
    order: 3 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: fit-content !important;
    max-width: var(--int-attach-card-wide) !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    z-index: 2 !important;
}

.message .message-time {
    order: 4 !important;
    display: block !important;
    width: fit-content !important;
    max-width: var(--int-attach-card-wide) !important;
    margin-top: 1px !important;
    margin-bottom: 0 !important;
    color: var(--text-muted) !important;
    opacity: .86 !important;
    font-size: 12px !important;
}

.message .reactions:empty {
    display: none !important;
}

.reaction-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 22px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    background: color-mix(in srgb, var(--bg-sidebar) 86%, var(--message-bg)) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
    line-height: 1 !important;
}

/* ---------- Bubble style settings ---------- */

/* Square: smaller radius, same side-tail logic. */
#messagesContainer.chat-bubble-square .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-bubble-square .message.message-has-attachments .audio-message-card,
#messagesContainer.chat-bubble-square .message.message-has-attachments .file-card,
#messagesContainer.chat-bubble-square .message.message-has-attachments .media-grid-wrapper .media-grid,
#messagesContainer.chat-bubble-square .message.message-has-attachments .message-content > .chat-media-container,
#messagesContainer.chat-bubble-square .message.message-has-attachments .single-media-wrapper .chat-media-container {
    border-radius: 7px !important;
}

#messagesContainer.chat-bubble-square.chat-pos-all-left .message-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square.chat-pos-all-left .message-row .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-bubble-square.chat-pos-reversed .message-row.other-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square.chat-pos-reversed .message-row.other-row .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-bubble-square:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .message-text-caption {
    border-bottom-left-radius: 3px !important;
    border-bottom-right-radius: 7px !important;
}

#messagesContainer.chat-bubble-square.chat-pos-all-right .message-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square.chat-pos-all-right .message-row .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-bubble-square.chat-pos-reversed .message-row.own-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square.chat-pos-reversed .message-row.own-row .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-bubble-square:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .message-text-caption {
    border-bottom-right-radius: 3px !important;
    border-bottom-left-radius: 7px !important;
}

/* Old "minimal" becomes Soft Glow. Keep class/value for compatibility. */
#messagesContainer.chat-bubble-minimal .message {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#messagesContainer.chat-bubble-minimal .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-minimal .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-bubble-minimal .message.message-has-attachments .audio-message-card,
#messagesContainer.chat-bubble-minimal .message.message-has-attachments .file-card {
    border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--message-bg) 90%, var(--bg-sidebar)),
        color-mix(in srgb, var(--message-bg) 76%, var(--bg-secondary))
    ) !important;
    color: var(--text-primary) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 8%, transparent),
        0 8px 22px rgba(0,0,0,.13) !important;
    backdrop-filter: blur(8px);
}

#messagesContainer.chat-bubble-minimal .message.own[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-minimal .message.own.message-has-attachments .message-text-caption,
#messagesContainer.chat-bubble-minimal .message.own.message-has-attachments .audio-message-card,
#messagesContainer.chat-bubble-minimal .message.own.message-has-attachments .file-card {
    color: var(--message-own-text) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--message-own-bg) 76%, var(--bg-sidebar)),
        color-mix(in srgb, var(--message-own-bg) 48%, var(--bg-secondary))
    ) !important;
    border-color: color-mix(in srgb, var(--message-own-bg) 42%, var(--border-color)) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--message-own-bg) 18%, transparent),
        0 9px 24px color-mix(in srgb, var(--message-own-bg) 18%, transparent) !important;
}

#messagesContainer.chat-bubble-minimal .message.message-has-attachments .media-grid-wrapper .media-grid,
#messagesContainer.chat-bubble-minimal .message.message-has-attachments .message-content > .chat-media-container,
#messagesContainer.chat-bubble-minimal .message.message-has-attachments .single-media-wrapper .chat-media-container {
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 6%, transparent),
        0 8px 22px rgba(0,0,0,.12) !important;
}

@media (max-width: 720px) {
    .message[data-bubble-layout="text"],
    .message[data-bubble-layout="text"] .message-body,
    .message.message-has-attachments {
        max-width: 86vw !important;
    }
}
/* === End InTeraNet message bubble v4 clean === */

/* === InTeraNet default/reverse position mapping v4.2 === */
/* Correct mapping:
   Default:  mine left, others right
   Reversed: mine right, others left
   All-left and all-right are intentionally untouched. */

/* ---------- DEFAULT: mine LEFT, others RIGHT ---------- */

#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row {
    align-self: flex-start !important;
    flex-direction: row !important;
}

#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
}

/* Default mine LEFT */
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .message-content {
    align-items: flex-start !important;
}

#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .message-body,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .message-text-caption,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .message-time,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .reactions,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .media-grid-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .single-media-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message .file-stack-wrapper {
    align-self: flex-start !important;
    text-align: left !important;
}

/* Default mine LEFT sharp corner */
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .message-text-caption {
    border-bottom-left-radius: var(--int-bubble-tail, 6px) !important;
    border-bottom-right-radius: var(--int-bubble-radius, 18px) !important;
}

#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .audio-message-card,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .file-card,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .media-grid-wrapper .media-grid {
    border-bottom-left-radius: var(--int-card-tail, 8px) !important;
    border-bottom-right-radius: var(--int-card-radius, 16px) !important;
}

/* Default others RIGHT */
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .message-content {
    align-items: flex-end !important;
}

#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .message-body,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .message-text-caption,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .message-time,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .reactions,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .media-grid-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .single-media-wrapper,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message .file-stack-wrapper {
    align-self: flex-end !important;
    text-align: right !important;
}

/* Default others RIGHT sharp corner */
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .message-text-caption {
    border-bottom-right-radius: var(--int-bubble-tail, 6px) !important;
    border-bottom-left-radius: var(--int-bubble-radius, 18px) !important;
}

#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .audio-message-card,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .file-card,
#messagesContainer:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .media-grid-wrapper .media-grid {
    border-bottom-right-radius: var(--int-card-tail, 8px) !important;
    border-bottom-left-radius: var(--int-card-radius, 16px) !important;
}

/* ---------- REVERSED: mine RIGHT, others LEFT ---------- */

#messagesContainer.chat-pos-reversed .message-row.own-row {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
}

#messagesContainer.chat-pos-reversed .message-row.other-row {
    align-self: flex-start !important;
    flex-direction: row !important;
}

/* Reversed mine RIGHT */
#messagesContainer.chat-pos-reversed .message-row.own-row .message,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .message-content {
    align-items: flex-end !important;
}

#messagesContainer.chat-pos-reversed .message-row.own-row .message .message-body,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .message-text-caption,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .message-time,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .reactions,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .media-grid-wrapper,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .single-media-wrapper,
#messagesContainer.chat-pos-reversed .message-row.own-row .message .file-stack-wrapper {
    align-self: flex-end !important;
    text-align: right !important;
}

#messagesContainer.chat-pos-reversed .message-row.own-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-pos-reversed .message-row.own-row .message.message-has-attachments .message-text-caption {
    border-bottom-right-radius: var(--int-bubble-tail, 6px) !important;
    border-bottom-left-radius: var(--int-bubble-radius, 18px) !important;
}

#messagesContainer.chat-pos-reversed .message-row.own-row .message.message-has-attachments .audio-message-card,
#messagesContainer.chat-pos-reversed .message-row.own-row .message.message-has-attachments .file-card,
#messagesContainer.chat-pos-reversed .message-row.own-row .message.message-has-attachments .media-grid-wrapper .media-grid {
    border-bottom-right-radius: var(--int-card-tail, 8px) !important;
    border-bottom-left-radius: var(--int-card-radius, 16px) !important;
}

/* Reversed others LEFT */
#messagesContainer.chat-pos-reversed .message-row.other-row .message,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .message-content {
    align-items: flex-start !important;
}

#messagesContainer.chat-pos-reversed .message-row.other-row .message .message-body,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .message-text-caption,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .message-time,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .reactions,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .media-grid-wrapper,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .single-media-wrapper,
#messagesContainer.chat-pos-reversed .message-row.other-row .message .file-stack-wrapper {
    align-self: flex-start !important;
    text-align: left !important;
}

#messagesContainer.chat-pos-reversed .message-row.other-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-pos-reversed .message-row.other-row .message.message-has-attachments .message-text-caption {
    border-bottom-left-radius: var(--int-bubble-tail, 6px) !important;
    border-bottom-right-radius: var(--int-bubble-radius, 18px) !important;
}

#messagesContainer.chat-pos-reversed .message-row.other-row .message.message-has-attachments .audio-message-card,
#messagesContainer.chat-pos-reversed .message-row.other-row .message.message-has-attachments .file-card,
#messagesContainer.chat-pos-reversed .message-row.other-row .message.message-has-attachments .media-grid-wrapper .media-grid {
    border-bottom-left-radius: var(--int-card-tail, 8px) !important;
    border-bottom-right-radius: var(--int-card-radius, 16px) !important;
}

/* Square style with corrected default/reverse mapping */
#messagesContainer.chat-bubble-square:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.own-row .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-bubble-square.chat-pos-reversed .message-row.other-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square.chat-pos-reversed .message-row.other-row .message.message-has-attachments .message-text-caption {
    border-bottom-left-radius: 3px !important;
    border-bottom-right-radius: 7px !important;
}

#messagesContainer.chat-bubble-square:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square:not(.chat-pos-all-left):not(.chat-pos-all-right):not(.chat-pos-reversed) .message-row.other-row .message.message-has-attachments .message-text-caption,
#messagesContainer.chat-bubble-square.chat-pos-reversed .message-row.own-row .message[data-bubble-layout="text"] .message-body,
#messagesContainer.chat-bubble-square.chat-pos-reversed .message-row.own-row .message.message-has-attachments .message-text-caption {
    border-bottom-right-radius: 3px !important;
    border-bottom-left-radius: 7px !important;
}
/* === End InTeraNet default/reverse position mapping v4.2 === */

/* === InTeraNet reaction redesign v2 === */
/* UI-only: quick reactions + super reactions, same backend emoji map. */

/* Existing chips under messages. */
.message .reactions {
    order: 3 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: fit-content !important;
    max-width: var(--int-attach-card-wide, min(460px, 78vw)) !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    z-index: 2 !important;
}

.message .reactions:empty {
    display: none !important;
}

.reaction-chip.rx-chip,
.reaction-chip {
    appearance: none !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    background: color-mix(in srgb, var(--bg-sidebar) 86%, var(--message-bg)) !important;
    color: var(--text-primary) !important;
    min-height: 23px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease !important;
}

.reaction-chip.rx-chip:hover,
.reaction-chip:hover {
    transform: translateY(-1px) scale(1.03) !important;
    border-color: color-mix(in srgb, var(--accent-color) 44%, var(--border-color)) !important;
}

.reaction-chip.rx-chip.is-mine,
.reaction-chip.is-mine {
    background: color-mix(in srgb, var(--accent-color) 20%, var(--bg-sidebar)) !important;
    border-color: color-mix(in srgb, var(--accent-color) 68%, var(--border-color)) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 24%, transparent),
        0 6px 16px rgba(0,0,0,.15) !important;
}

.reaction-chip.rx-chip.is-super,
.reaction-chip.is-super {
    background:
        radial-gradient(circle at 28% 15%, color-mix(in srgb, var(--accent-color) 34%, transparent), transparent 45%),
        color-mix(in srgb, var(--bg-sidebar) 82%, var(--message-bg)) !important;
    border-color: color-mix(in srgb, var(--accent-color) 48%, var(--border-color)) !important;
}

.reaction-chip.rx-chip.is-super.is-mine,
.reaction-chip.is-super.is-mine {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 38%, transparent),
        0 0 18px color-mix(in srgb, var(--accent-color) 24%, transparent),
        0 7px 18px rgba(0,0,0,.16) !important;
}

.rx-chip-count {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

img.chip-px-emoji,
img.reaction-bar-emoji,
img.mf-reaction-emoji {
    width: 1.1em !important;
    height: 1.1em !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* Context menu picker. */
#messageContextMenu.msg-context-menu {
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: min(360px, calc(100vw - 24px)) !important;
    overflow: hidden !important;
}

#reactionEmojiMenu.reaction-picker-v2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 10px 10px 11px !important;
    margin-top: 6px !important;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 72%, transparent), transparent),
        color-mix(in srgb, var(--bg-sidebar) 92%, var(--message-bg)) !important;
}

#reactionEmojiMenu .rx-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

#reactionEmojiMenu .rx-section-title {
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    padding: 0 2px !important;
    opacity: .9 !important;
}

#reactionEmojiMenu .rx-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

#reactionEmojiMenu .rx-btn {
    width: 36px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important;
    background: color-mix(in srgb, var(--message-bg) 72%, var(--bg-sidebar)) !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.12) !important;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease !important;
}

#reactionEmojiMenu .rx-btn:hover {
    transform: translateY(-2px) scale(1.06) !important;
    border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent-color) 16%, var(--bg-sidebar)) !important;
}

#reactionEmojiMenu .rx-btn.reacted {
    border-color: color-mix(in srgb, var(--accent-color) 78%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent-color) 22%, var(--bg-sidebar)) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 30%, transparent),
        0 7px 18px rgba(0,0,0,.16) !important;
}

#reactionEmojiMenu .rx-btn.rx-super {
    border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color)) !important;
    background:
        radial-gradient(circle at 30% 16%, color-mix(in srgb, var(--accent-color) 38%, transparent), transparent 48%),
        color-mix(in srgb, var(--message-bg) 72%, var(--bg-sidebar)) !important;
}

#reactionEmojiMenu .rx-btn.rx-super:hover,
#reactionEmojiMenu .rx-btn.rx-super.reacted {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 34%, transparent),
        0 0 20px color-mix(in srgb, var(--accent-color) 26%, transparent),
        0 8px 20px rgba(0,0,0,.17) !important;
}

#reactionEmojiMenu .rx-more-section {
    opacity: .94 !important;
}

/* Mobile focus reaction buttons reuse the super styling. */
.mobile-focus-reactions .reaction-btn.rx-super,
.m-msg-reactions .reaction-btn.rx-super {
    border-color: color-mix(in srgb, var(--accent-color) 48%, var(--border-color)) !important;
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent-color) 20%, transparent) !important;
}

/* Super burst effect. */
.rx-super-fx {
    position: fixed !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(.8) !important;
    animation: rxSuperPop .92s ease-out forwards !important;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.28));
}

.rx-super-fx-emoji {
    width: 34px !important;
    height: 34px !important;
    font-size: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rx-super-spark {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    color: var(--accent-color) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    animation: rxSpark .82s ease-out forwards !important;
    transform: rotate(calc(var(--rx-i) * 60deg)) translateY(-8px) !important;
}

.rx-pulse {
    animation: rxBtnPulse .42s ease-out !important;
}

@keyframes rxSuperPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
    100% { opacity: 0; transform: translate(-50%, -92%) scale(1.45); }
}

@keyframes rxSpark {
    0% { opacity: .95; transform: rotate(calc(var(--rx-i) * 60deg)) translateY(-8px) scale(.8); }
    100% { opacity: 0; transform: rotate(calc(var(--rx-i) * 60deg)) translateY(-46px) scale(1.2); }
}

@keyframes rxBtnPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.16); }
    100% { transform: scale(1); }
}
/* === End InTeraNet reaction redesign v2 === */

/* === InTeraNet super reaction animation v3 === */
/* Fix chips from stretching and add recorded/hover animated super reactions. */

.message .reactions,
.message .reactions.has-reactions {
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: fit-content !important;
    max-width: min(460px, 78vw) !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.message .reactions:empty {
    display: none !important;
}

.message .reactions .reaction-chip,
.message .reactions .reaction-chip.rx-chip {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
}

.message .reactions .reaction-chip.is-super {
    position: relative !important;
    overflow: visible !important;
}

.message .reactions .reaction-chip.is-super::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-color) 35%, transparent), transparent 48%);
    opacity: 0;
    transition: opacity .18s ease;
}

.message .reactions .reaction-chip.is-super:hover::after {
    opacity: 1;
    animation: rxChipGlow 1.1s ease-in-out infinite;
}

.rx-super-fx,
.rx-super-hover-preview {
    position: fixed !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
}

.rx-super-recorded {
    animation: rxRecordedFloat 1.2s cubic-bezier(.2,.9,.2,1) forwards !important;
}

.rx-super-main {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-color) 42%, transparent), transparent 50%),
        color-mix(in srgb, var(--bg-sidebar) 74%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 38%, transparent),
        0 0 34px color-mix(in srgb, var(--accent-color) 34%, transparent),
        0 18px 45px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
}

.rx-super-fx-emoji {
    width: 42px !important;
    height: 42px !important;
    font-size: 42px !important;
    animation: rxEmojiDance .7s ease-in-out infinite alternate !important;
}

.rx-super-ring {
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--accent-color) 70%, transparent);
    animation: rxRingExpand 1.05s ease-out forwards;
}

.rx-super-spark {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    color: var(--accent-color) !important;
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent-color) 65%, transparent);
    font-size: 17px !important;
    font-weight: 900 !important;
    animation: rxSuperSpark 1.05s ease-out forwards !important;
    transform: rotate(calc(var(--rx-i) * 26deg)) translateY(-10px) !important;
}

.rx-super-hover-preview {
    animation: rxHoverPreviewIn .88s ease-out forwards !important;
}

.rx-super-hover-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    color: var(--text-primary);
    background:
        radial-gradient(circle at 25% 18%, color-mix(in srgb, var(--accent-color) 38%, transparent), transparent 46%),
        color-mix(in srgb, var(--bg-sidebar) 90%, var(--message-bg));
    border: 1px solid color-mix(in srgb, var(--accent-color) 44%, var(--border-color));
    box-shadow:
        0 0 22px color-mix(in srgb, var(--accent-color) 22%, transparent),
        0 12px 28px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
}

.rx-super-hover-emoji {
    width: 36px !important;
    height: 36px !important;
    font-size: 36px !important;
    animation: rxEmojiDance .55s ease-in-out infinite alternate !important;
}

.rx-super-hover-label {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-primary);
    white-space: nowrap;
}

.rx-hover-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    color: var(--accent-color);
    font-weight: 900;
    font-size: 13px;
    animation: rxHoverSpark .82s ease-out forwards;
    transform: rotate(calc(var(--rx-i) * 45deg)) translateY(-8px);
}

#reactionEmojiMenu .rx-btn.rx-super:hover {
    animation: rxSuperButtonHover .72s ease-in-out infinite alternate !important;
}

@keyframes rxRecordedFloat {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    16% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
    58% { opacity: 1; transform: translate(-50%, -68%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -105%) scale(1.22); }
}

@keyframes rxEmojiDance {
    0% { transform: rotate(-7deg) scale(1); }
    100% { transform: rotate(7deg) scale(1.12); }
}

@keyframes rxRingExpand {
    0% { opacity: .9; transform: scale(.72); }
    100% { opacity: 0; transform: scale(1.85); }
}

@keyframes rxSuperSpark {
    0% {
        opacity: .95;
        transform: rotate(calc(var(--rx-i) * 26deg)) translateY(-8px) scale(.8);
    }
    100% {
        opacity: 0;
        transform: rotate(calc(var(--rx-i) * 26deg)) translateY(calc(-1 * var(--rx-r))) scale(1.25);
    }
}

@keyframes rxHoverPreviewIn {
    0% { opacity: 0; transform: translate(-50%, -35%) scale(.8); }
    16% { opacity: 1; transform: translate(-50%, -75%) scale(1.05); }
    72% { opacity: 1; transform: translate(-50%, -85%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -105%) scale(.96); }
}

@keyframes rxHoverSpark {
    0% {
        opacity: .9;
        transform: rotate(calc(var(--rx-i) * 45deg)) translateY(-6px) scale(.8);
    }
    100% {
        opacity: 0;
        transform: rotate(calc(var(--rx-i) * 45deg)) translateY(-34px) scale(1.15);
    }
}

@keyframes rxChipGlow {
    0%, 100% { opacity: .22; }
    50% { opacity: .72; }
}

@keyframes rxSuperButtonHover {
    0% { transform: translateY(-2px) scale(1.04); }
    100% { transform: translateY(-3px) scale(1.12) rotate(2deg); }
}
/* === End InTeraNet super reaction animation v3 === */

/* === InTeraNet real animated super reactions v4 === */
/* Real animated sticker assets, no label box, no generic sparkle placeholder. */

.message .reactions,
.message .reactions.has-reactions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: fit-content !important;
    max-width: min(460px, 78vw) !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.message .reactions .reaction-chip,
.message .reactions .reaction-chip.rx-chip {
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
}

.rx-super-hover-label,
.rx-super-hover-bubble {
    display: none !important;
}

.rx-real-super-fx,
.rx-real-super-hover {
    position: fixed !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.35));
}

.rx-real-super-fx {
    animation: rxRealStickerRecorded 1.42s cubic-bezier(.17,.88,.28,1) forwards !important;
}

.rx-real-super-img {
    width: 150px !important;
    height: 150px !important;
    object-fit: contain !important;
    display: block !important;
}

.rx-real-super-fallback {
    font-size: 74px !important;
    animation: rxRealFallbackDance .8s ease-in-out infinite alternate !important;
}

.rx-real-super-hover {
    animation: rxRealStickerHover 1.1s ease-out forwards !important;
}

.rx-real-super-hover-img {
    width: 118px !important;
    height: 118px !important;
    object-fit: contain !important;
    display: block !important;
}

#reactionEmojiMenu .rx-btn.rx-real-animated:hover,
#reactionEmojiMenu .rx-btn.rx-super:hover {
    animation: rxRealButtonWiggle .66s ease-in-out infinite alternate !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 38%, transparent),
        0 0 22px color-mix(in srgb, var(--accent-color) 26%, transparent),
        0 8px 20px rgba(0,0,0,.18) !important;
}

.reaction-chip.is-super:hover {
    animation: rxRealChipWiggle .55s ease-in-out infinite alternate !important;
}

@keyframes rxRealStickerRecorded {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.35) rotate(-10deg);
    }
    14% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08) rotate(4deg);
    }
    45% {
        opacity: 1;
        transform: translate(-50%, -64%) scale(1.02) rotate(-3deg);
    }
    78% {
        opacity: .94;
        transform: translate(-50%, -82%) scale(1.14) rotate(3deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -118%) scale(1.32) rotate(0deg);
    }
}

@keyframes rxRealStickerHover {
    0% {
        opacity: 0;
        transform: translate(-50%, -30%) scale(.42) rotate(-8deg);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -78%) scale(1.02) rotate(4deg);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -88%) scale(1.06) rotate(-2deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -112%) scale(.98) rotate(0deg);
    }
}

@keyframes rxRealButtonWiggle {
    0% { transform: translateY(-2px) scale(1.04) rotate(-2deg); }
    100% { transform: translateY(-4px) scale(1.12) rotate(3deg); }
}

@keyframes rxRealChipWiggle {
    0% { transform: translateY(-1px) scale(1.03) rotate(-1deg); }
    100% { transform: translateY(-2px) scale(1.08) rotate(2deg); }
}

@keyframes rxRealFallbackDance {
    0% { transform: rotate(-8deg) scale(1); }
    100% { transform: rotate(8deg) scale(1.12); }
}

@media (max-width: 720px) {
    .rx-real-super-img {
        width: 124px !important;
        height: 124px !important;
    }

    .rx-real-super-hover-img {
        width: 96px !important;
        height: 96px !important;
    }
}
/* === End InTeraNet real animated super reactions v4 === */

/* === InTeraNet reaction calm borders v4.6 === */
/* Remove moving border/glow animations from chips/buttons.
   Keep only the real animated sticker that appears above the clicked/hovered reaction. */

#reactionEmojiMenu .rx-btn,
#reactionEmojiMenu .rx-btn.rx-super,
#reactionEmojiMenu .rx-btn.rx-real-animated,
.message .reactions .reaction-chip,
.message .reactions .reaction-chip.rx-chip,
.message .reactions .reaction-chip.is-super,
.reaction-btn.rx-super,
.rx-pulse {
    animation: none !important;
}

#reactionEmojiMenu .rx-btn:hover,
#reactionEmojiMenu .rx-btn.rx-super:hover,
#reactionEmojiMenu .rx-btn.rx-real-animated:hover,
.reaction-chip.is-super:hover,
.message .reactions .reaction-chip:hover {
    animation: none !important;
}

.message .reactions .reaction-chip.is-super::after,
.message .reactions .reaction-chip.rx-chip.is-super::after {
    display: none !important;
    content: none !important;
    animation: none !important;
    opacity: 0 !important;
}

#reactionEmojiMenu .rx-btn {
    transition: transform .12s ease, background .12s ease, border-color .12s ease !important;
}

#reactionEmojiMenu .rx-btn:hover {
    transform: translateY(-1px) scale(1.04) !important;
}

#reactionEmojiMenu .rx-btn.rx-super:hover,
#reactionEmojiMenu .rx-btn.rx-real-animated:hover {
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.14) !important;
}

.message .reactions .reaction-chip:hover,
.message .reactions .reaction-chip.rx-chip:hover,
.message .reactions .reaction-chip.is-super:hover {
    transform: translateY(-1px) scale(1.03) !important;
    box-shadow: 0 5px 13px rgba(0,0,0,.14) !important;
}

/* Keep selected state visible but static. */
#reactionEmojiMenu .rx-btn.reacted,
.reaction-chip.rx-chip.is-mine,
.reaction-chip.is-mine {
    box-shadow: 0 6px 15px rgba(0,0,0,.14) !important;
}

#reactionEmojiMenu .rx-btn.rx-super.reacted,
.reaction-chip.rx-chip.is-super.is-mine,
.reaction-chip.is-super.is-mine {
    box-shadow: 0 6px 15px rgba(0,0,0,.15) !important;
}
/* === End InTeraNet reaction calm borders v4.6 === */

/* === InTeraNet submitted reaction chips static v4.7 === */
/* Reaction chips under messages: no moving colors, no glow motion, no animated borders.
   Animated sticker on click/hover remains separate. */

.message .reactions .reaction-chip,
.message .reactions .reaction-chip.rx-chip,
.message .reactions .reaction-chip.is-super,
.message .reactions .reaction-chip.rx-chip.is-super,
.message .reactions .reaction-chip.is-mine,
.message .reactions .reaction-chip.rx-chip.is-mine,
.message .reactions .reaction-chip.is-super.is-mine,
.message .reactions .reaction-chip.rx-chip.is-super.is-mine {
    animation: none !important;
    transition: none !important;
    background: color-mix(in srgb, var(--bg-sidebar) 88%, var(--message-bg)) !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.10) !important;
    color: var(--text-primary) !important;
    transform: none !important;
    filter: none !important;
}

.message .reactions .reaction-chip::before,
.message .reactions .reaction-chip::after,
.message .reactions .reaction-chip.rx-chip::before,
.message .reactions .reaction-chip.rx-chip::after,
.message .reactions .reaction-chip.is-super::before,
.message .reactions .reaction-chip.is-super::after,
.message .reactions .reaction-chip.rx-chip.is-super::before,
.message .reactions .reaction-chip.rx-chip.is-super::after {
    display: none !important;
    content: none !important;
    animation: none !important;
    transition: none !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* Hover can lift very slightly, but no color movement/glow. */
.message .reactions .reaction-chip:hover,
.message .reactions .reaction-chip.rx-chip:hover,
.message .reactions .reaction-chip.is-super:hover,
.message .reactions .reaction-chip.rx-chip.is-super:hover {
    animation: none !important;
    transition: none !important;
    transform: translateY(-1px) !important;
    background: color-mix(in srgb, var(--bg-sidebar) 90%, var(--message-bg)) !important;
    border-color: color-mix(in srgb, var(--border-color) 82%, transparent) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
}

/* My submitted reaction: static selected state only. */
.message .reactions .reaction-chip.is-mine,
.message .reactions .reaction-chip.rx-chip.is-mine {
    background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-sidebar)) !important;
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color)) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.11) !important;
}

/* Super submitted reaction: no special animated/glowing box, just a quiet static accent. */
.message .reactions .reaction-chip.is-super,
.message .reactions .reaction-chip.rx-chip.is-super {
    background: color-mix(in srgb, var(--bg-sidebar) 88%, var(--message-bg)) !important;
    border-color: color-mix(in srgb, var(--accent-color) 24%, var(--border-color)) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.10) !important;
}

.message .reactions .reaction-chip.is-super.is-mine,
.message .reactions .reaction-chip.rx-chip.is-super.is-mine {
    background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-sidebar)) !important;
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color)) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.11) !important;
}

/* Kill older keyframe-driven chip/button effects on submitted chips only. */
.message .reactions .reaction-chip,
.message .reactions .reaction-chip * {
    animation-name: none !important;
}
/* === End InTeraNet submitted reaction chips static v4.7 === */