#chat {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0 auto;
	overflow: hidden;
}

#chat .chats {
	height: calc(100vh - 0px);
	overflow: auto;
}

#chat .chats_search {
	padding: 0;
	border-bottom: 1px solid #EEE;
}

#chat .chats_search input {
	font-weight: 200;font-size: 14px;border: none;
}

#chat .messages {
	flex-grow: 3;
	overflow: auto;
}

#chat .messages::-webkit-scrollbar-button,
#chat .chats::-webkit-scrollbar-button {
	background-image: none;
	background-repeat:no-repeat;
	width:6px;
	height:0px
}

#chat .messages::-webkit-scrollbar-track,
#chat .chats::-webkit-scrollbar-track {
	background-color:#fff;
}

#chat .messages::-webkit-scrollbar-thumb,
#chat .chats::-webkit-scrollbar-thumb {
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background-color:#32312e;
	box-shadow:0px 1px 1px #fff inset;
	background-position:center;
	background-repeat:no-repeat;
}

#chat .messages::-webkit-resizer,
#chat .chats::-webkit-resizer{
	background-image: none;
	background-repeat:no-repeat;
	width:8px;
	height:0px
}

#chat .messages::-webkit-scrollbar,
#chat .chats::-webkit-scrollbar{
	width: 12px;
}

#chat h2 {
	white-space: nowrap;
	margin: 0px;
	height: 60px;
	text-align: center;
	font-family: 'Exo 2', sans-serif;
}

#chat h4 {
	white-space: nowrap;
	margin: 0px;
	font-size: 16px;
	color: #ccc;
	line-height: 24px;
	text-align: center;
	border-bottom: 1px solid rgba(0,0,0,.1);
	font-family: 'Exo 2', sans-serif;
}

#chat .chat_image img {
	width: 50px;
	border-radius: 16px;
	margin: 6px 10px 6px 6px;
}

#chat .chat_content {
	width: 100%;
}

#chat .chats_module {
	display: flex;
}

#chat .message_block {
	display: flex;
	flex-direction: column;
	width:550px;
	height: 100vh;
}

#chat .message.right .message_bottom {
	padding-bottom: 16px;
}

#chat .message_bottom .message_status.one, 
#chat .message.right .message_date, 
#chat .message.right .message_status {
	float: right !important;
}

#chat .message.right .message_date {
	width: 36px;
}

#chat .message.right .message_status{
	margin-top: 2px;
}


#chat .chat_header .chat_status {
	position: absolute;
	left: -68px;
	top: -4px;
}


#chat .message_description {
	padding: 10px;
	border-bottom: 1px solid #EEE;
	margin-bottom: 10px;
	font-weight:400;
	font-size: 12px;
	border-top: 1px solid #EEE;
	text-align: center;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
}

#chat .bs-callout {
	padding: 0px 10px;
    margin: 5px 0px;
    border: 1px solid #eee;
	border-left-color: #5bc0de;
    border-left-width: 5px;
    border-radius: 3px;
}

#chat .chat_status .new {
	width: 8px;
	height: 8px;
	background-color: green;
	border-radius: 50%;
	position: absolute;
	left: 50px;
	top: 10px;
}

#chat .chats_list {
	width:300px;    
	height: 100vh;
    flex-direction: column;
    display: flex;
	border-right: 1px solid rgba(0,0,0,.1);
}

#chat .chat {
	color:#000;
}

#chat .chat:hover,
#chat .chat:focus {
	color:#000;
	text-decoration: none;
}

#chat .chat .chat_block {
	display: flex;
	padding: 5px;
	border-bottom: 1px solid #ccc;
}

#chat .chat:hover .chat_block,
#chat .chat:focus .chat_block {
	background-color: #f1f2f7;
	cursor: pointer;
}

#chat .chat .chat_header {
	display: flex;
	position: relative;
}

#chat .chat .chat_name {
	font-family: 'Exo 2', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: -0.04em;
	width: 100%;
}

#chat .message {
	background: #f1f2f7;
	padding: 12px 16px;
	border-radius: 16px;
	width: 70%;
	margin: 5px;
}

#chat .message.right {
	background: #e2edfd;
	width: 70%;
	margin: 5px;
	margin-left: calc(30% - 5px);
}
#chat .message_header {
	text-align: center;
	margin: 10px 0px;
}

#chat .chat_message {
	font-size: 12px;
	width: 100%;
	padding: 0 6px 0 0;
	background: none;
	word-wrap: break-word;
	line-height: 14px;
}

#chat .message_text {
	word-break: break-word;
	line-height: 20px;
}

#chat .chat_message.blue {
	background: none;
}

#chat .one {
	width: 16px;
	height: 16px;
	opacity: 1;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuNDc1IDcuMzQ2YS43NS43NSAwIDAxMS4wNi4wMUw0LjU1IDkuNDFsNC44MjYtNS44ODZhLjc1Ljc1IDAgMDExLjE2Ljk1MmwtNS4zNTcgNi41MzJhLjc1Ljc1IDAgMDEtMS4xMTUuMDVMMS40NjQgOC40MDVhLjc1Ljc1IDAgMDEuMDExLTEuMDZ6TTcgMTBsMS0xIC41LjUgNC44NzUtNS45NzZhLjc1Ljc1IDAgMDExLjE2Ljk1MmwtNS4zNTcgNi41MzJhLjc1Ljc1IDAgMDEtMS4wMzUuMTJMNyAxMHoiIGZpbGw9IiMyMjc2RDMiLz48L3N2Zz4=);
}

#chat .zero {
	width: 16px;
	height: 16px;
	opacity: .56;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuNDc1IDcuMzQ2YS43NS43NSAwIDAxMS4wNi4wMUw0LjU1IDkuNDFsNC44MjYtNS44ODZhLjc1Ljc1IDAgMDExLjE2Ljk1MmwtNS4zNTcgNi41MzJhLjc1Ljc1IDAgMDEtMS4xMTUuMDVMMS40NjQgOC40MDVhLjc1Ljc1IDAgMDEuMDExLTEuMDZ6TTcgMTBsMS0xIC41LjUgNC44NzUtNS45NzZhLjc1Ljc1IDAgMDExLjE2Ljk1MmwtNS4zNTcgNi41MzJhLjc1Ljc1IDAgMDEtMS4wMzUuMTJMNyAxMHoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=);
}

#chat .message .message_date {
	color: rgba(0,0,0,.56);
	width: 100%;
	text-align: right;
	font-size: 12px;
}

#chat .chat .chat_date {
	color: rgba(0,0,0,.56);
	text-align: right;
	font-size: 12px;
	margin-top: 6px;
}

#chat .chat .blue .chat_date {
	color: #ccc;
}


#chat .message.right .message_date {
	color: #ccc;
}

#chat .message_form {
	background: #f1f2f7;
	border-radius: 16px;
	padding: 6px 0px;
	width: calc(100% - 6px);
	margin: 10px 3px;
}

#chat .message_input {
	display: flex;
}

#chat .client {
	margin: 5px;
	width: calc(100% - 10px);
}


#chat .back {
	position: absolute;
	margin: 5px 10px;
}

#chat .close {
	z-index: 1;
	position: absolute;
	margin-top: 8px;
	margin-left: 820px;
}

#chat textarea,
#chat textarea:hover,
#chat textarea:focus {
	padding-left: 16px;
	border: none;
	outline: none;
	overflow: hidden;
	width: 100%;
	resize:none;
	height: 30px;
	margin-top: 4px;
	margin-bottom: 0;
	background: none;
}

#chat .message_form .btn{
	background: none;
    padding: 0;
    height: auto;
    margin-left: 20px;
}

#chat .message_form .btn i {
	font-size:20px;
}

#chat input[type=file] {
	display: none;
}

#chat .message_text img {
    width: 110%;
    border-radius: 16px;
    margin-left: -16px;
}

