/**
 * Universal Chat Renderer Styles
 * Универсальные стили для всех типов чатов
 */

/* Импорт стилей для голосовых сообщений */
@import url('./voice-styles.css');

/* Основной контейнер чата */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
}

/* Контейнер сообщений */
.chat-messages-container {
    flex: 1;
    padding: 16px;
    background: transparent;
    max-height: 400px;
    animation: fadeInDown 0.4s ease-out;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Отдельное сообщение */
.chat-message {
    margin-bottom: 16px;
    animation: messageSlideIn 0.3s ease-out;
    transition: transform 0.2s ease;
}

.chat-message:hover {
    transform: translateX(2px);
}

@keyframes messageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Контейнер сообщения */
.chat-message-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 85%;
}

/* Фото пользователя */
.chat-user-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
    flex-shrink: 0;
}

/* Контент сообщения */
.chat-message-content {
    flex: 1;
    min-width: 0;
}

/* Заголовок сообщения */
.chat-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* Имя пользователя */
.chat-username {
    font-weight: 600;
    font-size: 14px;
    color: #888;
}

/* Время сообщения */
.chat-time {
    font-size: 11px;
    color: #666666;
    position: absolute;
    bottom: 4px;
    right: 8px;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Индикатор прочитанности */
/* Удалены неиспользуемые стили .read-status-indicator */

/* Стили для .message-status-indicator (используется в системе галочек) */
.message-status-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    opacity: 0.7;
    transition: all 0.2s ease;
    cursor: default;
    vertical-align: middle;
}

.message-status-indicator svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

/* Отправленное сообщение - 1 галочка */
.message-status-indicator.sent {
    color: #999;
}

.message-status-indicator.sent svg {
    stroke: #999;
    fill: none;
}

/* Доставленное сообщение - 2 серых галочки */
.message-status-indicator.delivered {
    color: #999;
}

.message-status-indicator.delivered svg {
    stroke: #999;
    fill: none;
}

/* Двойные галочки теперь позиционируются через SVG координаты */

/* Прочитанное сообщение - 2 зеленых галочки */
.message-status-indicator.read {
    color: #4caf50;
}

.message-status-indicator.read svg {
    stroke: #4caf50;
    fill: none;
}

/* Анимация при изменении статуса для .message-status-indicator */
.message-status-indicator.read {
    animation: readStatusChange 0.3s ease;
}

.message-status-indicator:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Удалены дублирующиеся стили .read-status-indicator */

@keyframes readStatusChange {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

/* Текст сообщения */
.chat-message-text {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 16px 24px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    color: #333333;
    word-wrap: break-word;
    box-shadow: none;
    border: 1px solid rgba(224, 224, 224, 0.3);
    max-width: 400px;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
}

.chat-message-text:hover {
    outline: 2px solid rgba(25, 118, 210, 0.3);
    outline-offset: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Смайлики в тексте - только для эмодзи */
.chat-message-text img.emoji-in-text {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 0 2px;
}

/* Обычные изображения в сообщениях не должны быть маленькими */
.chat-message-text .chat-image {
    width: 100% !important;
    height: auto !important;
    max-width: 500px;
    max-height: 300px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    object-fit: cover;
    display: block;
}

/* Информация о редактировании */
.chat-edit-info {
    font-size: 11px;
    color: #888888;
    margin-top: 4px;
    font-style: italic;
}

/* Действия с сообщением */
.chat-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    opacity: 1;
    align-items: center;
    transform: translateY(0);
    transition: all 0.2s ease;
}

/* Стили для нативного редактирования комментариев */
.chat-message-text.editing {
    position: relative;
}

.chat-edit-input {
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    width: 100%;
    min-height: 1.2em;
    padding: 0;
    margin: 0;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.chat-edit-input:focus {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    padding: 0;
    margin: 0;
    outline: none;
}

/* Индикатор прочитанности сообщений */
.read-status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    opacity: 0.7;
    transition: all 0.2s ease;
    cursor: default;
    vertical-align: middle;
}

.read-status-indicator:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Стили для прочитанного сообщения */
.read-status-indicator.read {
    color: #4caf50;
}

.read-status-indicator.read svg {
    stroke: #4caf50;
    fill: none;
}

/* Стили для непрочитанного сообщения */
.read-status-indicator.unread {
    color: #ff9800;
}

.read-status-indicator.unread svg {
    stroke: #ff9800;
    fill: none;
}

/* Анимация появления индикатора */
.read-status-indicator {
    animation: readStatusFadeIn 0.3s ease-out;
}

@keyframes readStatusFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}

