body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            height: 100vh;
            display: flex;
        }
		
		.modal_link{
			 color: #075e54;
		}
		
		.modal_link:hover, .modal_link:active{
			 color: #075e54;
		}
		
        /* Left Sidebar (Recent Chats) */
        .left-panel {
            width: 30%;
            background-color: #fff;
            border-right: 1px solid #ddd;
            display: flex;
            flex-direction: column;
        }

        .left-panel .search-bar {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .left-panel .search-bar input {
            width: 100%;
            padding: 10px;
            border-radius: 20px;
            border: 1px solid #ccc;
        }

        .recent-chats {
            overflow-y: auto;
            flex-grow: 1;
        }

        .recent-chat {
            padding: 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .recent-chat img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin-right: 15px;
        }

        .chat-info {
            flex-grow: 1;
        }

        .chat-info h5 {
            margin: 0;
            font-weight: 500;
        }

        .chat-info p {
            margin: 5px 0 0;
            font-size: 0.9em;
            color: #666;
        }

        .chat-timestamp {
            font-size: 0.8em;
            color: #999;
        }

        /* Right Chat Window */
        .chat-window {
            width: 100%;
            display: flex;
            flex-direction: column;
			background-color: #075e54;
            position: relative;
        }

        .chat-header {
            background-color: #075e54;
            color: #fff;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
			flex-direction: column;
        }

        .chat-header img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
        }

        .chat-header .header-info {
            flex-grow: 1;
        }

        .chat-header .header-info h4 {
            margin: 0;
            font-weight: 500;
        }

        .chat-header .header-info p {
            margin: 5px 0 0;
            font-size: 0.9em;
            color: #ddd;
        }

        .chat-body {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #e5ddd5;
        }

        .message {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
			gap: 10px;
        }

        .message.sent .bubble {
            background-color: #dcf8c6;
            margin-left: auto;
        }

        .message.received .bubble {
            background-color: #fff;
            margin-right: auto;
        }
		
		.my-bubble {
            background-color: #f6e4c4 !important;
        }

        .bubble {
            max-width: 60%;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            word-wrap: break-word;
        }

        .timestamp {
            font-size: 0.75em;
            color: #999;
            margin-top: 5px;
        }

        /* Chat Input Area */
        .chat-input {
            background-color: #f0f0f0;
            padding: 15px;
            display: flex;
            align-items: center;
            border-top: 1px solid #ddd;
        }

        .chat-input input {
            flex-grow: 1;
            padding: 10px;
            border-radius: 20px;
            border: 1px solid #ccc;
        }

        .chat-input button {
            margin-left: 10px;
            background-color: #075e54;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 50%;
            font-size: 1.2em;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }			

		.container {
			margin: 20px auto;
			padding: 0;
			display: flex; 
			flex-direction: column; 
			gap: 20px;
		}

		/* Обертка для кнопок Спрос/Предложение и НАПИСАТЬ */
		.buttons-block {
			flex: 1; 
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		/* Основные кнопки Спрос/Предложение */
		.buttons-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 12px;
		}

		.btn {
			padding: 16px 20px;
			font-size: 16px;
			font-weight: 600;
			border: 2px solid transparent;
			border-radius: 12px;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			text-align: center;
		}

		.btn-demand {
			/*background: linear-gradient(135deg, #4CAF50, #45a049);*/
			background: #45a049;
			color: white;
			box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
		}

		.btn-supply {
			/*background: linear-gradient(135deg, #2196F3, #1976D2);*/
			background: #1976D2;
			color: white;
			box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
		}

		.btn:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
		}

		.btn:active {
			transform: translateY(-1px);
		}

		/* Кнопка НАПИСАТЬ */
		.btn-write {
			width: 100%;
			padding: 16px 20px;
			/*background: linear-gradient(135deg, #FF9800, #F57C00);*/
			background: #F57C00;
			color: white;
			border: 2px solid transparent;
			border-radius: 12px;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
		}

		.btn-write:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4);
		}

		.btn-write:active {
			transform: translateY(-1px);
		}

		/* Строка поиска */
		.search-section {
			background: white;
			border-radius: 12px;
			padding: 20px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
			flex: 1; /* Занимает доступное пространство */
		}

		.search-section h3 {
			margin: 0 0 15px 0;
			color: #333;
			font-size: 18px;
			text-align: left;
		}

		/* Десктопная версия - в ряд */
		.search-container {
			display: flex;
			gap: 10px;
		}

		.search-input {
			flex: 1;
			padding: 14px 18px;
			font-size: 16px;
			border: 2px solid #e0e0e0;
			border-radius: 10px;
			outline: none;
			transition: all 0.3s ease;
		}

		.search-input:focus {
			border-color: #2196F3;
			box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
		}

		.btn-search {
			padding: 14px 30px;
			background: linear-gradient(135deg, #9C27B0, #7B1FA2);
			color: white;
			border: none;
			border-radius: 10px;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow: 0 4px 15px rgba(7, 94, 84, 0.3);
			white-space: nowrap;
		}

		.btn-search:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgb(7 94 84 / 40%);
		}

		.btn-search:active {
			transform: translateY(0);
		}

		/* Десктопная версия - кнопки слева, поиск справа */
		@media (min-width: 769px) {
			.container {
				flex-direction: row; 
				align-items: flex-start; /
				gap: 20px; 
			}
			
			.buttons-block {
				flex: 2; 
				max-width: 400px; 
			}
			
			.search-section {
				flex: 1; 
				margin-top: 0; 
			}
			
			.search-section h3 {
				font-size: 16px; 
				margin-bottom: 10px;
			}
		}

		/* Мобильная версия */
		@media (max-width: 768px) {
			.buttons-grid {
				grid-template-columns: 1fr;
				gap: 10px;
			}
			
			.btn, .btn-write {
				padding: 18px 24px;
				font-size: 18px;
				border-radius: 10px;
			}

			/* Мобильная версия поиска - в колонку */
			.search-container {
				flex-direction: column;
				gap: 12px;
			}

			.search-input, .btn-search {
				padding: 16px 20px;
				font-size: 18px;
			}
		}

		/* Для очень маленьких экранов */
		@media (max-width: 480px) {
			.container {
				padding: 0;
			}
			
			.btn, .btn-write {
				padding: 20px 24px;
				font-size: 20px;
			}

			.search-input, .btn-search {
				padding: 18px 20px;
				font-size: 18px;
			}
		}		
		/*---CHAT-HEADER--*/

		/*---SUB-CHAT-HEADER-NEW-START--*/
		.chat-header {
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			margin: 0;
			padding: 0;
			background: #075e54;
			width: 100%;
		}

		.header-top {
			display: flex;
			flex-direction: column; /* По умолчанию в колонку для мобильных */
			padding: 15px 20px;
			color: white;
		}

		.header-title {
			font-size: 20px;
			font-weight: 700;
			text-align: center;
			margin-bottom: 10px;
			color: white;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}

		/* Контейнер для кнопки навигации */
		.header-toggle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 15px;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 8px;
			cursor: pointer;
			user-select: none;
			gap: 10px;
			transition: all 0.3s ease;
			border: 1px solid rgba(255, 255, 255, 0.2);
		}

		.header-toggle:hover {
			background: rgba(255, 255, 255, 0.25);
			transform: translateY(-2px);
		}

		.toggle-title {
			font-size: 16px;
			font-weight: 600;
			flex-grow: 1;
		}

		.toggle-icon {
			transition: transform 0.3s ease;
			font-size: 18px;
			font-weight: bold;
		}

		/* Для свернутого состояния */
		.chat-header.collapsed .toggle-icon {
			transform: rotate(180deg);
		}

		/* Десктопная версия - в ряд */
		@media (min-width: 769px) {
			.header-top {
				flex-direction: row; /* Меняем на ряд на десктопе */
				justify-content: center;
				align-items: center;
				padding: 15px 20px;
			}
			
			.header-title {
				margin-bottom: 0;
				text-align: left;
				font-size: 22px;
				flex-shrink: 0; /* Не сжимается */
				margin-right: 20px;
			}
			
			.header-toggle {
				flex-grow: 1; /* Занимает доступное пространство */
				max-width: 300px; 
				padding: 12px 18px;
			}
			
			.toggle-title {
				font-size: 17px;
			}
		}

		/* Мобильная версия */
		@media (max-width: 768px) {
			.header-top {
				padding: 12px 20px;
			}
			
			.header-title {
				font-size: 18px;
				margin-bottom: 12px;
			}
			
			.header-toggle {
				padding: 12px 15px;
			}
			
			.toggle-title {
				font-size: 15px;
			}
			
			.toggle-icon {
				font-size: 16px;
			}
		}

		/* Для очень маленьких экранов */
		@media (max-width: 480px) {
			.header-top {
				padding: 10px 20px;
			}
			
			.header-title {
				font-size: 16px;
			}
			
			.header-toggle {
				padding: 10px 12px;
			}
			
			.toggle-title {
				font-size: 14px;
			}
		}
		/*---SUB-CHAT-HEADER-NEW-FINISH--*/

        .chat-header.collapsed .toggle-icon {
            transform: rotate(180deg);
        }

        .header-content {
            padding: 0 20px;
            transition: all 0.3s ease;
        }

        .chat-header.collapsed .header-content {
            display: none;
        }

        .container {
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .chat-header.collapsed .container {
            opacity: 0;
            height: 0;
            overflow: hidden;
			margin: 0;
        }
      
        .buttons-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .btn {
            padding: 16px 20px;
            font-size: 16px;
            font-weight: 600;
            border: 2px solid transparent;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
        }

        .btn-demand {
            /*background: linear-gradient(135deg, #4CAF50, #45a049);*/
			background: #45a049;
            color: white;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
        }

        .btn-supply {
            /*background: linear-gradient(135deg, #2196F3, #1976D2);*/
			background: #1976D2;
            color: white;
            box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        .btn-write {
            width: 100%;
            padding: 16px 20px;
            /*background: linear-gradient(135deg, #FF9800, #F57C00);*/
			background: #F57C00;
            color: white;
            border: 2px solid transparent;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
        }

        .search-container {
            display: flex;
            gap: 10px;
        }

        .search-input {
            flex: 1;
            padding: 14px 18px;
            font-size: 16px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            outline: none;
        }

        .btn-search {
            padding: 14px 30px;
            /*background: linear-gradient(135deg, #9C27B0, #7B1FA2);*/
            background: #075e54;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }

        @media (max-width: 768px) {
            .buttons-grid {
                grid-template-columns: 1fr;
            }
            
            .search-container {
                flex-direction: column;
            }
			
			.header-content {
				padding: 20px;
				transition: all 0.3s ease;
			}
        }
		
		@media (max-width: 480px) {
			
			.header-content {
				padding: 20px;
				transition: all 0.3s ease;
			}
        }
		
		/*---MODAL-WIN--*/
		
		/*---MODAL-WIN--*/

		/* Стили модального окна */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-content {
            background: #075e54;
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #075e54;
            color: white;
            border-radius: 16px 16px 0 0;
			position: sticky;
			top: 0;
        }
		.modal-content::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		/* Для Firefox */
		.modal-content {
			scrollbar-width: none;
		}

        .modal-title {
            font-size: 20px;
            font-weight: 600;
        }

        .modal-close {
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background-color 0.3s;
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .modal-body {
            padding: 24px;
			background: #fff;
        }

        /* Стили формы */
        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }

        .form-label.required::after {
            content: " *";
            color: #ff4757;
        }

        .form-input, .form-textarea, .form-select {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .form-input:focus, .form-textarea:focus, .form-select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-textarea {
            min-height: 120px;
            resize: vertical;
        }

        /* Загрузка файлов */
        .file-upload {
            border: 2px dashed #e0e0e0;
            border-radius: 10px;
            padding: 10px 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .file-upload:hover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.05);
        }

        .file-upload-icon {
            font-size: 40px;
            color: #667eea;
            margin-bottom: 10px;
        }

        .file-upload-text {
            color: #666;
            margin-bottom: 5px;
        }

        .file-upload-hint {
            color: #999;
            font-size: 14px;
        }

        .file-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .file-preview-item {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
        }

        .file-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .file-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        /* Кнопки формы */
        .form-buttons {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .btn-submit, .btn-submit-2, .btn-submit-for-eding, .btn-submit-2-for-eding {
            flex: 1;
            padding: 16px 24px;
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-submit:hover, .btn-submit-2:hover, .btn-submit-for-eding:hover, .btn-submit-2-for-eding:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
        }

        .btn-cancel {
            flex: 1;
            padding: 16px 24px;
            background: #f5f5f5;
            color: #666;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-cancel:hover {
            background: #e0e0e0;
        }

        /* Анимации */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

        /* Адаптивность */
        @media (max-width: 768px) {
            .buttons-grid {
                grid-template-columns: 1fr;
            }
            
            .modal-content {
                width: 95%;
                max-height: 95vh;
            }
            
            .form-buttons {
                flex-direction: column;
            }
            
            .modal-body {
                padding: 20px 16px;
            }
        }

        @media (max-width: 480px) {
            .btn {
                padding: 18px 20px;
                font-size: 18px;
            }
            
            .btn-write {
                padding: 18px 20px;
                font-size: 18px;
            }
            
            .modal-header {
                padding: 16px 20px;
            }
            
            .modal-title {
                font-size: 18px;
            }
        }
		
		/* IMAGES */
		
		/* Стили для изображений в сообщении */
		.message-images {
			margin-top: 10px;
		}

		.image-grid {
			display: grid;
			gap: 4px;
			border-radius: 8px;
			overflow: hidden;
			max-width: 400px;
		}

		/* Разные конфигурации сетки */
		.grid-1 {
			grid-template-columns: 1fr;
			max-height: 400px;
		}

		.grid-2 {
			grid-template-columns: repeat(2, 1fr);
			max-height: 300px;
		}

		.grid-3 {
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(2, 1fr);
			max-height: 300px;
		}

		.grid-3 .image-item:first-child {
			grid-row: span 2;
		}

		.grid-4,
		.grid-5,
		.grid-6,
		.grid-7,
		.grid-8,
		.grid-9,
		.grid-10 {
			grid-template-columns: repeat(4, 1fr);
			grid-auto-rows: 1fr;
			max-height: 100px;
		}

		.image-item {
			position: relative;
			overflow: hidden;
			cursor: pointer;
			transition: opacity 0.2s;
		}

		.image-item:hover {
			opacity: 0.9;
		}

		.image-item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.image-counter {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.7);
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			font-weight: bold;
		}

		/* Слайдер */
		.image-slider-overlay {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.9);
			z-index: 9999;
			display: none;
			align-items: center;
			justify-content: center;
		}

		.image-slider-container {
			position: relative;
			max-width: 90vw;
			max-height: 90vh;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.slider-image-container {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
		}

		.slider-image {
			max-width: 80%;
			max-height: 80%;
			object-fit: contain;
		}

		.slider-close {
			position: absolute;
			top: 20px;
			right: 20px;
			background: rgba(0, 0, 0, 0.5);
			color: white;
			border: none;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			font-size: 24px;
			cursor: pointer;
			z-index: 10000;
			transition: background 0.3s;
		}

		.slider-close:hover {
			background: rgba(0, 0, 0, 0.8);
		}

		.slider-prev,
		.slider-next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(0, 0, 0, 0.5);
			color: white;
			border: none;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			font-size: 20px;
			cursor: pointer;
			z-index: 10000;
			transition: background 0.3s;
		}

		.slider-prev:hover,
		.slider-next:hover {
			background: rgba(0, 0, 0, 0.8);
		}

		.slider-prev {
			left: 20px;
		}

		.slider-next {
			right: 20px;
		}

		.slider-counter {
			position: absolute;
			bottom: 100px;
			left: 50%;
			transform: translateX(-50%);
			color: white;
			font-size: 16px;
			background: rgba(0, 0, 0, 0.5);
			padding: 5px 15px;
			border-radius: 20px;
		}

		.slider-thumbnails {
			position: absolute;
			bottom: 20px;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			gap: 5px;
			padding: 10px;
			overflow-x: auto;
			max-width: 100%;
		}

		.slider-thumbnail {
			width: 60px;
			height: 60px;
			object-fit: cover;
			cursor: pointer;
			opacity: 0.5;
			transition: opacity 0.3s;
			border-radius: 4px;
		}

		.slider-thumbnail.active {
			opacity: 1;
			border: 2px solid white;
		}

		/* Адаптивность */
		@media (max-width: 768px) {
			.image-grid {
				max-width: 300px;
			}
			
			.grid-4,
			.grid-5,
			.grid-6,
			.grid-7,
			.grid-8,
			.grid-9,
			.grid-10 {
				grid-template-columns: repeat(3, 1fr);
				max-height: 200px;
			}
			
			.slider-prev,
			.slider-next {
				width: 40px;
				height: 40px;
				font-size: 16px;
			}
			
			.slider-thumbnail {
				width: 40px;
				height: 40px;
			}
		}

		@media (max-width: 480px) {
			.image-grid {
				max-width: 250px;
			}
			
			.grid-2,
			.grid-3,
			.grid-4,
			.grid-5,
			.grid-6,
			.grid-7,
			.grid-8,
			.grid-9,
			.grid-10 {
				grid-template-columns: repeat(2, 1fr);
				max-height: 180px;
			}
			
			.slider-prev,
			.slider-next {
				width: 35px;
				height: 35px;
				bottom: 60px;
				top: auto;
				transform: none;
			}
			
			.slider-prev {
				left: 10px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: rgba(0, 0, 0, 0.5);
				color: white;
				border: none;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				font-size: 20px;
				cursor: pointer;
				z-index: 10000;
				transition: background 0.3s;
			}
			
			.slider-next {
				right: 10px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: rgba(0, 0, 0, 0.5);
				color: white;
				border: none;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				font-size: 20px;
				cursor: pointer;
				z-index: 10000;
				transition: background 0.3s;
			}
			
			.slider-counter {
				bottom: 80px;
			}
			
			.slider-thumbnails {
				bottom: 5px;
			}
			
			.slider-thumbnail {
				width: 30px;
				height: 30px;
			}
		}
		
		/* DOCS */
		
		.message-documents {
			margin-top: 15px;
			padding-top: 10px;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
		}

		.documents-title {
			font-size: 12px;
			color: #666;
			margin-bottom: 8px;
			font-weight: 500;
		}

		.documents-list {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.document-link {
			text-decoration: none;
			color: inherit;
			display: block;
			transition: transform 0.2s;
		}

		.document-link:hover {
			transform: translateX(3px);
		}

		.document-item {
			display: flex;
			align-items: center;
			padding: 10px;
			background: #f5f5f5;
			border-radius: 8px;
			border: 1px solid #e0e0e0;
			transition: background-color 0.2s;
		}

		.document-link:hover .document-item {
			background: #e8f4fd;
			border-color: #4da8ff;
		}

		.document-icon {
			width: 40px;
			height: 40px;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			font-size: 12px;
			font-weight: bold;
			color: white;
		}

		/* Цвета иконок для разных типов документов */
		.document-icon.pdf {
			background: #ff4757;
		}

		.document-icon.doc,
		.document-icon.docx {
			background: #2d89ef;
		}

		.document-icon.xls,
		.document-icon.xlsx {
			background: #28a745;
		}

		.document-icon.ppt,
		.document-icon.pptx {
			background: #fd7e14;
		}

		.document-icon.txt {
			background: #6c757d;
		}

		.document-icon.zip,
		.document-icon.rar {
			background: #17a2b8;
		}

		.document-icon.other {
			background: #6c757d;
		}

		.doc-ext {
			font-size: 10px;
			text-transform: uppercase;
		}

		.document-info {
			flex: 1;
			min-width: 0; /* Для корректной работы text-overflow */
		}

		.document-name {
			font-size: 14px;
			color: #333;
			font-weight: 500;
			margin-bottom: 3px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.document-size {
			font-size: 11px;
			color: #666;
		}

		.document-download-icon {
			margin-left: 10px;
			color: #4da8ff;
			font-size: 18px;
			font-weight: bold;
		}

		/* Адаптивность */
		@media (max-width: 480px) {
			.document-item {
				padding: 8px;
			}
			
			.document-icon {
				width: 35px;
				height: 35px;
				margin-right: 8px;
			}
			
			.document-name {
				font-size: 13px;
			}
		}
		
		/* EDIT AND DEL BUTTONS */
		
		.message-actions {
			display: flex;
			gap: 8px;
			margin-top: 8px;
			padding-top: 8px;
			border-top: 1px solid rgba(0,0,0,0.1);
		}

		.message-action-btn {
			background: none;
			border: none;
			cursor: pointer;
			padding: 4px;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background-color 0.2s;
			position: relative;
			min-width: 37px;
			max-width: 61px;
			height: 32px;
		}
		
		.span-margin-1{
			margin-left: 5px;
		}

		.message-action-btn:hover {
			background-color: rgba(0,0,0,0.05);
		}

		.message-action-btn .icon-edit {
			color: #666;
		}

		.message-action-btn .icon-delete {
			color: #f44336;
		}
		
		.offer-a-car-btn{
			background-color: transparent;
			border-radius: 5px;
			border: 1px solid #0000001a;
			color: #e74c3c;
		}
		
		.offer-a-car-btn:hover{
			background-color: #0000000f;			
		}

		.loading-indicator {
			/*position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;*/
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.spinner {
			width: 16px;
			height: 16px;
			border: 2px solid rgba(0,0,0,0.1);
			border-radius: 50%;
			border-top-color: #3498db;
			animation: spin 1s ease-in-out infinite;
		}

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

		.message-action-btn.loading svg {
			visibility: hidden;
		}
		
		/* CITY */
		
		.message-city {
			display: flex;
			align-items: center;
			gap: 4px;
			margin-bottom: 6px;
			padding-bottom: 4px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			font-size: 12px;
			color: #666;
			line-height: 1;
		}

		.city-icon {
			color: #888;
			flex-shrink: 0;
		}

		.city-name {
			font-weight: 500;
			color: #444;
		}

		.message-text, .message-text-offers {
			margin-top: 4px;
		}		
		
		/*---BUTTONS---*/
		
		/* Общие стили для обеих кнопок */
		.message-action-btn.like-btn,
		.message-action-btn.view-btn {
			color: #95a5a6; /* Серый цвет */
			transition: color 0.2s ease;
		}

		.message-action-btn.like-btn:hover {
			color: #e74c3c; /* Красный при наведении для сердечка */
			background-color: rgba(231, 76, 60, 0.1);
		}

		.message-action-btn.view-btn:hover {
			color: #3498db; /* Синий при наведении для глаза */
			background-color: rgba(52, 152, 219, 0.1);
		}

		/* Скрытие иконки при загрузке */
		.message-action-btn.loading .icon-like,
		.message-action-btn.loading .icon-view {
			display: none;
		}

		/* Показ индикатора загрузки */
		.message-action-btn.loading .loading-indicator {
			display: flex !important;
			align-items: center;
			justify-content: center;
		}

		/* Стили для индикатора загрузки */
		.loading-indicator {
			width: 16px;
			height: 16px;
		}

		.spinner {
			width: 12px;
			height: 12px;
			border: 2px solid #95a5a6;
			border-top-color: transparent;
			border-radius: 50%;
			animation: spin 0.8s linear infinite;
		}

		@keyframes spin {
			to { transform: rotate(360deg); }
		}
		
		/*---chat-window---*/
		
		.chat-window{
			height: 100%;
			width: 50%;
		}
		.body{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
		}
		
		@media (min-width: 768px) and (max-width: 1024px) {
			
			.chat-window{
				height: 50%;
				width: 100%;
			}
			.body{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}
			#chatHeader{
				display: flex;
				flex-direction: column;
			}
			.login-header-btn {
				position: relative !important;
				top: auto !important;
				left: auto !important;
				transform: none !important;
				z-index: 100 !important;
				margin-top: 10px;
			}
			
		}
		
		@media (max-width: 767px) {
			
			.chat-window{
				height: 50%;
				width: 100%;
			}
			.body{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}
			#chatHeader{
				display: flex;
				flex-direction: column;
			}
			.login-header-btn {
				position: relative !important;
				top: auto !important;
				left: auto !important;
				transform: none !important;
				z-index: 100 !important;
				margin-top: 10px;
			}
			
		}

		/*---login-header-btn---*/
		
		.login-header-btn {
			position: absolute;
			top: 50%;
			left: 15px;
			transform: translateY(-50%);
			z-index: 100;
		}

		.btn-login {
			background: #f5f7fa;
			color: #075e54;
			border: none;
			padding: 8px 16px;
			border-radius: 20px;
			cursor: pointer;
			font-size: 14px;
			display: flex;
			align-items: center;
			gap: 6px;
			transition: all 0.3s ease;
			box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11);
		}

		.btn-login:hover {
			transform: translateY(-2px);
			box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
		}

		.btn-login i {
			font-size: 12px;
		}

		.modal-overlay-3 {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1000;
			justify-content: center;
			align-items: center;
		}

		.modal-content-3 {
			background: white;
			border-radius: 10px;
			width: 90%;
			max-width: 400px;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
			animation: modalAppear 0.3s ease;
		}

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

		.modal-header-3 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			border-bottom: 1px solid #eee;
		}

		.modal-header-3 h3 {
			margin: 0;
			color: #333;
		}

		.modal-close-3 {
			background: none;
			border: none;
			font-size: 24px;
			cursor: pointer;
			color: #999;
			line-height: 1;
		}

		.modal-close-3:hover {
			color: #333;
		}

		.modal-body-3 {
			padding: 20px;
		}

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

		.form-group-3 label {
			display: block;
			margin-bottom: 5px;
			color: #555;
			font-weight: 500;
		}

		.form-control-3 {
			width: 100%;
			padding: 10px 12px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 14px;
			transition: border-color 0.3s;
			box-sizing: border-box;
		}

		.form-control-3:focus {
			outline: none;
			border-color: #667eea;
			box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		}

		.form-control-3.error {
			border-color: #e74c3c;
		}

		.error-message-3 {
			color: #e74c3c;
			font-size: 12px;
			margin-top: 5px;
			min-height: 18px;
		}

		.form-actions-3 {
			display: flex;
			gap: 10px;
			margin-top: 25px;
		}

		.btn-submit-3, .btn-cancel-3 {
			flex: 1;
			padding: 12px;
			border: none;
			border-radius: 6px;
			font-size: 14px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s;
		}

		.btn-submit-3 {
			background: #075e54;
			color: white;
		}

		.btn-submit-3:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
		}

		.btn-submit-3:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}

		.btn-cancel-3 {
			background: #f5f5f5;
			color: #666;
		}

		.btn-cancel-3:hover {
			background: #e9e9e9;
		}

		.form-message-3 {
			margin-top: 15px;
			padding: 10px;
			border-radius: 6px;
			font-size: 14px;
			text-align: center;
		}

		.form-message-3.success {
			background: #d4edda;
			color: #155724;
			border: 1px solid #c3e6cb;
		}

		.form-message-3.error {
			background: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
		}
		
		/*---*/
		
		.error-message-3 {
			color: #dc3545;
			font-size: 0.875rem;
			margin-top: 0.25rem;
			min-height: 1.25rem;
		}

		.form-control-3.error {
			border-color: #dc3545;
			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
		}

		.form-control-3:focus.error {
			border-color: #dc3545;
			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
		}
		
		/*---*/
		
		/*---333---*/
		/*---login-header-btn---*/

		.modal-overlay-333 {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1000;
			justify-content: center;
			align-items: center;
		}

		.modal-content-333 {
			background: white;
			border-radius: 10px;
			width: 90%;
			max-width: 400px;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
			animation: modalAppear 0.3s ease;
		}

		.modal-header-333 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			border-bottom: 1px solid #eee;
		}

		.modal-header-333 h3 {
			margin: 0;
			color: #333;
		}

		.modal-close-333 {
			background: none;
			border: none;
			font-size: 24px;
			cursor: pointer;
			color: #999;
			line-height: 1;
		}

		.modal-close-333:hover {
			color: #333;
		}

		.modal-body-333 {
			padding: 20px;
		}

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

		.form-group-333 label {
			display: block;
			margin-bottom: 5px;
			color: #555;
			font-weight: 500;
		}

		.form-control-333 {
			width: 100%;
			padding: 10px 12px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 14px;
			transition: border-color 0.3s;
			box-sizing: border-box;
		}

		.form-control-333:focus {
			outline: none;
			border-color: #667eea;
			box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		}

		.form-control-333.error {
			border-color: #e74c3c;
		}

		.error-message-333 {
			color: #e74c3c;
			font-size: 12px;
			margin-top: 5px;
			min-height: 18px;
		}

		.form-actions-333 {
			display: flex;
			gap: 10px;
			margin-top: 25px;
		}

		.btn-submit-333, .btn-cancel-333 {
			flex: 1;
			padding: 12px;
			border: none;
			border-radius: 6px;
			font-size: 14px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s;
		}

		.btn-submit-333 {
			background: #075e54;
			color: white;
		}

		.btn-submit-333:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
		}

		.btn-submit-333:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}

		.btn-cancel-333 {
			background: #f5f5f5;
			color: #666;
		}

		.btn-cancel-333:hover {
			background: #e9e9e9;
		}

		.form-message-333 {
			margin-top: 15px;
			padding: 10px;
			border-radius: 6px;
			font-size: 14px;
			text-align: center;
		}

		.form-message-333.success {
			background: #d4edda;
			color: #155724;
			border: 1px solid #c3e6cb;
		}

		.form-message-333.error {
			background: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
		}
		
		/*---*/
		
		.error-message-333 {
			color: #dc3545;
			font-size: 0.875rem;
			margin-top: 0.25rem;
			min-height: 1.25rem;
		}

		.form-control-333.error {
			border-color: #dc3545;
			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
		}

		.form-control-333:focus.error {
			border-color: #dc3545;
			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
		}
		
		/*---*/
		/*---333---*/
		
		.modal-overlay-4 {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1000;
			justify-content: center;
			align-items: center;
		}

		.modal-content-4 {
			background: white;
			border-radius: 10px;
			width: 90%;
			max-width: 400px;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
			animation: modalAppear 0.3s ease;
		}

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

		.modal-header-4 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			border-bottom: 1px solid #eee;
		}

		.modal-header-4 h3 {
			margin: 0;
			color: #333;
		}

		.modal-close-4 {
			background: none;
			border: none;
			font-size: 24px;
			cursor: pointer;
			color: #999;
			line-height: 1;
		}

		.modal-close-4:hover {
			color: #333;
		}

		.modal-body-4 {
			padding: 20px;
		}

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

		.form-group-4 label {
			display: block;
			margin-bottom: 5px;
			color: #555;
			font-weight: 500;
		}

		.form-control-4 {
			width: 100%;
			padding: 10px 12px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 14px;
			transition: border-color 0.3s;
			box-sizing: border-box;
		}

		.form-control-4:focus {
			outline: none;
			border-color: #667eea;
			box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		}

		.form-control-4.error {
			border-color: #e74c3c;
		}

		.error-message-4 {
			color: #e74c3c;
			font-size: 12px;
			margin-top: 5px;
			min-height: 18px;
		}

		.form-actions-4 {
			display: flex;
			gap: 10px;
			margin-top: 25px;
		}

		.btn-submit-4, .btn-cancel-4 {
			flex: 1;
			padding: 12px;
			border: none;
			border-radius: 6px;
			font-size: 14px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s;
		}

		.btn-submit-4 {
			background: #075e54;
			color: white;
		}

		.btn-submit-4:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
		}

		.btn-submit-4:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}

		.btn-cancel-4 {
			background: #f5f5f5;
			color: #666;
		}

		.btn-cancel-4:hover {
			background: #e9e9e9;
		}

		.form-message-4 {
			margin-top: 15px;
			padding: 10px;
			border-radius: 6px;
			font-size: 14px;
			text-align: center;
		}

		.form-message-4.success {
			background: #d4edda;
			color: #155724;
			border: 1px solid #c3e6cb;
		}

		.form-message-4.error {
			background: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
		}
		
		/*---*/
		
		.error-message-4 {
			color: #dc3545;
			font-size: 0.875rem;
			margin-top: 0.25rem;
			min-height: 1.25rem;
		}

		.form-control-4.error {
			border-color: #dc3545;
			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
		}

		.form-control-4:focus.error {
			border-color: #dc3545;
			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
		}
		
				/*---444---*/
		.modal-overlay-444 {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1000;
			justify-content: center;
			align-items: center;
		}

		.modal-content-444 {
			background: white;
			border-radius: 10px;
			width: 90%;
			max-width: 400px;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
			animation: modalAppear 0.3s ease;
		}

		.modal-header-444 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			border-bottom: 1px solid #eee;
		}

		.modal-header-444 h3 {
			margin: 0;
			color: #333;
		}

		.modal-close-444 {
			background: none;
			border: none;
			font-size: 24px;
			cursor: pointer;
			color: #999;
			line-height: 1;
		}

		.modal-close-444:hover {
			color: #333;
		}

		.modal-body-444 {
			padding: 20px;
		}

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

		.form-group-444 label {
			display: block;
			margin-bottom: 5px;
			color: #555;
			font-weight: 500;
		}

		.form-control-444 {
			width: 100%;
			padding: 10px 12px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 14px;
			transition: border-color 0.3s;
			box-sizing: border-box;
		}

		.form-control-444:focus {
			outline: none;
			border-color: #667eea;
			box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		}

		.form-control-444.error {
			border-color: #e74c3c;
		}

		.error-message-444 {
			color: #e74c3c;
			font-size: 12px;
			margin-top: 5px;
			min-height: 18px;
		}

		.form-actions-444 {
			display: flex;
			gap: 10px;
			margin-top: 25px;
		}

		.btn-submit-444, .btn-cancel-444 {
			flex: 1;
			padding: 12px;
			border: none;
			border-radius: 6px;
			font-size: 14px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s;
		}

		.btn-submit-444 {
			background: #075e54;
			color: white;
		}

		.btn-submit-444:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
		}

		.btn-submit-444:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}

		.btn-cancel-444 {
			background: #f5f5f5;
			color: #666;
		}

		.btn-cancel-444:hover {
			background: #e9e9e9;
		}

		.form-message-444 {
			margin-top: 15px;
			padding: 10px;
			border-radius: 6px;
			font-size: 14px;
			text-align: center;
		}

		.form-message-444.success {
			background: #d4edda;
			color: #155724;
			border: 1px solid #c3e6cb;
		}

		.form-message-444.error {
			background: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
		}
		
		/*---*/
		
		.error-message-444 {
			color: #dc3545;
			font-size: 0.875rem;
			margin-top: 0.25rem;
			min-height: 1.25rem;
		}

		.form-control-444.error {
			border-color: #dc3545;
			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
		}

		.form-control-444:focus.error {
			border-color: #dc3545;
			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
		}
		
		/*---для-модального меню-в-чате---*/
		#message-actions {
			background: #fff;
			border: 1px solid #ddd;
			border-radius: 6px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.15);
			z-index: 9999;
			min-width: 180px;
		}

		#message-actions .action {
			padding: 10px 14px;
			cursor: pointer;
		}

		#message-actions .action:hover {
			background: #f5f5f5;
		}
		/*---для-модального меню-в-чате---*/