body {
    height: 100vh; /* занимаем всю высоту видимой области */
    margin: 0;
    background: var(--color-body-bg);
    color: var(--color-body-text);
}

.f1{background-color: var(--color-primary);}  /* Фон шапки */
.f2{color: var(--text-on-primary);}            /* Текст 1 */
.f3{background-color: var(--color-sidebar-bg);}  /* Фон сайдбара */
.f4{color: var(--text-muted);}                  /* Текст 2 */
.f5{background-color: var(--color-chat-bg);}   /* Фон основного окна сообщений */
.f6{color: var(--text-accent);}                 /* Текст 3 */
.f7{background-color: var(--color-message-incoming-bg);}   /* Фон облачка сообщений */
.f8{color: var(--text-message-incoming);}      /* Текст облачка сообщений */
.f9{background-color: var(--color-divider);}    /* Цвет разделителей */
.f10{background-color: var(--color-input-bg);}   /* Фон панели ввода */
.f11{background-color: var(--color-message-outgoing-bg);}  /* Фон облачка моих сообщений */
.f12{color: var(--text-message-outgoing);}       /* Текст облачка моих сообщений */
.f13{background-color: var(--color-primary-dark);} /* Фон всплывающего сообщения */
.f14{color: var(--text-notification);}           /* Текст всплывающего сообщения */
.f15{background-color: var(--color-system-bg);}  /* Фон системного сообщения */
.f16{color: var(--text-system);}                 /* Текст системного сообщения */

.bottom-panel{
	border-top: 1px solid var(--color-divider);
}

.chat {
    background-image: url(ms-bg-2.png), linear-gradient(to bottom right, var(--color-chat-gradient-start) 0%, var(--color-chat-gradient-mid) 45%, var(--color-chat-gradient-mid) 65%, var(--color-chat-gradient-end) 100%);                      
    background-blend-mode: darken;
 
    background-repeat: repeat,no-repeat; /* первое значение для градиента, второе для картинки */
    background-size: 30%, cover;           /* размер первого фона покрывает весь контейнер, второй - занимает 20% */

   scroll-behavior: smooth;
}


.icon-mask{background-image: url(mask.png);}
.icon-redgem{background-image: url(redgem.png);}

/* ===== MESSAGE SPECIFIC STYLES ===== */

/* Цвета как в Telegram */
.bg-white {
    background-color: var(--color-tg-white);
}

.bg-blue {
    background-color: var(--color-tg-blue); /* Цвет для исходящих сообщений */
}

/* Хвостик облачка (corner) - треугольник */
.corner {
    width: 0;
    height: 0;
    background: transparent !important;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--color-message-incoming-bg);
    position: relative;
    top: 10px;
}

.corner-2 {
    width: 0;
    height: 0;
    background: transparent !important;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    border-left: 10px solid var(--color-message-outgoing-bg); /* Изменено с border-right на border-left */
    position: relative;
    top: 10px;
}

/* Основное облако сообщения */
.cloud {

}

/* Текст сообщения */
.-text {
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}



/* Аватарка */
.rounded-full {
    background-color: var(--color-avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-avatar-text);
    font-weight: bold;
}

#chats-menu .side-menu-body .c-pointer:hover{background-color: var(--color-sidebar-hover);}

/* Плашка уведомлений */

.notification{
	top:50px;
	opacity:0;
	transition: opacity 0.5s ease-in-out;
}

.notification[data-expand="1"]{
	opacity:1;
}

/* Лента сообщений */

.feed[data-visible="0"]{
	display:none;
}


/* chat */ 

.-chat {
  flex: 1 1 0%;
  min-height: 0;
}

/* Дебаг стили (можно убрать после отладки) */
.debug-outline>* { outline: 1px solid red; }

.auto-expand {
  min-height: 30px;
  max-height: 300px;
  border-radius: 4px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  outline: none;
  font-family: inherit;
  line-height: 1.2;
  background: var(--color-auto-expand-bg);
  transition: border-color 0.3s;
  border: 0px;
}
/*
.auto-expand:empty::before {
  content: attr(placeholder);
  color: var(--color-input-placeholder);
}

.auto-expand:focus {
  border-color: #007bff;
}
*/
/* панели */

.slide-panel{
	transition: height 0.3s ease-in-out;
	overflow: hidden;
	flex-shrink: 0;
}

.emojies {
  overflow-y: auto;
  height: 100px;
}

.emojies div{
  letter-spacing: 0.3em; /* Горизонтальный интервал между символами */
  line-height: 1.7; /* Вертикальный интервал (важно, если эмодзи переносятся) */
  word-wrap: break-word; /* Перенос на новую строку при необходимости */
	max-width: 900px;
	height: 100%;
}