/* Стили для контейнера времени с индикатором */
.chat-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .read-status-indicator {
        margin-left: 4px;
    }
    
    .read-status-indicator svg {
        width: 14px;
        height: 14px;
    }
}

.chat-message:hover .chat-actions {
    opacity: 1;
}

.chat-action-btn {
    background: none;
    border: 1px solid #ddd;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    transform: scale(0.95);
    opacity: 0.8;
}

.chat-actions:hover .chat-action-btn {
    transform: scale(1);
    opacity: 1;
}

.chat-action-btn:hover {
    background: #f0f0f0;
    outline: 2px solid #bbb;
    outline-offset: 1px;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.edit-message-btn:hover {
    background: #e3f2fd;
    outline: 2px solid #1976d2;
    color: black;
}

.delete-message-btn:hover {
    background: #ffebee;
    outline: 2px solid #d32f2f;
    color: black;
}

/* Стили для лайков */
.like-button {
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
}

.like-button:hover svg {
    fill: #ff6b6b !important;
    transform: scale(1.1);
}

.like-button svg {
    transition: all 0.2s ease;
    width: 18px;
    height: 18px;
}

.like-button:active svg {
    transform: scale(1.2);
}

.like-button.liked svg {
    fill: #cc5500 !important;
}

.like-button.liked .like-count {
    color: #cc5500;
}

.like-count {
    font-size: 13px;
    font-weight: 500;
    color: #666;
}

.like-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
}

.like-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
}

.like-tooltip.show {
    opacity: 1;
    outline: 2px solid #d32f2f;
    color: #d32f2f;
}

/* Типы сообщений */

/* Все сообщения слева */
.message-left {
    align-self: flex-start;
}

.message-left .chat-message-container {
    margin-left: 0;
}

/* Чужие сообщения (по умолчанию) */
.message-left .chat-message-text {
    background: #fff3e0;
    border: 1px solid #ffcc02;
    color: #333333;
}

.message-left .chat-time {
    color: #666666;
}

/* Свои сообщения */
.message-left.message-own .chat-message-text {
    background: #ffffff;
    color: #333333;
    border: 1px solid #e0e0e0;
}

.message-left.message-own .chat-time {
    color: #666666;
}

/* Сообщение от куратора (дополнительные стили) */
.message-left.message-curator .chat-message-text {
    background: #fff3e0;
    border: 1px solid #ffcc02;
    color: #333333;
}

.message-left.message-curator .chat-time {
    color: #666666;
}

.message-left.message-curator .chat-username {
    color: #888;
}

/* Свои сообщения от куратора */
.message-left.message-own.message-curator .chat-message-text {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    color: #333333;
}

/* Форма отправки сообщения */
.chat-form {
    background: transparent;
    border: none;
    animation: fadeInUp 0.4s ease-out;
    transition: transform 0.2s ease;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-form:hover {
    transform: translateY(-1px);
}

.chat-form-renderer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Аватар автора */
.chat-author-thumbnail {
    flex-shrink: 0;
}

.chat-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
}

/* Контейнер ввода */
.chat-input-container {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Обертка для инпута с кнопками */
.chat-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
}

