/* Стили для страницы сообщений */ /* Контейнер сообщений */ .chat-messages { height: 400px; overflow-y: auto; padding: 15px; background-color: rgba(248, 249, 250, 0.8); border-radius: 0.5rem; } /* Стили для вложений в сообщениях */ .message-attachment { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 8px; margin-top: 8px; } .message-sent .message-attachment { border-top: 1px solid rgba(255, 255, 255, 0.2); } .attachment-info { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 5px; } .attachment-link { color: inherit; text-decoration: underline; word-break: break-all; } .message-sent .attachment-link { color: white; } .attachment-size { font-size: 0.75rem; opacity: 0.7; } .attachment-preview { margin-top: 8px; border-radius: 8px; overflow: hidden; } .attachment-preview img, .attachment-preview video { max-width: 100%; border-radius: 8px; display: block; } .attachment-preview audio { width: 100%; max-width: 250px; } /* Стили для сообщений */ .message { margin-bottom: 15px; max-width: 100%; } .message-sent { display: flex; justify-content: flex-end; } .message-received { display: flex; justify-content: flex-start; } .message-content { max-width: 70%; word-wrap: break-word; padding: 10px 15px; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .message-sent .message-content { background-color: var(--bs-primary); color: white; border-bottom-right-radius: 5px; } .message-received .message-content { background-color: #f1f1f1; color: #333; border-bottom-left-radius: 5px; } .message-time { font-size: 0.75rem; margin-top: 5px; text-align: right; } /* Стили для списка контактов */ .contact-list { max-height: 500px; overflow-y: auto; } .contact-item { padding: 10px 15px; border-bottom: 1px solid #eee; transition: background-color 0.2s; } .contact-item:hover { background-color: rgba(var(--bs-primary-rgb), 0.1); } .contact-item.active { background-color: rgba(var(--bs-primary-rgb), 0.2); } /* Форма отправки сообщения */ .message-form { padding: 15px; background-color: rgba(248, 249, 250, 0.8); border-radius: 0.5rem; } /* Анимация для новых сообщений */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .message { animation: fadeIn 0.3s ease-out; } /* Стили для полноэкранного просмотра медиафайлов */ .attachment-preview img, .attachment-preview video { cursor: pointer; transition: transform 0.2s ease; } .attachment-preview img:hover, .attachment-preview video:hover { transform: scale(1.05); } /* Стили для модального окна с медиафайлами */ #mediaModal .modal-body { background-color: rgba(0, 0, 0, 0.9); padding: 20px; } #mediaContent { max-width: 100%; max-height: 100vh; } #mediaContent img, #mediaContent video { max-height: 90vh; max-width: 100%; object-fit: contain; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }