/**
 * Messaging Module CSS v2.0
 * Theme-aware styles using CSS variables
 * Architecture: Scrollable container with sticky header for real glassmorphism
 * Reference: admin_tabs_unified.css (working glassmorphism implementation)
 */

/* ==========================================================================
   CSS Variables (Theme Integration)
   ========================================================================== */

:root {
    /* Message bubbles */
    --message-sent-bg: var(--bs-primary, #007bff);
    --message-sent-text: #ffffff;
    --message-received-bg: var(--bs-card-bg, #f8f9fa);
    --message-received-text: var(--bs-body-color, #212529);

    /* Conversation list */
    --conversation-hover: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
    --conversation-active: var(--bs-primary-bg-subtle, rgba(0, 123, 255, 0.1));
    --conversation-unread-bg: var(--bs-info-bg-subtle, rgba(13, 202, 240, 0.1));

    /* Read status */
    --message-read-color: var(--bs-success, #198754);
    --message-unread-color: var(--bs-secondary, #6c757d);

    /* Glassmorphism - use theme variables like admin tabs */
    --messaging-glass-bg: var(--glass-tabs-bg, rgba(248, 250, 252, 0.7));
    --messaging-glass-blur: var(--glass-blur-medium, blur(20px));
}

/* Light theme */
[data-theme="light"] {
    --conversation-hover: rgba(0, 0, 0, 0.04);
    --conversation-active: rgba(0, 123, 255, 0.15);
}

/* Dark theme overrides */
[data-theme="dark"] {
    /* Заметно светлее фона треда — чтобы входящий пузырь читался как отдельный блок. */
    --message-received-bg: #2b3039;
    --conversation-hover: rgba(255, 255, 255, 0.05);
    --conversation-active: rgba(0, 123, 255, 0.2);
}

/* Cupcake theme - pink tones */
[data-theme="cupcake"] {
    --conversation-hover: rgba(239, 158, 185, 0.1);
    --conversation-active: rgba(239, 158, 185, 0.25);
}

/* Emerald theme - green tones */
[data-theme="emerald"] {
    --conversation-hover: rgba(52, 211, 153, 0.1);
    --conversation-active: rgba(52, 211, 153, 0.2);
}

/* Synthwave theme - purple/neon */
[data-theme="synthwave"] {
    --message-sent-bg: linear-gradient(135deg, var(--bs-primary), var(--bs-purple));
    --conversation-hover: rgba(255, 113, 206, 0.1);
    --conversation-active: rgba(255, 113, 206, 0.2);
}

/* ==========================================================================
   LAYOUT ARCHITECTURE - Scrollable container for real glassmorphism
   Reference: Admin tabs use position:sticky inside scrollable content
   ========================================================================== */

/* Body scrollbar hidden - messaging has its own scroll containers */
body:has(.messaging-container),
html:has(.messaging-container) {
    overflow: hidden;
    height: 100vh;
}

/* #MSG-037: у лички свой скролл-контейнер (body уже без скроллбара). При открытии модалки
   Bootstrap компенсирует «исчезающий» скроллбар, навешивая инлайновый padding-right на body
   и фиксированный навбар → видимый сдвиг навбара влево. Гасим компенсацию на странице лички.
   !important здесь оправдан: перекрываем ИНЛАЙНОВЫЙ стиль фреймворка (иначе никак). */
body:has(.messaging-container).modal-open {
    padding-right: 0 !important;
    overflow: hidden !important;
}

body:has(.messaging-container).modal-open .besedka-navbar {
    padding-right: 0 !important;
}

/* ==========================================================================
   Main Container - FIXED full viewport below navbar
   ========================================================================== */

.messaging-container {
    position: fixed;
    top: var(--bs-shell-navbar-h, 56px); /* Вплотную под навбаром (#MSG-037: был жёсткий 64px → 8px отрыв) */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    /* Container is scrollable - header will be sticky inside */
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bs-body-bg);
    --border-width: 3px;
    --border-color: var(--bs-primary, #2EA6FF);
    --primary-color: var(--bs-primary, #2EA6FF);
    --surface-1: var(--bs-surface-1, var(--bs-body-bg));
    --surface-2: var(--bs-surface-2, var(--bs-tertiary-bg));
    --surface-3: var(--bs-surface-3, var(--bs-secondary-bg));
    --text-primary: var(--bs-body-color);
    --text-secondary: var(--bs-secondary-color, #6c757d);
    --border-subtle: var(--bs-border-color, rgba(128, 128, 128, 0.25));
    --chat-input-bg: var(--bs-surface-1, var(--bs-body-bg));
    --chat-input-text: var(--bs-body-color);
    --chat-input-border: var(--bs-border-color, rgba(128, 128, 128, 0.25));
    --chat-picker-bg: color-mix(in srgb, var(--bs-surface-1, #ffffff) 86%, var(--bs-surface-2, #f8fafc) 14%);
    --chat-picker-border: color-mix(in srgb, var(--bs-border-color, #cbd5e1) 78%, transparent);
    --chat-picker-shadow: 0 12px 28px color-mix(in srgb, var(--bs-primary, #2EA6FF) 14%, rgba(0, 0, 0, 0.16));
    --chat-context-shell-bg: color-mix(in srgb, var(--bs-surface-1, #ffffff) 96%, var(--bs-surface-2, #f1f5f9) 4%);
    --chat-context-shell-border: color-mix(in srgb, var(--bs-primary, #2EA6FF) 24%, var(--bs-border-color, #cbd5e1) 76%);
    --chat-context-shell-shadow: 0 24px 56px color-mix(in srgb, rgba(8, 17, 32, 0.34) 70%, var(--bs-primary, #2EA6FF) 30%);
    --chat-context-text: var(--bs-body-color);
    --chat-context-muted: var(--bs-secondary-color, #6c757d);
    --chat-context-accent: color-mix(in srgb, var(--bs-primary, #2EA6FF) 62%, var(--bs-body-color) 38%);
    --chat-context-rail-bg: color-mix(in srgb, var(--bs-surface-2, #f8fafc) 88%, var(--bs-surface-3, #e2e8f0) 12%);
    --chat-context-rail-hover-bg: color-mix(in srgb, var(--bs-primary, #2EA6FF) 14%, var(--bs-surface-2, #f8fafc) 86%);
    --chat-context-item-hover: color-mix(in srgb, var(--bs-primary, #2EA6FF) 12%, var(--bs-surface-2, #f8fafc) 88%);
    --chat-emoji-picker-shell-bg: var(--chat-context-shell-bg);
    --chat-emoji-picker-shell-border: var(--chat-context-shell-border);
    --chat-emoji-picker-shell-shadow: var(--chat-context-shell-shadow);
    --chat-emoji-picker-rail-bg: color-mix(in srgb, var(--chat-context-rail-bg) 86%, transparent);
    --chat-emoji-picker-tab-bg: color-mix(in srgb, var(--chat-context-rail-bg) 62%, transparent);
    --chat-emoji-picker-tab-active-bg: color-mix(in srgb, var(--chat-context-rail-hover-bg) 84%, var(--chat-context-rail-bg) 16%);
    --chat-emoji-picker-tab-active-fg: var(--chat-context-text);
    --chat-emoji-picker-emoji-hover: var(--chat-context-item-hover);
    --chat-emoji-picker-scroll-thumb: color-mix(in srgb, var(--chat-context-accent) 58%, var(--chat-context-muted) 42%);
    --chat-emoji-picker-scroll-thumb-hover: color-mix(in srgb, var(--chat-context-accent) 72%, var(--chat-context-muted) 28%);
    --chat-attachment-menu-bg: color-mix(in srgb, var(--bs-surface-1, #ffffff) 94%, rgba(7, 15, 28, 0.28) 6%);
    --chat-attachment-menu-border: color-mix(in srgb, var(--bs-primary, #2EA6FF) 24%, var(--chat-picker-border) 76%);
    --chat-attachment-menu-shadow: 0 22px 46px color-mix(in srgb, rgba(0, 0, 0, 0.34) 76%, var(--bs-primary, #2EA6FF) 24%);
    --chat-attachment-item-bg: color-mix(in srgb, var(--bs-surface-2, #f8fafc) 97%, rgba(255, 255, 255, 0.03) 3%);
    --chat-attachment-item-hover-bg: color-mix(in srgb, var(--bs-primary, #2EA6FF) 16%, var(--bs-surface-2, #f8fafc) 84%);
}

/* #NOTIF-133: cloak/«штора» ЛС удалена — давала мерцание с Turbo-preview. */

/* ==========================================================================
   Sticky Glassmorphism Header - REAL sticky like admin tabs
   Reference: .admin-tabs-container in admin_tabs_unified.css
   ========================================================================== */

.messaging-header {
    --dm-header-height: 64px;
    --dm-header-avatar-size: 36px;

    /* STICKY positioning - stays at top while container scrolls */
    position: sticky;
    top: 0;
    z-index: 150; /* Same as admin tabs */

    /* Glassmorphism - same as admin tabs */
    background: var(--messaging-glass-bg);
    backdrop-filter: var(--messaging-glass-blur);
    -webkit-backdrop-filter: var(--messaging-glass-blur);

    /* Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    height: var(--dm-header-height);
    min-height: var(--dm-header-height);
    max-height: var(--dm-header-height);

    /* Accent border */
    border-bottom: 3px solid var(--bs-primary);
}

.messaging-header-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.messaging-header-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* ==========================================================================
   Selection Mode Header - Shows when messages selected (#42)
   FIXED: Better contrast, button spacing (#45)
   ========================================================================== */

.messaging-header--selection {
    background: var(--bs-primary);
    color: white;
}

.messaging-header--selection .messaging-header-left,
.messaging-header--selection .messaging-header-right {
    gap: 0.75rem; /* #45: Add spacing between buttons */
}

.messaging-header--selection .btn {
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5); /* #45: More visible border */
    background: rgba(255, 255, 255, 0.1);
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.messaging-header--selection .btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: white;
}

.messaging-header--selection .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.selection-count {
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.375rem;
}

/* ==========================================================================
   Partner Info in Header
   ========================================================================== */

.partner-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.partner-avatar {
    position: relative;
    width: var(--dm-header-avatar-size);
    height: var(--dm-header-avatar-size);
    flex-shrink: 0;
}

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

/* Favorites icon instead of avatar (#41) */
.partner-avatar--favorites {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
}

.partner-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.partner-name {
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
}

.partner-name:hover {
    color: var(--bs-primary);
}

.partner-status {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

/* Online Indicator */
.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bs-secondary);
    border: 2px solid var(--bs-body-bg);
    display: none;
}

.online-indicator.online {
    background: var(--bs-success);
}

@keyframes pulse-online {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Онлайн-визуализация: вместо мелкой точки — заметное зелёное СВЕТЯЩЕЕСЯ КОЛЬЦО
   вокруг аватара с мягкой пульсацией (#MSG-005). Реагирует на класс .online у точки
   (SSR и live-WS), поэтому работает и при загрузке, и в реальном времени. */
.conversation-avatar:has(.online-indicator.online),
.partner-avatar:has(.online-indicator.online) {
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--bs-success), 0 0 13px 3px rgba(var(--bs-success-rgb), 0.58);
    animation: dm-online-ring 2.4s ease-in-out infinite;
}

/* Когда есть кольцо — мелкая точка-индикатор не нужна (убираем дубль). */
.conversation-avatar:has(.online-indicator.online) .online-indicator,
.partner-avatar:has(.online-indicator.online) .online-indicator {
    display: none;
}

@keyframes dm-online-ring {
    0%, 100% { box-shadow: 0 0 0 3px var(--bs-success), 0 0 8px 2px rgba(var(--bs-success-rgb), 0.52); }
    50% { box-shadow: 0 0 0 3.5px var(--bs-success), 0 0 17px 4px rgba(var(--bs-success-rgb), 0.78); }
}

/* Уважать prefers-reduced-motion: кольцо остаётся, пульсация выключается. */
@media (prefers-reduced-motion: reduce) {
    .conversation-avatar:has(.online-indicator.online),
    .partner-avatar:has(.online-indicator.online) {
        animation: none;
    }
}

/* Typing indicator */
.typing-indicator {
    font-size: 0.75rem;
    color: var(--bs-primary);
    font-style: italic;
}

/* ==========================================================================
   Content Area (Two Columns) - flex: 1 takes remaining space
   ========================================================================== */

.messaging-content {
    display: flex;
    flex: 1;
    min-height: 0; /* Important for flex children to scroll */
    /* Border on all sides */
    border-left: 3px solid var(--bs-primary);
    border-right: 3px solid var(--bs-primary);
    border-bottom: 3px solid var(--bs-primary);
}

/* ==========================================================================
   Conversations Column (Left) - Scrollable
   ========================================================================== */

.conversations-column {
    width: 360px;
    min-width: 320px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    border-right: 3px solid var(--bs-primary);
    background: var(--bs-surface-1, var(--bs-body-bg));
}

.conversations-search {
    padding: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.conversations-search .input-group {
    position: relative;
    min-height: 42px;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 22%, var(--bs-border-color));
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--bs-surface-1, var(--bs-body-bg)) 84%, var(--bs-surface-2, var(--bs-tertiary-bg)) 16%);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.conversations-search .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}

.conversations-search .input-group-text {
    background: transparent;
    border: 0;
    color: color-mix(in srgb, var(--bs-primary) 68%, var(--bs-body-color));
    width: 42px;
    min-width: 42px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.conversations-search .form-control {
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    padding: 0.5rem 0.75rem 0.5rem 0.15rem;
    box-shadow: none;
}

.conversations-search .form-control:focus {
    background: transparent;
    color: var(--bs-body-color);
    box-shadow: none;
}

.conversations-search .form-control::placeholder {
    color: color-mix(in srgb, var(--bs-body-color) 58%, transparent);
    opacity: 1;
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #555555 transparent;
}

.conversations-list::-webkit-scrollbar {
    width: 10px;
}

.conversations-list::-webkit-scrollbar-track {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
    border-radius: 4px;
}

.conversations-list::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
    border: 1px solid #333333;
}

.conversations-list::-webkit-scrollbar-thumb:hover {
    background: #333333;
}

/* ==========================================================================
   Conversation Item
   ========================================================================== */

.conversation-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.conversation-item:hover {
    background: var(--conversation-hover);
    color: var(--bs-body-color);
}

.conversation-item.active {
    background: var(--conversation-active);
}

/* Unread: имя/превью должны оставаться читаемыми (без светлой заливки, которая
   "съедала" текст в тёмной теме). Сигнал — левая акцент-полоса + жирный яркий
   текст + красный бейдж. Работает и в светлой, и в тёмной теме. */
.conversation-item.unread {
    background: rgba(var(--bs-primary-rgb), 0.06);
    box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

.conversation-item.unread .conversation-name {
    /* Имя непрочитанного — акцентным цветом (а не просто жирным: разница была
       неуловима). Читаемо в обеих темах, отличается от прочитанных (body-color). */
    color: var(--bs-primary);
    font-weight: 800;
}

.conversation-item.unread .conversation-preview {
    color: var(--bs-body-color);
}

/* Если непрочитанный диалог одновременно открыт — заливка "активного" побеждает */
.conversation-item.active.unread {
    background: var(--conversation-active);
}

/* Favorites conversation - always first (#41) */
.conversation-item--favorites {
    border-bottom: 2px solid var(--bs-primary);
}

.conversation-item--favorites .conversation-avatar .avatar-letter {
    background: var(--bs-primary);
}

.conversation-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

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

.conversation-avatar .avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bs-primary);
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
}

/* Favorites icon */
.conversation-avatar .avatar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bs-primary);
    color: white;
    font-size: 1.5rem;
}

.conversation-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

/* #MSG-042: имя + роль-значок + карма в одну строку; имя сжимается с многоточием,
   роль/карма не сжимаются; время остаётся справа. */
.conversation-title {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    overflow: hidden;
}

.conversation-name {
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
}

.conversation-role-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
    line-height: 1;
}

/* Компактная карма (значок звания) справа от имени — без длинного текста */
.conversation-karma {
    flex-shrink: 0;
    font-size: 0.9rem;
    line-height: 1;
}

.conversation-time {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    white-space: nowrap;
    margin-left: 0.5rem;
}

.conversation-preview {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Forwarded message indicator */
.conversation-preview .forwarded-indicator {
    color: var(--bs-primary);
    font-style: italic;
}

.preview-prefix {
    color: var(--bs-body-color);
}

.unread-badge {
    background: var(--bs-danger);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    min-width: 1.5rem;
    text-align: center;
}

/* Empty State */
.empty-conversations {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--bs-secondary);
}

.empty-conversations i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* ==========================================================================
   Messages Column (Right) - Scrollable
   ========================================================================== */

.messages-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bs-body-bg);
    min-width: 0;
}

.messages-thread {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #555555 transparent;
}

.messages-thread::-webkit-scrollbar {
    width: 10px;
}

.messages-thread::-webkit-scrollbar-track {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
    border-radius: 4px;
}

.messages-thread::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
    border: 1px solid #333333;
}

.messages-thread::-webkit-scrollbar-thumb:hover {
    background: #333333;
}

/* ==========================================================================
   Message Bubble (Telegram-style)
   ========================================================================== */

.message-bubble {
    /* #D13: пузырь сужался до 1 символа (вертикальный текст) — flex-элемент в
       column-контейнере схлопывался к min-content. width:fit-content фиксит ширину
       по содержимому (в пределах max-width). Перенос — только длинных слов. */
    width: fit-content;
    max-width: 75%;
    padding: 0.625rem 0.875rem;
    border-radius: 1rem;
    position: relative;
    overflow-wrap: break-word;
    word-break: normal;
    /* For selection mode */
    transition: transform 0.2s ease, margin-left 0.2s ease;
}

.message-bubble.sent {
    align-self: flex-end;
    background: var(--message-sent-bg);
    color: var(--message-sent-text);
    border-bottom-right-radius: 0.25rem;
}

.message-bubble.received {
    align-self: flex-start;
    background: var(--message-received-bg);
    color: var(--message-received-text);
    /* Чёткая граница пузыря: в тёмной теме фон входящего был близок к фону треда →
       границы не читались. Тонкая рамка делает пузырь видимым в любой теме. */
    border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.25));
    border-bottom-left-radius: 0.25rem;
}

.messaging-container:not(.has-active-conversation) #selectModeBtn {
    display: none;
}

/* Selection mode - messages shift left (#42) */
.messages-thread--selection .message-bubble {
    margin-left: 0;
}

.messages-thread--selection .message-bubble.sent {
    margin-right: 0;
}

.messages-thread--selection {
    cursor: pointer;
}

.messages-thread--selection .message-bubble {
    outline: 1px solid color-mix(in srgb, var(--bs-primary) 28%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

.messages-thread--selection .message-bubble.is-selected {
    outline-color: var(--bs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 24%, transparent);
}

/* Selection checkbox */
.message-select-checkbox {
    position: absolute;
    right: -35px;
    top: clamp(18px, 50%, 78px);
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message-bubble.sent .message-select-checkbox {
    right: auto;
    left: -35px;
}

.messages-thread--selection .message-select-checkbox {
    opacity: 1;
}

.message-select-checkbox.selected {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.message-select-checkbox.selected::after {
    content: '\f00c'; /* FontAwesome check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
}

/* Forwarded message header (#43) */
.message-forwarded-header {
    font-size: 0.75rem;
    color: var(--bs-primary);
    margin-bottom: 0.25rem;
    font-style: italic;
}

.message-content {
    display: block;
    min-width: 0;
    white-space: pre-wrap;
    line-height: 1.4;
}

.dm-scroll-down {
    position: absolute;
    right: 1.25rem;
    bottom: calc(76px + 0.75rem);
    z-index: 25;
    width: 38px;
    height: 38px;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-surface-1, var(--bs-body-bg));
    color: var(--bs-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.dm-scroll-down.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dm-scroll-down:hover {
    border-color: var(--bs-primary);
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    opacity: 0.7;
}

.message-status i {
    font-size: 0.75rem;
}

.message-status i.read {
    color: var(--message-read-color);
}

/* Edited indicator */
.message-edited {
    font-size: 0.625rem;
    font-style: italic;
    margin-right: 0.25rem;
}

/* ==========================================================================
   Message Input Area
   ========================================================================== */

.message-input-container {
    padding: 0.75rem 1rem;
    border-top: 3px solid var(--bs-primary);
    background: var(--bs-surface-1, var(--bs-body-bg));
    flex-shrink: 0;
}

.message-form:not(.chat-composer) .input-group {
    gap: 0.5rem;
}

.message-form:not(.chat-composer) textarea {
    resize: none;
    border-radius: 1.5rem;
    padding: 0.625rem 1rem;
    max-height: 120px;
}

.message-form:not(.chat-composer) .btn {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Фаза C: кнопка-смайл (SSOT emoji_insert_picker) слева от поля ввода ЛС.
   Размер/выравнивание под круглую кнопку отправки; tap-таргет 42px. */
.message-form .dm-emoji-trigger,
#newConversationForm .dm-emoji-trigger {
    align-self: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

/* ==========================================================================
   #MSG-F: Богатый композер — инструменты (вложения / GIF), очередь загрузки
   ========================================================================== */

.dm-composer {
    align-items: flex-end;
}

/* Круглая кнопка-инструмент (скрепка), в стиле кнопки-смайла/отправки. */
.dm-tool-btn {
    align-self: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dm-tool-btn:hover,
.dm-tool-btn[aria-expanded="true"] {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}

/* Кнопка GIF рядом со смайлом (как в чате — GIF живёт в композере). */
.dm-gif-btn {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dm-attach-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Меню вложений — всплывает НАД кнопкой (композер внизу экрана). */
.dm-attach-menu {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    z-index: 30;
    min-width: 230px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dm-attach-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 0.6rem;
    padding: 0.5rem 0.6rem;
    text-align: left;
    cursor: pointer;
    color: var(--bs-body-color);
    transition: background 0.15s ease;
}

.dm-attach-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.dm-attach-ico {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
}

.dm-attach-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.dm-attach-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.dm-attach-sub {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

/* Очередь загрузки — над композером. */
.dm-upload-queue {
    margin-bottom: 0.5rem;
}

.dm-upload-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
    border-radius: 0.6rem;
}

.dm-upload-label {
    font-size: 0.8rem;
    color: var(--bs-body-color);
}

.dm-upload-note {
    font-size: 0.78rem;
    color: var(--bs-secondary);
    margin-bottom: 0.35rem;
}

.dm-upload-track {
    height: 5px;
    border-radius: 3px;
    background: var(--bs-border-color);
    overflow: hidden;
}

.dm-upload-bar {
    height: 100%;
    width: 0;
    background: var(--bs-primary);
    transition: width 0.15s ease;
}

.dm-upload-error {
    font-size: 0.8rem;
    color: var(--bs-danger, #dc3545);
    padding: 0.4rem 0.2rem;
}

.dm-upload-dismiss {
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--bs-primary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}

/* GIF-панель под композером. */
.dm-gif-panel {
    margin-top: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    background: var(--bs-body-bg);
    padding: 0.6rem;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.message-input-container.chat-input-area {
    margin: 0;
    border-top: var(--border-width) solid var(--border-color);
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    z-index: 35;
}

.message-input-container .emoji-picker-container {
    left: 10px;
    bottom: 76px;
}

.message-input-container .gif-grid {
    width: 100%;
}

.dm-picker-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.2rem;
    margin-bottom: 0.5rem;
    border-radius: 0.8rem;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
}

.dm-picker-mode {
    border: none;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--bs-secondary);
    padding: 0.4rem 0.55rem;
    font-weight: 700;
    cursor: pointer;
}

.dm-picker-mode.active {
    background: var(--bs-surface-1, var(--bs-body-bg));
    color: var(--bs-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.dm-gif-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.dm-gif-search-ico {
    position: absolute;
    left: 0.7rem;
    color: var(--bs-secondary);
    pointer-events: none;
}

.dm-gif-input {
    flex: 1;
    border: 1px solid var(--bs-border-color);
    border-radius: 1.2rem;
    padding: 0.4rem 2.2rem;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
    color: var(--bs-body-color);
}

.dm-gif-close {
    position: absolute;
    right: 0.5rem;
    border: none;
    background: transparent;
    color: var(--bs-secondary);
    cursor: pointer;
}

.dm-gif-subtabs {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.dm-gif-subtabs::-webkit-scrollbar {
    display: none;
}

.dm-gif-subtab,
.dm-gif-upload-own {
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--bs-body-color);
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.dm-gif-subtab.active {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.dm-gif-upload-own {
    align-self: flex-start;
    margin-bottom: 0.5rem;
}

.dm-gif-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.4rem;
    overflow-y: auto;
}

.dm-gif-cell {
    position: relative;
    border: none;
    padding: 0;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

.dm-gif-star {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dm-gif-star.is-favorite {
    color: #ffd166;
}

.dm-gif-cell video,
.dm-gif-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dm-gif-msg {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--bs-secondary);
    font-size: 0.85rem;
    padding: 1rem 0;
}

/* ==========================================================================
   #MSG-F: Окно предпросмотра вложений (миниатюры + подпись перед отправкой)
   ========================================================================== */

.dm-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 1rem;
}

.dm-preview-modal[hidden] {
    display: none;
}

.dm-preview-dialog {
    width: 100%;
    max-width: 440px;
    background: var(--bs-body-bg);
    border-radius: 1rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dm-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.dm-preview-title {
    font-weight: 600;
}

.dm-preview-close {
    border: none;
    background: transparent;
    color: var(--bs-secondary);
    cursor: pointer;
    font-size: 1rem;
}

.dm-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
    padding: 1rem;
    max-height: 320px;
    overflow-y: auto;
}

.dm-preview-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 78%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem;
}

.dm-preview-remove {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-danger, #dc3545) 86%, rgba(0, 0, 0, 0.45) 14%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.dm-preview-add {
    border: 1px dashed color-mix(in srgb, var(--bs-primary) 68%, var(--bs-border-color));
    background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-surface-1, var(--bs-body-bg)) 90%);
    color: var(--bs-primary);
    cursor: pointer;
    font-weight: 650;
}

.dm-preview-add i {
    font-size: 1.45rem;
}

.dm-preview-add span {
    font-size: 0.78rem;
}

.dm-preview-cell img,
.dm-preview-cell video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-preview-fileico {
    font-size: 1.8rem;
    color: var(--bs-primary);
}

.dm-preview-fname {
    font-size: 0.72rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    color: var(--bs-body-color);
}

.dm-preview-note {
    padding: 0 1rem 0.5rem;
    font-size: 0.78rem;
    color: var(--bs-secondary);
}

.dm-preview-note.is-error {
    color: var(--bs-danger, #dc3545);
}

.dm-preview-grouping {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 1rem 0.7rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 82%, transparent);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--bs-surface-2, var(--bs-tertiary-bg)) 88%, transparent);
    color: var(--bs-body-color);
    cursor: pointer;
}

.dm-preview-grouping input {
    margin-top: 0.15rem;
    accent-color: var(--bs-primary);
}

.dm-preview-grouping strong,
.dm-preview-grouping small {
    display: block;
}

.dm-preview-grouping small {
    margin-top: 0.15rem;
    color: color-mix(in srgb, var(--bs-body-color) 72%, transparent);
    line-height: 1.25;
}

.dm-preview-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.dm-preview-caption {
    flex: 1;
    border: 1px solid var(--bs-border-color);
    border-radius: 1.5rem;
    padding: 0.55rem 1rem;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
    color: var(--bs-body-color);
}

.dm-preview-send {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   #MSG-F: Вложения в пузырях (фото/видео/GIF/файлы/голосовые)
   ========================================================================== */

.message-attachments {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 280px;
}

.message-bubble.has-attachments .message-content {
    margin-top: 0.4rem;
}

.dm-att-media {
    display: block;
    max-width: 280px;
    width: 100%;
    border-radius: 0.75rem;
    cursor: pointer;
}

.dm-att-video,
.dm-att-gif {
    cursor: default;
    background: #000;
}

.dm-att-voice {
    width: 250px;
    max-width: 100%;
}

/* Карточка файла/документа. */
.dm-att-file {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    background: rgba(var(--bs-body-color-rgb, 0, 0, 0), 0.06);
    text-decoration: none;
    color: inherit;
    max-width: 280px;
}

.message-bubble.sent .dm-att-file {
    background: rgba(255, 255, 255, 0.18);
}

.dm-att-file-ico {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bs-primary);
    font-size: 1rem;
}

.message-bubble.sent .dm-att-file-ico {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.dm-att-file-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dm-att-file-name {
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.dm-att-file-size {
    font-size: 0.72rem;
    opacity: 0.75;
}

/* ==========================================================================
   No Conversation Selected State
   ========================================================================== */

.no-conversation-selected {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--bs-secondary);
}

.no-conversation-selected i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.no-conversation-selected h4 {
    margin-bottom: 0.5rem;
}

/* Empty Messages */
.empty-messages {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary);
}

/* ==========================================================================
   New Conversation Prompt
   ========================================================================== */

.new-conversation-prompt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.new-conversation-user {
    text-align: center;
    margin-bottom: 2rem;
}

.new-conversation-user img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.new-conversation-user .avatar-letter.avatar-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

.new-conversation-user h4 {
    margin-bottom: 0.25rem;
}

.new-conversation-user p {
    color: var(--bs-secondary);
}

#newConversationForm {
    width: 100%;
    max-width: 400px;
}

#newConversationForm .input-group {
    gap: 0.5rem;
}

#newConversationForm textarea {
    border-radius: 1rem;
}

/* ==========================================================================
   Modal - New Message / Forward (#43)
   Using SSOT delete-modal styles with messaging overrides
   ========================================================================== */

/* Fast modal animation */
#newMessageModal.fade .modal-dialog,
#forwardModal.fade .modal-dialog,
#deleteMessageModal.fade .modal-dialog {
    transition: transform 0.15s ease-out;
}

#newMessageModal.fade,
#forwardModal.fade,
#deleteMessageModal.fade {
    transition: opacity 0.15s linear;
}

/* Backdrop - no bounce (#36).
   #NOTIF-133: messaging.css теперь грузится ГЛОБАЛЬНО (персистентный <head>) ради
   устранения FOUC под Turbo. Поэтому единственные не-заскоупленные правила (backdrop)
   ограничиваем страницей лички через body:has(.messaging-container) — чтобы не менять
   поведение модалок на остальном сайте. */
body:has(.messaging-container) .modal-backdrop {
    transition: none !important;
    opacity: 0;
}

body:has(.messaging-container) .modal-backdrop.show {
    opacity: 0.5 !important;
}

body:has(.messaging-container) .modal-backdrop.fade {
    transition: none !important;
}

/* Compact modal layout (#37) */
#newMessageModal.delete-modal .modal-content,
#forwardModal.delete-modal .modal-content {
    padding: 1.25rem;
    /* Glassmorphism (#39) */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#newMessageModal.delete-modal .modal-header,
#forwardModal.delete-modal .modal-header {
    margin-bottom: 1rem;
}

#newMessageModal.delete-modal .modal-body,
#forwardModal.delete-modal .modal-body {
    margin-bottom: 0.75rem;
}

/* Dark theme modal */
[data-theme="dark"] #newMessageModal.delete-modal .modal-content,
[data-theme="dark"] #forwardModal.delete-modal .modal-content {
    background: rgba(30, 30, 30, 0.85);
}

/* Synthwave theme modal */
[data-theme="synthwave"] #newMessageModal.delete-modal .modal-content,
[data-theme="synthwave"] #forwardModal.delete-modal .modal-content {
    background: rgba(22, 7, 30, 0.85);
}

#newMessageModal .input-group-text,
#forwardModal .input-group-text {
    background: transparent;
    border-color: var(--bs-border-color);
}

#newMessageModal .form-control,
#forwardModal .form-control {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
}

/* #MSG-036: полировка модалки «Новое сообщение».
   Единая рамка поиска (лупа+поле+крестик) — заранее 2px, фокус меняет ТОЛЬКО цвет, не размер. */
#newMessageModal .dm-search-group {
    border: 2px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    transition: border-color 0.15s ease;
}

#newMessageModal .dm-search-group:focus-within {
    border-color: var(--bs-primary);
}

#newMessageModal .dm-search-group .input-group-text,
#newMessageModal .dm-search-group .form-control,
#newMessageModal .dm-search-group .dm-search-clear {
    border: 0;
    box-shadow: none;
    background: transparent;
}

#newMessageModal .dm-search-group .form-control:focus {
    border: 0;
    box-shadow: none;
}

#newMessageModal .dm-search-clear {
    color: var(--bs-secondary);
    padding: 0 0.85rem;
    display: flex;
    align-items: center;
}

#newMessageModal .dm-search-clear:hover {
    color: var(--bs-body-color);
}

#newMessageModal .dm-search-hint {
    font-size: 0.8rem;
    color: var(--bs-secondary);
    margin: 0 0 0.75rem;
    line-height: 1.35;
}

/* Заголовок модалки: акцентная иконка + жирнее (был «чёрно-белый») */
#newMessageModal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

#newMessageModal .modal-icon {
    color: var(--bs-primary);
}

/* Видимая кнопка «Отмена» (была без контура до hover) */
#newMessageModal .btn-cancel {
    border: 1px solid var(--bs-border-color);
}

/* ==========================================================================
   #MSG-036: вытянутая 3-зонная модалка «Новое сообщение»
   Зона 1 — поиск + чекбокс; Зона 2 — алфавитный рельс; Зона 3 — список всех.
   ========================================================================== */
.dm-newmsg-dialog {
    max-width: 560px;
    width: 100%;
}

#newMessageModal .dm-newmsg-body {
    display: flex;
    flex-direction: column;
    /* Вытянутая: фиксированная высота, список занимает остаток и скроллится. */
    height: min(70vh, 620px);
    margin-bottom: 0.5rem;
    padding: 0;
}

#newMessageModal .dm-newmsg-top {
    flex: 0 0 auto;
}

#newMessageModal .dm-newmsg-top .dm-search-group {
    margin-bottom: 0.75rem;
}

/* Зона 2+3: рельс слева, список справа */
#newMessageModal .dm-newmsg-listwrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--bs-body-bg);
}

#newMessageModal .dm-alpha-rail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0.35rem 0.15rem;
    overflow-y: auto;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
    scrollbar-width: none;
}

#newMessageModal .dm-alpha-rail::-webkit-scrollbar {
    width: 0;
}

#newMessageModal .dm-alpha-letter {
    border: 0;
    background: transparent;
    color: var(--bs-primary);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.18rem 0.32rem;
    border-radius: 0.3rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

#newMessageModal .dm-alpha-letter:hover {
    background: var(--bs-primary);
    color: var(--bs-white, #fff);
}

/* Зона 3: список — занимает остаток, скроллится; перекрываем max-height по умолчанию */
#newMessageModal .dm-newmsg-results {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 0.25rem;
}

#newMessageModal .dm-letter-header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--bs-secondary);
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* ==========================================================================
   User Search Results (Modal)
   ========================================================================== */

.user-search-results {
    max-height: 300px;
    overflow-y: auto;
    min-height: 0; /* No empty space when no results (#37) */
    /* Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #555555 transparent;
}

.user-search-results::-webkit-scrollbar {
    width: 10px;
}

.user-search-results::-webkit-scrollbar-track {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
    border-radius: 4px;
}

.user-search-results::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
    border: 1px solid #333333;
}

.user-search-results::-webkit-scrollbar-thumb:hover {
    background: #333333;
}

/* Small placeholder when empty */
.user-search-results:empty {
    min-height: 20px;
}

.user-search-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 0.75rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

.user-search-item:hover,
.user-search-item.keyboard-selected {
    background: var(--conversation-hover);
}

/* Keyboard selected - more visible (#38) */
.user-search-item.keyboard-selected {
    background: var(--conversation-active);
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.user-search-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.user-search-item .avatar-letter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.user-search-item-info {
    flex: 1;
}

.user-search-item-name {
    font-weight: 600;
}

.user-search-item-username {
    font-size: 0.875rem;
    color: var(--bs-secondary);
}

.user-search-item-disabled {
    font-size: 0.75rem;
    color: var(--bs-danger);
}

/* ==========================================================================
   Forward Modal - Conversation List (#43)
   ========================================================================== */

.forward-conversations {
    max-height: 400px;
    overflow-y: auto;
}

.forward-conversation-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 0.75rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

.forward-conversation-item:hover {
    background: var(--conversation-hover);
}

.forward-conversation-item.selected {
    background: var(--conversation-active);
    outline: 2px solid var(--bs-primary);
}

/* Favorites always first in forward modal (#41) */
.forward-conversation-item--favorites {
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
}

/* ==========================================================================
   Context Menu (Right-click on message)
   ========================================================================== */

.message-context-menu {
    position: fixed;
    z-index: 1100;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: var(--bs-shadow-lg);
    padding: 0.5rem 0;
    min-width: 180px;
    display: none;
}

.message-context-menu.show {
    display: block;
}

.message-context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    color: var(--bs-body-color);
}

.message-context-menu-item:hover {
    background: var(--conversation-hover);
}

.message-context-menu-item i {
    width: 20px;
    text-align: center;
    color: var(--bs-secondary);
}

.message-context-menu-item--danger {
    color: var(--bs-danger);
}

.message-context-menu-item--danger i {
    color: var(--bs-danger);
}

.message-context-menu-divider {
    height: 1px;
    background: var(--bs-border-color);
    margin: 0.5rem 0;
}

.dm-conversation-menu {
    --chat-context-shell-bg: color-mix(in srgb, var(--bs-surface-1, #ffffff) 96%, var(--bs-surface-2, #f1f5f9) 4%);
    --chat-context-shell-border: color-mix(in srgb, var(--bs-primary, #2EA6FF) 24%, var(--bs-border-color, #cbd5e1) 76%);
    --chat-context-shell-shadow: 0 24px 56px color-mix(in srgb, rgba(8, 17, 32, 0.34) 70%, var(--bs-primary, #2EA6FF) 30%);
    --chat-context-text: var(--bs-body-color);
    --chat-context-muted: var(--bs-secondary-color, #6c757d);
    --chat-context-accent: color-mix(in srgb, var(--bs-primary, #2EA6FF) 62%, var(--bs-body-color) 38%);
    --chat-context-rail-bg: color-mix(in srgb, var(--bs-surface-2, #f8fafc) 88%, var(--bs-surface-3, #e2e8f0) 12%);
    --chat-context-rail-hover-bg: color-mix(in srgb, var(--bs-primary, #2EA6FF) 14%, var(--bs-surface-2, #f8fafc) 86%);
    --chat-context-item-hover: color-mix(in srgb, var(--bs-primary, #2EA6FF) 12%, var(--bs-surface-2, #f8fafc) 88%);
    --chat-context-separator: color-mix(in srgb, var(--bs-border-color, #cbd5e1) 78%, transparent);
    --chat-context-footer-bg: color-mix(in srgb, var(--bs-surface-2, #f8fafc) 86%, transparent);
    --chat-context-footer-hover: color-mix(in srgb, var(--bs-primary, #2EA6FF) 12%, var(--bs-surface-2, #f8fafc) 88%);
}

.dm-conversation-menu .context-menu-meta {
    display: grid;
}

.dm-conversation-menu .context-menu-meta[hidden],
.dm-conversation-menu [hidden] {
    display: none;
}

/* ==========================================================================
   Delete Confirmation Modal
   ========================================================================== */

.delete-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.delete-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.delete-option:hover {
    border-color: var(--bs-primary);
    background: var(--conversation-hover);
}

.delete-option input[type="radio"] {
    margin: 0;
}

.delete-option-label {
    flex: 1;
}

.delete-option-label strong {
    display: block;
    margin-bottom: 0.125rem;
}

.delete-option-label small {
    color: var(--bs-secondary);
}

/* ==========================================================================
   Mobile Responsive (<768px)
   ========================================================================== */

@media (max-width: 767.98px) {
    .messaging-content {
        flex-direction: column;
    }

    .conversations-column {
        width: 100%;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid var(--bs-border-color);
    }

    /* Toggle visibility based on state */
    .messaging-container--in-conversation .conversations-column {
        display: none;
    }

    .messaging-container--in-conversation .messages-column {
        display: flex;
    }

    .messages-column {
        display: none;
    }

    .messaging-container.has-active-conversation .conversations-column {
        display: none;
    }

    .messaging-container.has-active-conversation .messages-column {
        display: flex;
    }

    /* Mobile header adjustments */
    .messaging-header-left .d-none.d-md-inline {
        display: none;
    }

    /* Back button for mobile */
    .mobile-back-btn {
        display: none !important;
    }

    .messaging-container.has-active-conversation .mobile-back-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 0.35rem;
        flex: 0 0 auto;
    }

    .messaging-container.has-active-conversation #newMessageBtn {
        display: none;
    }

    .mobile-back-btn-text {
        display: inline;
        white-space: nowrap;
    }

    /* Compact header */
    .messaging-header {
        --dm-header-height: 56px;
        --dm-header-avatar-size: 32px;
        padding: 0 0.75rem;
        height: var(--dm-header-height);
        min-height: var(--dm-header-height);
        max-height: var(--dm-header-height);
    }

    .partner-info {
        gap: 0.5rem;
    }

    .partner-name,
    .partner-status {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .mobile-back-btn {
        display: none !important;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* New message slide in */
@keyframes message-slide-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-bubble--new {
    animation: message-slide-in 0.2s ease-out;
}

/* Selection mode transition */
@keyframes selection-enter {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.message-select-checkbox {
    animation: selection-enter 0.15s ease-out;
}

/* ==========================================================================
   DELETE MODAL FIX (#46, #47, #48)
   ========================================================================== */

/* Delete options - vertical stack with proper spacing */
.delete-modal .delete-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.delete-modal .delete-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.delete-modal .delete-option:hover {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
}

.delete-modal .delete-option input[type="radio"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.delete-modal .delete-option-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.delete-modal .delete-option-label strong {
    font-weight: 600;
    color: var(--bs-body-color);
}

.delete-modal .delete-option-label small {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8125rem;
}

/* Footer buttons - horizontal, not vertical */
.delete-modal .modal-footer {
    display: flex;
    flex-direction: row !important;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.delete-modal .modal-footer .btn {
    min-width: auto;
    padding: 0.5rem 1.25rem;
}

/* ==========================================================================
   COMPACT DELETE MODAL (#46, #47)
   ========================================================================== */

.delete-modal-compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0 !important;
}

.btn-delete-option {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-delete-option:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
}

.btn-delete-option--danger {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.btn-delete-option--danger:hover {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
    color: white;
}

/* Dark theme fixes for delete modal (#47) */
[data-theme="dark"] .delete-modal .modal-content,
[data-theme="synthwave"] .delete-modal .modal-content {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-theme="dark"] .delete-modal .modal-title,
[data-theme="synthwave"] .delete-modal .modal-title {
    color: var(--bs-body-color) !important;
}

[data-theme="dark"] .delete-modal .btn-cancel,
[data-theme="synthwave"] .delete-modal .btn-cancel {
    background: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: white !important;
}

[data-theme="dark"] .btn-delete-option,
[data-theme="synthwave"] .btn-delete-option {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-theme="dark"] .btn-delete-option:hover,
[data-theme="synthwave"] .btn-delete-option:hover {
    background: var(--bs-secondary-bg);
}

/* ==========================================================================
   SELECT MODE BUTTON (#44) - Colorful emoji
   ========================================================================== */

.btn-select-mode {
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.btn-select-mode:hover {
    opacity: 1;
    transform: scale(1.1);
    background: transparent;
}

.btn-select-mode:focus {
    box-shadow: none;
    outline: none;
}

.select-emoji {
    font-size: 1.5rem;
    line-height: 1;
}

/* ==========================================================================
   #41-R6: FAVORITES CENTERING AND POSITION FIX
   ========================================================================== */

/* Ensure favorites always first via CSS order */
.conversations-list {
    display: flex;
    flex-direction: column;
}

.conversation-item--favorites {
    order: -1 !important; /* Always first */
    background: linear-gradient(135deg,
        rgba(var(--bs-primary-rgb), 0.08) 0%,
        rgba(var(--bs-primary-rgb), 0.02) 100%);
}

/* Better vertical centering */
.conversation-item--favorites .conversation-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversation-item--favorites .conversation-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 48px;
}

.conversation-item--favorites .conversation-name {
    font-size: 1rem;
    font-weight: 600;
}

.conversation-item--favorites .conversation-preview {
    font-size: 0.85rem;
}

/* #57: Add border-top to Favorites (separates from search) */
.conversation-item--favorites {
    border-top: 2px solid var(--bs-primary);
}

/* #60: Hide scrollbar in message input by default */
.message-form textarea {
    overflow: auto;
    scrollbar-width: none; /* Firefox */
}

.message-form textarea::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* Show scrollbar when textarea has content overflow */
.message-form textarea:focus,
.message-form textarea.has-overflow {
    scrollbar-width: thin;
}

.message-form textarea:focus::-webkit-scrollbar,
.message-form textarea.has-overflow::-webkit-scrollbar {
    width: 8px;
}

/* ==========================================================================
   #MSG-043: ОДНОРАЗОВЫЙ ЧАТ (burn-on-logout) — чекбокс модалки + бейдж шапки
   ========================================================================== */

/* Чекбокс «одноразовый чат» в модалке — выровненная строка: чекбокс слева по центру,
   справа заголовок (обычным весом, НЕ как хедер модалки) + читаемая подсказка. */
#newMessageModal .dm-one-time-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
}

#newMessageModal .dm-one-time-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--bs-primary);
}

#newMessageModal .dm-one-time-label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    cursor: pointer;
    margin: 0;
}

#newMessageModal .dm-one-time-title {
    /* Привлекающий внимание акцент (в тон 🔥 и красному бейджу одноразовости),
       при этом НЕ совпадает с хедером модалки (тот синий-primary, жирный). */
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bs-danger);
}

#newMessageModal .dm-one-time-desc {
    /* Читаемая подсказка (раньше text-muted почти не видно в тёмной теме). */
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--bs-body-color);
    opacity: 0.72;
}

.dm-one-time-flame {
    /* Эмодзи 🔥 — лёгкий акцент, без хардкода цвета текста */
    margin-right: 0.3rem;
}

/* Красный бейдж-напоминание в шапке диалога. Виден ОБОИМ участникам.
   Скрыт по умолчанию; показывается классом .is-visible (SSR/JS). */
.dm-one-time-badge {
    display: none;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: #fff;
    background: var(--bs-danger);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
}

.dm-one-time-badge.is-visible {
    display: inline-flex;
}

.dm-one-time-badge .dm-one-time-flame {
    margin-right: 0;
}

/* Мобила: бейдж компактный — только огонёк, текст скрыт (места мало). */
@media (max-width: 768px) {
    .dm-one-time-badge .dm-one-time-text {
        display: none;
    }
    .dm-one-time-badge {
        padding: 0.12rem 0.35rem;
    }
}

/* Маркер одноразового чата в строке списка (различить две строки одного партнёра). */
.conversation-onetime {
    font-size: 0.8rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ==========================================================================
   ФАЗА B (D11): метаданные входящих (аватар+имя+роль) + разделители дней
   ========================================================================== */

/* Входящие: КРУПНЫЙ отдельный кружок аватара СЛЕВА от пузыря (паритет с чатом),
   а не микро-иконка внутри. Резервируем слева место под аватар у ВСЕХ входящих,
   чтобы сгруппированные сообщения выравнивались под колонкой аватара. */
.message-bubble.received {
    margin-left: 46px;
}

.message-bubble.with-sender {
    padding-top: 0.4rem;
}

/* Аватар вынесен из строки имени и позиционируется в зарезервированном поле слева,
   у НИЖНЕГО края пузыря (как «хвост» аватара в чате). Показывается только у первого
   сообщения в группе (.with-sender). */
.message-sender-avatar {
    position: absolute;
    left: -44px;
    top: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.message-sender-avatar--letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.15));
    color: var(--bs-body-color);
    font-size: 1rem;
    font-weight: 700;
}

/* Строка имени отправителя: роль-значок СЛЕВА + имя (как принято на сайте). */
.message-sender {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.message-sender-role {
    font-size: 0.9rem;
    line-height: 1;
}

.message-sender-name {
    color: var(--bs-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

/* Разделитель дней «Сегодня / Вчера / дата» — ЧИТАЕМО в тёмной теме (было тёмное
   по тёмному). Текст body-color, подложка с заметным контрастом. */
.message-day-separator {
    align-self: center;
    margin: 0.5rem 0;
    text-align: center;
}

.message-day-separator span {
    display: inline-block;
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-body-color);
    background: rgba(128, 128, 128, 0.22);
    text-transform: capitalize;
}