/* Поле ввода */
.chat-input {
    flex: 1;
    min-height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    line-height: 1.4;
    color: #333333;
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-input:empty:before {
    content: attr(placeholder);
    color: #999;
    pointer-events: none;
}

/* Контейнер для инлайн кнопок */
.chat-input-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

/* Инлайн кнопка смайликов */
.chat-emoji-btn-inline {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.chat-emoji-btn-inline svg {
    width: 18px;
    height: 18px;
    fill: #666;
}

/* Инлайн кнопка загрузки картинок */
.chat-image-btn-inline {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.2s ease;
}

.chat-image-btn-inline:hover {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

.chat-image-btn-inline svg {
    width: 18px;
    height: 18px;
    fill: #666;
    transition: fill 0.2s ease;
}

.chat-image-btn-inline:hover svg {
    fill: #4CAF50;
}

/* Инлайн кнопка отправки */
.chat-submit-btn-inline {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.chat-submit-btn-inline:disabled {
    cursor: not-allowed;
}

.chat-submit-btn-inline img {
    width: 16px;
    height: 16px;
}

.chat-submit-btn-inline:disabled img {
    filter: grayscale(100%);
    opacity: 0.5;
}

/* Смайлики в поле ввода */
.chat-input img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 0 2px;
}

/* Старые стили для нижнего ряда - скрыты */
.chat-bottom-row {
    display: none !important;
}

.chat-buttons {
    display: none !important;
}

/* Старые кнопки - скрыты */
.chat-submit-btn,
.chat-cancel-btn {
    display: none !important;
}

/* Старые стили кнопок - удалены, так как используются новые инлайн кнопки */


.chat-emoji-btn {
    display: none;
}

/* Контейнер смайликов для сообщений */
.chat-emoji-container {
    position: relative;
    display: inline-block;
}

.chat-emoji-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-emoji-btn:hover {
    background-color: rgba(255, 169, 75, 0.1);
}

.chat-emoji-btn svg {
    fill: #666;
    transition: fill 0.2s ease;
}

.chat-emoji-btn:hover svg {
    fill: #ffa94b;
}

/* Панель смайликов */
.chat-emoji-container .chat-emoji-panel {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
}

.chat-emoji-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    width: 354px;
    min-height: 200px;
    background-image: url('/assets/components/diary/images/smile-back.jpg');
    background-size: cover;
    background-position: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    animation: panelFadeIn 0.3s ease-out;
}

@keyframes panelFadeIn {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



.emoji-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 20px;
    min-width: 315px;
    min-height: 200px;
    justify-content: center;
    z-index: 9998;
}

.emoji-option {
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    padding: 4px;
    position: relative;
}

.emoji-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.emoji-option:hover::before {
    transform: scale(1);
}

.emoji-option:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Состояния загрузки и ошибок */
.loading-chat,
.error-chat,
.no-messages {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #666666;
    font-size: 14px;
}

.loading-chat {
    background: #f8f9fa;
}

.error-chat {
    background: #ffebee;
    color: #d32f2f;
}

.no-messages {
    background: #f8f9fa;
    font-style: italic;
}

/* Заглушка для формы */
.chat-form-placeholder {
    height: 0;
    overflow: hidden;
}

/* Стили для модального окна изображений */
.image-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
}

.image-modal {
    position: relative !important;
    max-width: 95% !important;
    max-height: 95% !important;
    min-width: 300px !important;
    min-height: 200px !important;
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 1000000 !important;
}

.image-modal-header {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1000001 !important;
}

.image-modal-close {
    background: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
}

.image-modal-close:hover {
    background: rgba(0, 0, 0, 0.7) !important;
}

.modal-image {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Адаптивность */
@media (max-width: 768px) {
    .chat-messages-container {
        padding: 12px;
        max-height: 300px;
    }
    
    .chat-message-container {
        max-width: 95%;
    }
    
    .chat-user-photo,
    .chat-avatar-img {
        width: 32px;
        height: 32px;
    }
    
    .chat-form {
        padding: 12px;
    }
    
    .chat-emoji-panel {
        width: 240px;
        right: -40px;
    }
    
    /* Адаптивные стили для модального окна */
    .image-modal {
        max-width: 98% !important;
        max-height: 98% !important;
        min-width: 280px !important;
        min-height: 180px !important;
    }

}

@media (max-width: 480px) {
    .chat-message-container {
        max-width: 100%;
        gap: 8px;
    }
    
    .chat-form-renderer {
        gap: 8px;
    }
    
    .chat-emoji-panel {
        width: 200px;
        right: -60px;
    }
    

    
    .emoji-option {
        width: 28px;
        height: 28px;
    }
}

/* Заглушка для пустых сообщений */
.empty-message-placeholder {
    color: #999;
    font-style: italic;
    font-size: 13px;
    opacity: 0.7;
}

/* Кастомный скролл для модальных окон */
.comment-modal-body {
    /* Webkit браузеры (Chrome, Safari, Edge) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 136, 0, 0.6) rgba(240, 240, 240, 0.3);
}

.comment-modal-body::-webkit-scrollbar {
    width: 8px;
}

.comment-modal-body::-webkit-scrollbar-track {
    background: rgba(240, 240, 240, 0.3);
    border-radius: 10px;
    margin: 4px 0;
}

.comment-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 136, 0, 0.8) 0%, rgba(255, 136, 0, 0.6) 100%);
    border-radius: 10px;
    border: 1px solid rgba(255, 136, 0, 0.2);
    transition: all 0.3s ease;
}

.comment-modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 136, 0, 1) 0%, rgba(255, 136, 0, 0.8) 100%);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 136, 0, 0.3);
}

.comment-modal-body::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, rgba(230, 120, 0, 1) 0%, rgba(230, 120, 0, 0.9) 100%);
}

.comment-modal-body::-webkit-scrollbar-corner {
    background: transparent;
}

/* Универсальный кастомный скролл для всех контейнеров чата */
.chat-messages-container,
.chat-container {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(25, 118, 210, 0.6) rgba(240, 240, 240, 0.3);
}

.chat-messages-container::-webkit-scrollbar,
.chat-container::-webkit-scrollbar {
    width: 6px;
}

.chat-messages-container::-webkit-scrollbar-track,
.chat-container::-webkit-scrollbar-track {
    background: rgba(240, 240, 240, 0.2);
    border-radius: 8px;
    margin: 2px 0;
}

.chat-messages-container::-webkit-scrollbar-thumb,
.chat-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(25, 118, 210, 0.7) 0%, rgba(25, 118, 210, 0.5) 100%);
    border-radius: 8px;
    border: 1px solid rgba(25, 118, 210, 0.2);
    transition: all 0.3s ease;
}

.chat-messages-container::-webkit-scrollbar-thumb:hover,
.chat-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(25, 118, 210, 0.9) 0%, rgba(25, 118, 210, 0.7) 100%);
    transform: scale(1.2);
    box-shadow: 0 2px 6px rgba(25, 118, 210, 0.3);
}