/* 🔧 FIX: Cursor для иконки статуса прочтения (вместо inline style) */
.msg-read-status-icon {
    cursor: help !important;
}

/* Chat fade-in animation */
.chat-fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   REACTIONS (Эмодзи-реакции на сообщения)
   ============================================================================ */

/* Отступы между сообщениями - гарантируем работу Bootstrap классов */
.msg.mb-1 {
    margin-bottom: 0.5rem !important; /* 8px - legacy поддержка */
}

.msg.mb-2 {
    margin-bottom: 0.75rem !important; /* 12px - Группированные сообщения от одного пользователя */
}

.msg.mb-3 {
    margin-bottom: 1.5rem !important; /* 24px - Сообщения от разных отправителей */
}

/* Контейнер с реакциями внутри пузыря сообщения */
.reactions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}

/* Разделитель в исходящих сообщениях (на синем фоне) */
.msg--me .reactions-container {
    border-top-color: rgba(255, 255, 255, 0.2); /* Светлый разделитель для синего фона */
}

/* Кнопка реакции */
.reaction-btn {
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 14px;
    transition: all 0.2s ease;
    line-height: 1.4;
    font-weight: 500;
    cursor: pointer;
}

.reaction-btn:hover {
    transform: scale(1.08);
}

/* Активная реакция (пользователь поставил) */
.reaction-btn.btn-primary {
    background: rgba(34, 118, 211, 0.12) !important;
    border-color: #2276D3 !important;
    color: #2276D3 !important;
}

/* Неактивная реакция (другие пользователи) */
.reaction-btn.btn-outline-secondary {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.15);
    color: #6c757d;
}

.reaction-btn.btn-outline-secondary:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.25);
}

/* Emoji Picker (попап с быстрыми реакциями) */
.emoji-picker {
    display: flex; /* 🔧 FIX: flex для горизонтального размещения */
    flex-wrap: wrap; /* 🔧 FIX: Автоматический перенос */
    gap: 4px;
    width: 268px; /* 🔧 FIX: Фиксированная ширина (6 эмодзи × ~36px = 216px) */
    animation: emojiPickerSlideUp 0.15s ease-out;
}

@keyframes emojiPickerSlideUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Кнопки быстрых реакций в picker */
.emoji-quick {
    /* font-size устанавливается inline (20px) */
    padding: 6px 8px;
    border: none;
    background: transparent;
    border-radius: 8px;
    transition: all 0.15s ease;
    cursor: pointer;
    line-height: 1;
    display: inline-block; /* 🔧 FIX: inline-block для горизонтального размещения */
    flex-shrink: 0; /* 🔧 FIX: Не сжимать при flex */
}

.emoji-quick:hover {
    transform: scale(1.3);
    background: rgba(0, 0, 0, 0.05);
}

.emoji-quick:active {
    transform: scale(1.15);
}

/* Кнопка "Реакция" скрыта по умолчанию, показывается при hover */
.btnReact {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.msg:hover .btnReact {
    opacity: 1;
}

/* ============================================================================
   CLIENTS AUTOCOMPLETE (@mentions) - автокомплит клиентов для менеджеров
   ============================================================================ */

#clientsAutocomplete {
    max-width: 400px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

#clientsAutocomplete .list-group-item {
    transition: background-color 0.15s ease-in-out;
}

#clientsAutocomplete .list-group-item:hover,
#clientsAutocomplete .list-group-item.active {
    background-color: #f8f9fa;
    color: #212529;
}

#clientsAutocomplete .list-group-item.active {
    background-color: #e7f3ff;
    border-color: #0d6efd;
}

/* ============================================================================
   CLIENT PROFILE CARD - карточка профиля клиента в чате
   ============================================================================ */

/* Bootstrap стили используются по умолчанию для list-group */

/* Адаптивность для мобильных устройств */
@media (max-width: 576px) {
    #clientsAutocomplete {
        max-width: calc(100vw - 2rem);
    }
    
    .client-profile-card {
        max-width: 100% !important;
    }
}