.w-icon-profile-select div{
  letter-spacing: 0.3em; /* Горизонтальный интервал между символами */
  line-height: 1.7; /* Вертикальный интервал (важно, если эмодзи переносятся) */
  word-wrap: break-word; /* Перенос на новую строку при необходимости */
}

.slide-panel div[data-visible="0"]{
	display:none;
}

.placeholder:empty::before {
    content: attr(placeholder);
    color: var(--color-input-placeholder);
}

/* системные сообщения */

.message-sys[data-type="warn"] > div{
	background-color: var(--color-warn-bg);
}


/* общий чат */

/* Время сообщения */
#feed-0 .chat .time{
    color: var(--color-time-text);
}

#feed-0 .chat {
    background-image: url(ms-bg-1.png), linear-gradient(to bottom right, var(--color-chat-gradient-start) 0%, var(--color-chat-gradient-mid) 45%, var(--color-chat-gradient-mid) 65%, var(--color-chat-gradient-end) 100%);
    
                       
    background-blend-mode: darken;
}

#feed-0 .chat .row[data-dir="1"]
{
	background-color: var(--color-overlay-light);
}

#feed-0 .payloads-btn{
	display:none;
}

#feed-0 .actions{
	display:none;
}



div[data-color="0"]{color: var(--nick-black);}
div[data-color="1"]{color: var(--nick-red);}
div[data-color="2"]{color: var(--nick-mint);}
div[data-color="3"]{color: var(--nick-yellow);}
div[data-color="4"]{color: var(--nick-blue);}
div[data-color="5"]{color: var(--nick-pink);}
div[data-color="6"]{color: var(--nick-sky);}
div[data-color="7"]{color: var(--nick-green);}
div[data-color="8"]{color: var(--nick-lavender);}
div[data-color="9"]{color: var(--nick-cream);}

/* модальное окно */

.layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: auto;
    background-color: var(--color-modal-overlay);
}

.modal {
    animation: popEffect 0.2s ease-out;
    border-radius: 8px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-modal-border);
    overflow: hidden;
}

@keyframes popEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Анимация аякс */


.heart-container
{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.heart-icon
{
	width: 24px;
	height: 24px;
	filter: drop-shadow(0 0 5px var(--color-heart-shadow));
	transform-origin: center;
}

.heart-icon-pulse
{
	animation: heart-pulse 0.3s ease-out;
}

.heart-icon path
{
	fill: var(--color-heart);
}

.heart-wave
{
	position: absolute;
	width: 24px;
	height: 24px;
	pointer-events: none;
}

.heart-wave path
{
	fill: var(--color-heart-wave);
}

.heart-wave-animate
{
	animation: heart-wave 1.5s ease-out forwards;
}

@keyframes heart-pulse
{
	50%
	{
		transform: scale(1.2);
		filter: drop-shadow(0 0 10px rgba(255, 20, 147, 0.9));
	}
}

@keyframes heart-wave
{
	to
	{
		transform: scale(3);
		opacity: 0;
	}
}


.jump {
  animation: padding .3s ease-in-out 1;
  animation-fill-mode: forwards;
}

@keyframes padding {
	0% { padding-bottom: 7px; }
	100% { padding-bottom: 0px; }
}


@keyframes flip {
    0% { transform: scaleX(1); }
    11% { transform: scaleX(1); }
    
    12% { transform: scaleX(-1); } 
    23% { transform: scaleX(-1); }
    
    24% { transform: scaleX(1); }
    35% { transform: scaleX(1); }
    
    36% { transform: scaleX(-1); } 
    47% { transform: scaleX(-1); }
    
    48% { transform: scaleX(1); }
    59% { transform: scaleX(1); }
    
    60% { transform: scaleX(-1); }
    71% { transform: scaleX(-1); }
    
    72% { transform: scaleX(1); } 
    83% { transform: scaleX(1); }
    
    84% { transform: scaleX(-1); } 
    95% { transform: scaleX(-1); }
    
    96% { transform: scaleX(1); } 
    100% { transform: scaleX(1); }
}

.flip-h-eff {
    animation: flip 20s steps(1) infinite;
}

.shake-eff {
  animation: padding2 3s ease-in-out infinite;
}

@keyframes padding2 {
    0% { margin-top: -1px; }
    5% { margin-top: 0px; }
    12% { margin-top: -1px; }
    18% { margin-top: -1px; }
    25% { margin-top: 0px; }
    33% { margin-top: 0px; }
    39% { margin-top: -1px; }
    45% { margin-top: 0px; }
    52% { margin-top: -1px; }
    58% { margin-top: 0px; }
    64% { margin-top: -1px; }
    70% { margin-top: -1px; }
    76% { margin-top: 0px; }
    82% { margin-top: -1px; }
    88% { margin-top: 0px; }
    94% { margin-top: -1px; }
    100% { margin-top: 0px; }
}