/* Стили для индикатора печати */
.typing-indicator-wrapper {
    padding: 5px 0;
    min-height: 20px;
}

.typing-indicator-container {
    padding: 8px 16px;
    background: transparent;
    border-top: none;
    min-height: 40px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.typing-indicator-container.hidden {
    display: none;
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6c757d;
}

.typing-dots {
    display: flex;
    gap: 2px;
}

.typing-dots .dot {
    width: 6px;
    height: 6px;
    background: #6c757d;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.typing-text {
    font-style: italic;
}

/* Темная тема (опционально) */
@media (prefers-color-scheme: dark) {
    .chat-container {
        background: #1e1e1e;
        color: #ffffff;
    }
    
    .chat-messages-container {
        background: #2d2d2d;
    }
    
    .chat-message-text {
        background: #3d3d3d;
        border-color: #555555;
        color: #ffffff;
    }
    
    .message-left .chat-message-text {
        background: #3d3d3d;
        border-color: #555555;
    }
    
    .message-left.message-curator .chat-message-text {
        background: #4a3728;
        border-color: #8d6e63;
    }
    
    .chat-form {
        background: #1e1e1e;
        border-color: #555555;
    }
    
    .chat-input {
        background: #3d3d3d;
        border-color: #555555;
        color: #ffffff;
    }
    
    .chat-input:focus {
        border-color: #ff8800;
    }
    
    .chat-emoji-panel {
        background: #2d2d2d;
        border-color: #555555;
    }
    
    /* Стили индикатора печати для темной темы */
    .typing-indicator-container {
        background: transparent;
    }
    
    .typing-indicator {
        color: #adb5bd;
    }
    
    .typing-dots .dot {
        background: #adb5bd;
    }
}

/* Стили для изображений в сообщениях */
.chat-message-image {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0;
}

.chat-message-image img {
    max-width: 500px;
    max-height: 200px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e0e0e0;
    object-fit: cover;
}

.chat-message-image img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chat-message-image svg {
    flex-shrink: 0;
    margin-top: 4px;
    color: #666;
    transition: color 0.2s ease;
}

.chat-message-image:hover svg {
    color: #4CAF50;
}

/* Контейнер изображения с превью */
.chat-image-container {
    position: relative;
    display: inline-block;
    margin: 8px 0;
}



/* Стили для медиа контента в сообщениях */
.chat-message-image {
    margin: 8px 0;
}

.chat-image {
    max-width: 500px;
    max-height: 400px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    object-fit: cover;
    display: block;
}

.chat-message-video video {
    max-width: 300px;
    max-height: 200px;
    border-radius: 8px;
    margin: 8px 0;
}

.chat-message-audio audio {
    width: 100%;
    max-width: 300px;
    margin: 8px 0;
}

.chat-message-audio div {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.chat-message-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin: 8px 0;
    background: #f9f9f9;
}

.chat-file-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* Адаптивные стили для медиа контента */
@media (max-width: 768px) {
    .chat-image {
        max-width: 300px;
        max-height: 250px;
    }
    
    .chat-message-video video {
        max-width: 250px;
        max-height: 150px;
    }
    
    .chat-message-audio audio {
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .chat-image {
        max-width: 250px;
        max-height: 200px;
    }
    
    .chat-message-video video {
        max-width: 200px;
        max-height: 120px;
    }
    
    .chat-message-audio audio {
        max-width: 200px;
    }
}

/* Стили для SVG иконок */
.chat-svg-icon {
    pointer-events: none;
    display: inherit;
    width: 100%;
    height: 100%;
}

/* Стили для панели эмодзи */
.chat-emoji-panel {
    display: none;
}

/* Стили для записи голосовых сообщений */
.voice-recording-icon {
    fill: #ff4444;
}

.voice-duration {
    font-size: 12px;
    margin-left: 4px;
}

/* ========================================
   СТИЛИ ДЛЯ ЦИТИРОВАНИЯ И ОТВЕТОВ
======================================== */

/* Цитата в сообщении */
.chat-quote-container {
    display: flex;
    margin-bottom: 8px;
    max-width: 100%;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 8px;
    border-left: 4px solid var(--main, #ff7700);
}

.chat-quote-line {
    width: 3px;
    background: var(--main, #ff7700);
    margin-right: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.chat-quote-content {
    flex: 1;
    min-width: 0;
}

.chat-quote-text {
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    font-style: italic;
    word-break: break-word;
    cursor: pointer;
    transition: color 0.2s;
}

.chat-quote-text:hover {
    color: var(--main, #ff7700);
}

/* Блок цитирования в форме ответа */
.reply-quote-container {
    background: #f8f9fa;
    border-left: 4px solid var(--main, #ff7700);
    border-radius: 0 6px 6px 0;
    margin-bottom: 12px;
    padding: 10px 12px;
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.reply-quote-content {
    position: relative;
}

.reply-quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.reply-quote-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--main, #ff7700);
    text-transform: uppercase;
}

.reply-quote-close {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.reply-quote-close:hover {
    background: #e9ecef;
    color: #666;
}

.reply-quote-text {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    font-style: italic;
    word-break: break-word;
}

/* Кнопка ответить */
.reply-message-btn {
    background: none;
    border: 1px solid #ddd;
    color: #666;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 4px;
}

.reply-message-btn:hover {
    background: #f8f9fa;
    border-color: var(--main, #ff7700);
    color: var(--main, #ff7700);
}

/* Выделяемый текст в сообщениях */
.chat-message-text-content {
    user-select: text;
    cursor: text;
    position: relative;
}

.chat-message-text-content:hover::after {
    content: "Выделите текст для ответа";
    position: absolute;
    bottom: -25px;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    animation: fadeInTooltip 0.3s ease-out 1s forwards;
    pointer-events: none;
}

@keyframes fadeInTooltip {
    to {
        opacity: 1;
    }
}

.chat-message-text-content::selection {
    background: rgba(255, 119, 0, 0.3);
    color: inherit;
}

.chat-message-text-content::-moz-selection {
    background: rgba(255, 119, 0, 0.3);
    color: inherit;
}

/* Стили для контейнера ответов */
.reply-container {
    display: none;
    margin-top: 8px;
    padding: 12px;
    background: #fff8f0;
    border-radius: 8px;
    border: 1px solid #ffcc02;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.reply-input-container {
    margin-top: 8px;
}

.reply-input {
    width: 100%;
    min-height: 40px;
    max-height: 120px;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    color: #333333;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    resize: vertical;
    overflow-y: auto;
}

.reply-input:focus {
    border-color: #ffcc02;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 204, 2, 0.2);
}

.reply-input:empty::before {
    content: attr(placeholder);
    color: #999999;
    pointer-events: none;
}

.reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.reply-send-btn, .reply-cancel-btn {
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reply-send-btn {
    background: #ffcc02;
    color: #333333;
    border-color: #ffcc02;
    font-weight: 600;
}

.reply-send-btn:hover {
    background: #e6b300;
    transform: translateY(-1px);
}

.reply-cancel-btn {
    color: #666666;
    border-color: #e0e0e0;
    background: #fff;
}

.reply-cancel-btn:hover {
    background: #f5f5f5;
    color: #333333;
}

.reply-quote-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.reply-quote-close:hover {
    color: rgba(255, 95, 95, 0.8);
    transform: scale(1.1);
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .chat-quote-container {
        padding: 6px;
    }
    
    .chat-quote-text {
        font-size: 12px;
    }
    
    .reply-quote-container {
        padding: 8px 10px;
    }
    
    .reply-quote-text {
        font-size: 12px;
    }
    
    .reply-container {
        padding: 8px;
    }
    
    .reply-input {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .reply-actions {
        gap: 6px;
    }
    
    .reply-send-btn, .reply-cancel-btn {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* Стили для системы ответов к сообщениям */
.message-replies-section {
    margin-top: 8px;
}

.replies-toggle-btn {
    background: #fff3e0;
    border: 1px solid #ffcc02;
    color: #333333;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.replies-toggle-btn:hover {
    background: #ffe0b3;
    color: #333333;
}

.message-replies-list {
    padding-left: 16px;
    border-left: 2px solid #ffcc02;
}

.message-reply {
    margin-bottom: 12px;
    padding: 8px;
    background: #fff8f0;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.reply-author {
    font-weight: 600;
    font-size: 13px;
    color: #ff6600;
}

.reply-time {
    font-size: 11px;
    color: #666666;
}

.reply-quote {
    margin: 4px 0;
    padding: 4px 8px;
    background: #f0f0f0;
    border-left: 3px solid #ffcc02;
    border-radius: 4px;
}

.reply-quote-text {
    font-size: 12px;
    color: #666666;
    font-style: italic;
}

.reply-text {
    font-size: 14px;
    line-height: 1.4;
    color: #333333;
}

.no-replies {
    padding: 8px;
    text-align: center;
    color: #999999;
    font-size: 13px;
    font-style: italic;
}

/* Стили для формы быстрого ответа */
.quick-reply-form {
    margin-top: 12px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.quick-reply-form .reply-input {
    min-height: 32px;
    margin-bottom: 8px;
}

/* Адаптивные стили для ответов */
@media (max-width: 768px) {
    .message-replies-list {
        padding-left: 12px;
    }
    
    .message-reply {
        padding: 6px;
        margin-bottom: 8px;
    }
    
    .replies-toggle-btn {
        padding: 3px 6px;
        font-size: 11px;
    }
    
    .reply-author {
        font-size: 12px;
    }
    
    .reply-time {
        font-size: 10px;
    }
    
    .reply-text {
        font-size: 13px;
    }
}

/* Кнопки действий для ответов */
.reply-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
    align-items: flex-end;
}

.reply-edit-btn, .reply-delete-btn {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f9fa;
    color: #333;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
}

.reply-edit-btn:hover {
    background: #e3f2fd;
    border-color: #2196f3;
    color: #1976d2;
}

.reply-delete-btn:hover {
    background: #ffebee;
    border-color: #f44336;
    color: #d32f2f;
}

.reply-edit-btn:active, .reply-delete-btn:active {
    transform: scale(0.95);
}

/* Контейнер заголовка ответа */
.reply-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}

.reply-header .reply-actions {
    flex-shrink: 0;
}

/* Форма редактирования ответа */
.reply-edit-container {
    margin: 8px 0;
}

.reply-edit-input {
    width: 100%;
    min-height: 60px;
    padding: 8px 12px;
    border: 2px solid #ffcc02;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
    outline: none;
    font-family: inherit;
}

.reply-edit-input:focus {
    border-color: #ff9800;
    box-shadow: 0 0 0 2px rgba(255, 204, 2, 0.2);
}

.reply-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}

.reply-save-btn, .reply-cancel-btn {
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reply-save-btn {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
}

.reply-save-btn:hover {
    background: #45a049;
    border-color: #45a049;
}

.reply-cancel-btn {
    background: #f44336;
    color: white;
    border-color: #f44336;
}

.reply-cancel-btn:hover {
    background: #da190b;
    border-color: #da190b;
}