.icms-group-chat { --bg:#f6f7fb; --card:#ffffff; --text:#1b2330; --muted:#6b7280; --brand:#3b82f6; --mine:#e8f0ff; --they:#f3f4f6; --danger:#ef4444; --ok:#16a34a; --border:#e5e7eb; --shadow:0 10px 30px rgba(0,0,0,.06); }
.icms-group-chat{background:var(--bg); color:var(--text); border-radius:18px; box-shadow:var(--shadow); overflow:hidden;}
.icms-gc-header{display:flex; align-items:center; gap:12px; padding:14px 16px; background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); border-bottom:1px solid var(--border);}
.icms-gc-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 6px rgba(22,163,74,.12);}
.icms-gc-title{font-weight:700; font-size:16px;margin:0;padding:0}
.icms-gc-sub{margin-left:auto; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:10px;}
.icms-gc-body{display:flex; flex-direction:column; height:56vh; min-height:360px;}
.icms-gc-list{flex:1; overflow-y:auto;overflow-x: hidden;padding:16px; background:
  radial-gradient(1200px 300px at 100% 0, rgba(59,130,246,.06), transparent),
  radial-gradient(800px 300px at 0 100%, rgba(99,102,241,.06), transparent);
  position: relative;
}
.icms-gc-day{position:sticky; top:8px; display:inline-block; margin:6px auto 14px; padding:4px 10px; background:var(--card); border:1px solid var(--border); color:var(--muted); font-size:12px; border-radius:999px;}
.icms-gc-msg{display:flex; gap:10px; margin:8px 0; align-items:flex-end;margin-bottom: 10px;position: relative;transition: background 0.2s;}
.icms-gc-msg.mine{flex-direction:row-reverse;}
.icms-gc-avatar {
    width: 36px;
    height: 36px;
    margin-right: 8px;
	position:relative
}
.icms-gc-avatar img, .icms-gc-avatar .icms-profile-avatar__default.avatar__inlist{
	border-radius: 50%;
    border: 3px solid #ffffff;
    padding: 0;
    width: 38px;
    height: 38px;
    max-width: none;
    background: #fff;
}
.icms-gc-bubble{max-width:80%; padding:10px 12px; border-radius:14px; background:var(--they); border:1px solid var(--border); position:relative;}
.icms-gc-msg.mine .icms-gc-bubble{background:var(--mine);}
.icms-gc-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    font-size: 12px;
    color: #555;
}

.icms-gc-name {
    font-weight: bold;
    margin-right: 6px;
}

.icms-gc-time {
    font-style: italic;
    color: #888;
	cursor: default
}

.icms-gc-text {
    font-size: 14px;
    color: #222;
}
.icms-gc-audio{
	display: flex;
	gap:5px;
	align-items: center;
}
.icms-gc-audio .waveform{
	width: 200px
}
.icms-gc-composer{border-top:1px solid var(--border); background:var(--card); padding:12px; display:flex; gap:10px; align-items:flex-end;align-items: center;}
.gc-textarea{flex:1;min-height:42px; max-height:160px; padding:0; border:1px solid var(--border); background:transparent; color:var(--text); border-radius:12px; width:100%;position:relative}
#markItUpContent.markItUp{margin:0}
#markItUpContent.markItUp .markItUpContainer{position: relative;}
#markItUpContent.markItUp .markItUpHeader{position: absolute;right: 0;}
#markItUpContent.markItUp .markItUpHeader .smilepanel{
	position: absolute;
    bottom: 33px;
    right: 10px;
    width: 250px;
    max-height: 300px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px 6px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0px -3px 7px 1px rgb(0 0 0 / 6%) inset;
    overflow: auto;
	z-index: 2;
}
#markItUpContent.markItUp .markItUpHeader .smilepanel img{max-width: 50px;}
#markItUpContent.markItUp .markItUpHeader ul li{border-radius: 0 12px;}
#markItUpContent.markItUp .markItUpHeader ul li:hover{background: none;color:#ff6534}
#markItUpContent.markItUp textarea{
	flex: 1;
    resize: none;
    min-height: 42px;
    max-height: 160px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    border-radius: 0;
    outline: none;
    height: 42px;
    width: 100%;
	overflow: hidden;
}
#markItUpContent.markItUp textarea:focus, #markItUpContent.markItUp textarea:hover, #markItUpContent.markItUp textarea:active, .icms-gc-audio button:focus, .icms-gc-audio button:hover, .icms-gc-audio button:active,.gc-attach .btn{
	box-shadow: none;
}
#markItUpContent.markItUp textarea::-webkit-scrollbar {display: none;}
#markItUpContent.markItUp textarea {
	&::-webkit-scrollbar {
		display: none;
	}
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-left: 45px;
}
.icms-gc-btn {width: 40px;height: 40px;transition: all 0.25s ease-in-out;}
.icms-gc-btn span {
  display: inline-block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.icms-gc-btn.switching span {
  transform: scale(0.6);
  opacity: 0;
}
.icms-gc-btn[disabled]{opacity:.6; cursor:not-allowed;}
.icms-gc-btn .icon {
    font-size: 16px;margin-left:-1px
}
.icms-gc-empty{display:grid; place-items:center; height:100%; color:var(--muted); font-size:14px;}
.icms-gc-badge{display:inline-flex; gap:6px; align-items:center;}
.icms-gc-badge .ping{width:7px;height:7px;border-radius:50%;background:var(--ok); box-shadow:0 0 0 6px rgba(22,163,74,.12);margin-right: 5px;}
.icms-gc-badge #gc-status{margin-top: -2px}
.icms-gc-badge.is_offline .ping, .icms-gc-dot.is_offline{background: #a31616;box-shadow: 0 0 0 6px rgb(163 22 22 / 12%);}
.icms-gc-btn .icon.icon-location-arrow{
	transform: rotate(44deg);
    margin-left: -2px;
}
.gc-attach{
	position: absolute;
    top: 50%;
    left: 20px;
    transform: translate(-50%, -50%);
    border-radius: 9px;
	z-index: 2;
}

.icms-gc-delete {
  position: absolute;
  right: 0px;
  top: 51%;
  transform: translateX(-60%) translateY(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  cursor: pointer;
  color: red;
  font-weight: bold;
  border: none;
  font-size: 27px;
  background: #ffffff;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icms-gc-msg.mine .icms-gc-delete{
	transform: translateX(60%) translateY(-50%);
}

.icms-gc-msg:hover .icms-gc-delete {
	transform: translateX(0) translateY(-50%);
	opacity: 1;
	will-change: transform, opacity;
}

.icms-gc-msg.skeleton {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  px; */
  position: relative;
  overflow: hidden;
}

/* Аватар-заглушка */
.icms-gc-msg.skeleton .avatar-skeleton {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
  margin-top: auto;
}

/* Основной блок-заглушка (текст) */
.icms-gc-msg.skeleton .bubble-skeleton {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 60%;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--they);
  border: 1px solid var(--border);
  position: relative;
  gap: 7px;
}

.icms-gc-msg.skeleton .line-skeleton {
  height: 10px;
  background: #ddd;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

/* Анимация «волны» */
.icms-gc-msg.skeleton .line-skeleton::before,
.icms-gc-msg.skeleton .avatar-skeleton::before {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  animation: wave 1.5s infinite;
}

.icms-gc-msg.mine.skeleton .line-skeleton::before,
.icms-gc-msg.mine.skeleton .avatar-skeleton::before {
	animation: wave_recursive 1.5s infinite;
}

@keyframes wave {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(150%); }
}

@keyframes wave_recursive {
  100% { transform: translateX(-150%); }
  0% { transform: translateX(150%); }
}

.chats_photos_box .qq-upload-drop-area, .chats_files_box .qq-upload-drop-area{
	border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 20px 10px;
    color: #888;
	display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.chats_photos_box .qq-upload-drop-area .icms-svg-icon, .chats_files_box .qq-upload-drop-area .icms-svg-icon{font-size: 32px;margin-bottom: 10px;}
.chats_photos_box .qq-upload-drop-area-active, .chats_files_box .qq-upload-drop-area-active{border-color: #4da96f;color: #276f42;}
.chats_group_btn{
	margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: center;
}
.chats_group_btn .qq-upload-button{}
.chats_group_btn .chats_or_text{}
.chats_group_btn #chats_add_photo_link{}
.qq-upload-list{
    padding: 0;
    margin: 0;
    list-style: none;
	z-index: 2;
    position: relative;
}
.qq-upload-list li{
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
	padding: 6px;
    margin: 15px 0 0;
	border-left: 3px solid #df6814;
}
.qq-upload-list li .qq-upload-file{
    border-right: 1px dotted #ddd;
    padding-right: 10px;
}
.qq-upload-list li .qq-upload-spinner{}
.qq-upload-list li .qq-upload-size{
    border-right: 1px dotted #ddd;
    padding-right: 10px;
}
.qq-upload-list li .qq-upload-cancel, .qq-upload-list li .qq-upload-failed-text{
    display: none;
}
.qq-upload-spinner {display:inline-block;background: url("../img/loading.gif") 0 5px no-repeat;width:15px;height: 23px;}
.chats_uploaded_photos, .chats_uploaded_files{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
}
.chats_uploaded_photos.hide, .chats_uploaded_files.hide, .chats_send_btn.hide{display: none;}
.chats_send_btn{margin-top: 15px;text-align: right;}
.chats_uploaded_photo, .chats_uploaded_file{
    display: flex;
    gap: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 3px;
    align-items: center;
}
.chats_uploaded_photo img{
    width: 40px;
    height: 40px;
}
.chats_uploaded_file .icms-svg-icon{
    font-size: 28px;
}
.chats_uploaded_info{
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    line-height: 16px;
    font-size: 14px;
}
.chats_uploaded_delete{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: 6px;
}
.chats_photo_gallery img{width:100%}
.chats_photo_gallery {display: flex;flex-flow: row wrap;gap: 5px;}
.chats_photo_gallery .second_type_images {margin: 0;}

.spinner2 {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.spinner2 span {
  width: 10px;
  height: 10px;
  background: #3498db;
  border-radius: 50%;
  animation: bounce2 0.6s infinite alternate;
}
.spinner2 span:nth-child(2) { animation-delay: 0.2s; }
.spinner2 span:nth-child(3) { animation-delay: 0.4s; }

.chats_files_box #gc-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(255 255 255 / 90%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.chats_files_box #gc-loader.hide {display:none}
.chats_files_box #gc-loader .spinner2 span {width: 20px;height: 20px;}
.chats_message_files{}
.chats_message_files a{
	display: flex;
	gap: 5px;
	align-items: center;
	border-left: 2px dotted #3867d6;
	margin-bottom: 4px;
	padding: 2px;
}
.chats_message_files a:hover{text-decoration:none}
.chats_message_files a .icms-svg-icon{
    font-size: 34px;
}
.chats_message_files a > span{
    display: flex;
    flex-direction: column;
    line-height: normal;
}
.chats_message_files a > span span:first-child{
	width: 200px;
	white-space: nowrap;
	overflow: hidden; 
	text-overflow: ellipsis;
}
.chats_message_files a > span span:last-child{
    font-size: 11px;
}

.video-placeholder {
  position: relative;
  max-width: 300px;
  width: 100%;
  cursor: pointer;
  margin: 5px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.video-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: rgba(0,0,0,0.4);
}

.play-btn {
  font-size: 16px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.video-info {
  margin-top: 5px;
  font-size: 12px;
}
.gc-attach .icms-svg-icon, .icms-gc-audio .icms-svg-icon{color:#444}

@keyframes bounce2 {
  from { transform: translateY(0); opacity: 0.7; }
  to { transform: translateY(-8px); opacity: 1; }
}

@media (min-width: 992px) {
    .modal-chats {
        max-width:500px
    }
}

@media screen and (max-width: 440px) {
	.icms-gc-list{padding: 10px;}
	.icms-gc-msg{gap:3px}
	.icms-gc-avatar{margin-right: 3px}
	.chats_group_btn {gap: 6px;}
	.chats_group_btn {gap: 6px;}
	.icms-gc-bubble{max-width:85%;}
    .chats_group_btn .chats_or_text{
		padding: 0;
		display: flex;
		align-items: center;
	}
	.chats_photos_box .qq-upload-drop-area, .chats_files_box .qq-upload-drop-area{
		font-size: 14px;
	}
	.chat_photo_upload, .chat_file_upload, .chats_group_btn #chats_add_photo_link a{
		font-size: 14px;
		padding: 5px 8px;
	}
	.chats_photos_box .qq-upload-drop-area span.small, .chats_files_box .qq-upload-drop-area span.small{font-size: 11px;}
}

@media screen and (max-width: 375px) {
	.chat_photo_upload, .chat_file_upload, .chats_group_btn #chats_add_photo_link a{
		font-size: 13px
	}
}