/* --- CSS Custom Properties (Variables) --- */
:root {
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-monospace: 'Courier New', Courier, monospace;

  --color-background: #081202;
  --color-background-dark: #111;
  --color-background-light: rgb(8, 8, 37);
  --color-surface: rgb(95, 95, 95);
  --color-surface-dark: rgba(44, 62, 80, 0.8);

  --color-accent-green: #00ff00;
  --color-accent-green-dark: #005c42;
  --color-accent-green-glow: rgba(0, 255, 0, 0.3);
  --color-accent-red: #ff5252;
  --color-accent-orange: #fda000;

  --color-text-primary: #E0E0E0;
  --color-text-white: white;

  --button-bg: #2E5E6A;
  --button-bg-hover: #1A2F3A;
  --button-border: var(--color-accent-green);
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
max-width: 1000px;
margin: 20px auto;
padding: 0 20px;
min-height: auto;
background-color: var(--color-background);
position: relative;
}

.profile-section {
background: var(--color-surface);
padding: 15px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
z-index: 1;
flex-direction: column;
text-align: center;
}

.uid-display {
font-family: 'Courier New', Courier, monospace;
color: var(--color-accent-green);
font-size: 1rem;
background: var(--color-surface-dark);
padding: 8px 12px;
border-radius: 6px;
margin-top: 8px;
word-break: break-word;
}

.online-status {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 10px;
}

.online {
background: #01c908;
}

.offline {
background: var(--color-accent-red);
}

.chat-controls {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}

input {
padding: 4px 12px;
border: solid #ded0d0;
border-radius: 4px;
flex-grow: 1;
font-size: 16px;
width: 100%;
}

button {
padding: 12px 20px;
background: var(--button-bg);
color: var(--color-text-primary);
border: 1px solid var(--button-border);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 5px var(--color-accent-green-glow);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}

button:hover {
background: var(--button-bg-hover);
color: var(--color-accent-green);
box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
transform: translateY(-2px);
}

.chat-controls .back-button,
.chat-controls .photo-button {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
text-transform: none;
letter-spacing: normal;
flex-shrink: 0;
}

.chat-controls .back-button {
width: 30px;
height: 30px;
font-size: 16px;
}

.chat-controls .photo-button {
width: 40px;
height: 40px;
font-size: 16px;
}

.chat-box {
background: var(--color-background-light);
border-radius: 12px;
padding: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
height: 750px;
max-height: 60vh;
overflow-y: auto;
margin-bottom: 5px;
position: relative;
}

.message {
margin: 10px 0;
padding: 10px 10px 40px 10px;
background: rgb(20, 69, 82);
border-radius: 8px;
max-width: 80%;
width: fit-content;
min-width: 120px;
word-break: break-word; 
color: var(--color-text-primary);
position: relative;
}

.message div:first-child {
font-weight: 500;
}

.message div:nth-child(2) {
margin: 8px 0;
}

.partner-message {
margin-left: auto;
padding: 5px 5px 52px 5px;
background: #002e63;
border-radius: 8px;
max-width: 80%;
width: fit-content;
min-width: 120px;
word-break: break-word; 
color: var(--color-text-white);
position: relative;

}

/* Контейнер блока сообщения от собеседника */
.partner-message .voice-player-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
/* гарантируем выравнивание по верхнему краю */
align-items: flex-start;
/* выравнивание по левому краю */
gap: 4px;
/* небольшой отступ между плеером и статусами */
align-self: flex-start;
margin-top: 0;
}

/* Гарантируем, что сам voice-player не тянет вниз */
.partner-message .voice-player {
margin-top: 0;
/* убираем лишние отступы, если остались */
}

.message:has(.gif-container),
.message:has(.image-container),
.partner-message:has(.gif-container),
.partner-message:has(.image-container) {
background: transparent;
padding: 10px;
}

.gif-container {
margin: 8px 0;
background: none;
display: flex;
justify-content: flex-start;
}

.image-container {
margin: 8px 0;
background: none;
display: flex;
justify-content: flex-start;
}

.partner-message .gif-container,
.partner-message .image-container .partner-message .video-container,
.partner-message .voice-player {
justify-content: flex-end;
margin-top: 1px;
}

.gif {
max-width: 100%;
max-height: 100%;
background: none;
border-radius: 8px;
}

.image {
max-width: 100%;
max-height: 300px;
background: none;
border: none;
border-radius: 8px;
}

.message-meta {
position: absolute;
bottom: 5px;
right: 5px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
background: transparent;
}

.message-meta .time {
font-size: 10px;
white-space: nowrap;
}

.message-meta .date {
font-size: 8px;
white-space: nowrap;
}

.message-status {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}

.tick {
font-size: 8px;
}

.tick.sent {
color: #fa0000;
}

.tick.delivered {
color: var(--color-accent-orange);
}

.tick.read {
color: #03f90b; /* Keeping a slightly different green for read */
}

.message-status-text {
font-size: 8px;
}

.message-status-text.sent-text {
color: #f40303;
}

.message-status-text.delivered-text {
color: var(--color-accent-orange);
}

.message-status-text.read-text {
color: #01a807;
}

.notification-badge {
position: fixed;
top: 15px;
right: 15px;
background: #ff5722;
color: white;
padding: 10px 15px;
border-radius: 8px;
display: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 10000;
}

.status-indicator {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
color: var(--color-text-primary);
}

.loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 9998;
display: none;
justify-content: center;
align-items: center;
font-family: serif;
}

.loader {
width: 5em;
height: 5em;
border-right: 0.2em solid #0fffff;
border-radius: 170%;
animation: rotate 4s linear infinite;
margin: 0;
display: none;
}

.loader-text {
color: #0fffff;
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
}

.video-cancel-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4444;
  color: white;
  padding: 8px 12px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}

.video-cancel-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(255, 68, 68, 0.6);
}

/* 🔽 ДОБАВЛЕНО: Стили для игровой панели */
.games-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

.game-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.game-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-accent-green);
  transform: translateY(-2px);
}

.game-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.game-icon {
  font-size: 14px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-info {
  flex: 1;
}

.game-name {
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

/* Уменьшаем размер заголовка игры 'Шахматы' */
.game-item .game-name {
  font-size: 14px; /* поменяйте значение на желаемое (px/em) */
}

@media (max-width: 600px) {
  .game-item .game-name {
    font-size: 13px; /* чуть меньше на мобильных */
  }
}

.game-status {
  font-size: 12px;
  color: #ff4444;
}

.game-status.available {
  color: #00ff00;
}

/* Стили для модального окна шахмат */
.chess-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  box-sizing: border-box;
}

/* Chess modal controls layout */
.chess-controls {
  display: flex;
  justify-content: space-between; /* Кнопки по краям */
  align-items: center;
  width: 100%;
  max-width: 600px; /* совпадает с шириной доски */
  margin-top: 15px;
  gap: 15px;
  padding: 0 10px; /* немного отступов по бокам */
  box-sizing: border-box;
}

.chess-controls .chess-button {
  flex: 1; /* равная ширина кнопок */
  max-width: 180px;
  min-width: 120px;
  text-align: center;
  font-size: 12px; /* 👈 уменьшенный шрифт */
  padding: 10px 18px; /* немного уменьшено, чтобы сохранить пропорции */
  height: 42px; /* 👈 фиксируем одинаковую высоту */
  box-sizing: border-box;
}

/* Адаптивность — на мобильных тоже горизонтально */
@media (max-width: 600px) {
  .chess-controls {
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    padding: 0 8px;
    gap: 10px;
  }

.chess-leave-container {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.chess-leave {
  background: #8b0000;
  border-color: #ff6b6b;
}

.chess-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 720px;
  margin-bottom: 8px;
}

.chess-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
}

.chess-modal-title {
  font-size: 24px;
  color: var(--color-accent-green);
  font-weight: bold;
}

/* Фиксированный заголовок для шахмат, стабильно центрируется и не смещается */
.chess-top-title {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3003; /* чуть выше модалок внутри приложения */
  font-size: 20px;
  color: var(--color-accent-green);
  font-weight: 700;
  pointer-events: none;
  background: transparent;
  padding: 4px 10px;
  text-shadow: 0 0 8px rgba(0,255,0,0.08);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

/* На мобильных устройствах немного уменьшаем размер и убираем тень, чтобы не перекрывать контент */
@media (max-width: 768px) {
  .chess-top-title {
    top: 6px;
    font-size: 18px;
    text-shadow: none;
    padding: 2px 8px;
  }
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 80vw;
  max-width: 600px;
  height: 80vw;
  max-height: 600px;
  border: 2px solid var(--color-accent-green);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.chess-square {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.chess-square.light {
  background-color: #f0d9b5;
}

.chess-square.dark {
  background-color: #b58863;
}

.chess-square.selected {
  background-color: #aec6cf;
}

.chess-square.valid-move::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 255, 0, 0.5);
 }
}

.chess-button {
  padding: 10px 20px;
  background: var(--button-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--button-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.chess-button:hover {
  background: var(--button-bg-hover);
  color: var(--color-accent-green);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
  transform: translateY(-2px);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .chess-board {
    width: 95vw;
    height: 95vw;
  }
  
  .chess-square {
    font-size: 20px;
  }
  
  .chess-modal-title {
    font-size: 20px;
  }
}

/* 🔽 ДОБАВЛЕНО: Стили для полноценной игры шахмат */
.chess-game-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.chess-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.chess-title {
  color: var(--color-accent-green);
  margin: 0;
}

.chess-status {
  color: var(--color-text-primary);
  font-size: 16px;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  aspect-ratio: 1/1;
  border: 2px solid var(--color-accent-green);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
  margin: 0 auto;
}

.chess-square {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.75vw;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color 0.2s;
}

@media (min-width: 600px) {
  .chess-square {
    font-size: 60px;
  }
}

.chess-square.light {
  background-color: #f0d9b5;
}

.chess-square.dark {
  background-color: #b58863;
}

.chess-square.selected {
  background-color: #aec6cf;
  box-shadow: inset 0 0 0 3px var(--color-accent-green);
}

.chess-square.valid-move::after {
  content: "";
  position: absolute;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background: rgba(0, 255, 0, 0.7);
}

.chess-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: grab;
  font-size: 1em;
  line-height: 1;
}

@media (min-width: 600px) {
  .chess-piece {
    font-size: 60px; /* Увеличенный размер для десктопов */
  }
}

@media (max-width: 768px) {
  .chess-piece {
    font-size: 5vw; /* Увеличенный размер для мобильных */
  }
}

.chess-piece:active {
  cursor: grabbing;
}

.captured-pieces {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 20px;
}

.captured-white, .captured-black {
  flex: 1;
}

.captured-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 30px;
}

.captured-piece {
  font-size: 20px;
}

@media (max-width: 600px) {
  .chess-game-container {
    padding: 10px;
  }
  
  .chess-header {
    flex-direction: column;
    text-align: center;
  }
  
  .captured-pieces {
    flex-direction: column;
    gap: 15px;
  }
    
  .chess-button {
    width: 100%;
    max-width: 200px;
  }
}

/* Минимизированный кружок */
#minimizedCallIndicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: var(--color-accent-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

#minimizedCallIndicator:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.7);
}

/* Иконка внутри кружка */
#minimizedCallIndicator .icon {
  font-size: 30px;
  color: var(--color-background);
}

/* Модальное окно вызова */
#callModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

#callModal .header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  background: var(--color-background-light);
  border-bottom: 1px solid var(--color-background-dark);
}

#callModal .header-title {
  font-size: 24px;
  color: var(--color-text-primary);
  font-weight: bold;
}

#callModal .video-container {
  position: relative;
  width: 80vw;
  max-width: 800px;
  height: 80vh;
  max-height: 600px;
  border: 2px solid var(--color-accent-green);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

#callModal .video-container .local-video,
#callModal .video-container .remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#callModal .video-container .remote-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 20%;
  border: 2px solid var(--color-accent-green);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
}

#callModal .controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  background: var(--color-background-dark);
}

#callModal .controls .button {
  position: relative;
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

#callModal .controls .button:hover {
  transform: scale(1.1);
}

#callModal .controls .button .icon {
  font-size: 40px;
  color: var(--color-text-primary);
}

/* Кнопка звонка */
#callModal .controls .call-button {
  position: relative;
  width: 120px;
  height: 120px;
  background: var(--color-accent-green);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

#callModal .controls .call-button:hover {
  background: #00ff4d;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.7);
}

#callModal .controls .call-button .icon {
  color: var(--color-background);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  #callModal .video-container {
    width: 95vw;
    height: 95vh;
  }
  
  #callModal .video-container .remote-video {
    width: 40%;
    height: 30%;
  }
  
  #callModal .controls .button {
    width: 60px;
    height: 60px;
  }
  
  #callModal .controls .call-button {
    width: 100px;
    height: 100px;
  }
  
  #callModal .controls .call-button .icon {
    font-size: 30px;
  }
}

@keyframes rotate {
100% {
transform: rotate(360deg);
}
}

.splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('/splash.png') no-repeat center center;
background-size: cover;
z-index: 10000;
display: block;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
}

.splash-screen.hidden {
opacity: 0;
pointer-events: none;
}

.button-row {
display: flex;
align-items: flex-end;
/* выравнивание по нижнему краю */
gap: 10px;
margin-top: 8px;
}

/* --- Refactoring Buttons with a Base Class --- */
.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #003a2d, #001f17);
  color: var(--color-accent-green);
  font-size: 16px;
  font-weight: bold;
  border: 2px solid var(--color-accent-green);
  box-shadow:
    0 0 10px var(--color-accent-green),
    0 0 20px var(--color-accent-green),
    inset 0 0 10px var(--color-accent-green-dark);
  text-shadow: 0 0 5px var(--color-accent-green);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  line-height: 1.2;
  margin-top: 5px;
}

.invite-button, .start-chat-button {
width: 40px;
height: 40px;
}

.icon-button:hover .icon {
transform: scale(1.1);
}

.ai-assistant-button {
width: 18px;
height: 18px;
border-radius: 50%;
/* Круглая форма */
border: none;
background-color: red;
color: white;
box-shadow: 0 0 4px rgba(255, 0, 0, 0.5);
display: flex;
/* Используем flex вместо inline-flex */
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
position: absolute;
right: 10px;
/* Правый нижний угол (было left: 10px) */
bottom: 10px;
padding: 0;
/* Убираем внутренние отступы */
overflow: hidden;
/* Обрезаем лишнее */
}

.ai-assistant-button.active {
background-color: #1db000;
box-shadow: 0 0 12px #00c853;
display: block;
}

.ai-assistant-button.inactive {
background-color: red !important;
/* Временно для теста */
box-shadow: 0 0 4px rgba(255, 0, 0, 0.5) !important;
}

.ai-assistant-button svg {
width: 15px;
/* Чуть меньше кнопки для отступов */
height: 15px;
display: block;
margin: 0 auto;
/* Центрирование */
}

.icon-button .icon {
width: 48px;
height: 48px;
stroke: var(--color-accent-green);
filter: drop-shadow(0 0 3px var(--color-accent-green));
transition: transform 0.2s ease;
}

.start-chat-button:hover .icon {
transform: scale(1.1);
}

.photo-button {
width: 50px;
height: 50px;
border-radius: 50%;
background: #00bf13;
/*border: 1px solid #00FF00; */
box-shadow: 0 0 6px rgba(0, 255, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
}

.photo-button:hover {
background: var(--button-bg-hover);
transform: translateY(-2px);
box-shadow: 0 0 12px rgba(0, 255, 0, 0.7);
}

.photo-button svg {
width: 24px;
height: 24px;
pointer-events: none;
}

@media (max-width: 768px) {
body {
width: 95%;
padding: 0 10px;
background-size: cover;
background-attachment: scroll;
}

.chat-controls {
flex-direction: row;
gap: 10px;
}

.uid-display {
width: 100%;
box-sizing: border-box;
}

.invite-button {
margin-top: 15px auto 0;
width: 50px;
height: 50px;
border-radius: 50%;
}

input[type="text"] {
width: 100%;
font-size: 14px;
box-sizing: border-box;
}

.chat-controls button {
margin-top: 10px;
}

.chat-box {
height: 600px;
max-height: 60vh;
position: relative;
}

.message {
max-width: 90%;
}

#chatListContainer {
position: relative;
z-index: 1;
}

#chatBox {
position: relative;
z-index: 1;
}
}

#chatListContainer {
display: block;
}

#chatBox {
display: none;
}

#chatList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
margin-bottom: 20px;
overflow-y: auto;
max-height: 70vh;
padding: 0 5px;
}

#chatList button {
width: 100%;
margin: 0;
padding: 20px 10px;
box-sizing: border-box;
position: relative;
height: 50px;
}

@media (max-width: 768px) {
#chatList {
grid-template-columns: 1fr;
}
}

.avatar-container {
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
z-index: 2;
}

.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ded0d0;
transition: border-color 0.3s ease;
}

.avatar:hover {
border-color: #357abd;
}

.chat-avatar {
position: absolute;
top: 5px;
left: 5px;
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #ded0d0;
}


.message:not(.partner-message)>div:first-of-type {
padding-top: 45px;
}

.message:not(.partner-message) {
position: relative;
}


.message:not(.partner-message):has(.image-container) .chat-avatar,
.message:not(.partner-message):has(.gif-container) .chat-avatar,
.message:not(.partner-message):has(.video-container) .chat-avatar {
position: absolute;
top: 5px;
left: -5px;
z-index: 10;
box-shadow: 0 0 5px rgba(28, 2, 227, 0.8);
}

.message:not(.partner-message):has(.image-container)>div:first-of-type,
.message:not(.partner-message):has(.gif-container)>div:first-of-type,
.message:not(.partner-message):has(.video-container)>div:first-of-type {
padding-top: 0;
}

.image-container,
.gif-container,
.video-container {
margin-top: 15px;
}

.notification-count {
display: none;
position: absolute;
bottom: 5px;
right: 20px;
background: red;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
}

.notification-count.active {
display: block;
}

.typing-avatar {
display: none;
position: absolute;
bottom: 80px;
left: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #ded0d0;
z-index: 6;
pointer-events: none;
}

@media (max-width: 768px) {
.chat-avatar {
width: 50px;
height: 50px;
top: 3px;
left: 3px;
}

.notification-count {
width: 18px;
height: 18px;
line-height: 18px;
font-size: 10px;
right: 18px;
}

.matrix-canvas {
position: absolute;
bottom: 70px;
left: 0;
width: 100%;
height: 150px;
z-index: 10;
background: transparent;
pointer-events: none;
}

.typing-avatar {
display: none;
position: absolute;
bottom: 80px;
left: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #ded0d0;
z-index: 6;
}
}


.avatar.matrix-glow {
box-shadow:
0 0 5px var(--color-accent-green),
0 0 10px var(--color-accent-green),
0 0 20px var(--color-accent-green),
inset 0 0 5px var(--color-accent-green);
border-color: var(--color-accent-green);
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.matrix-pulse {
border-radius: 50%;
animation: glowShift 1.8s infinite ease-in-out;
}

@keyframes glowShift {
0% {
box-shadow: 0 0 6px 2px var(--color-accent-green);
}

50% {
box-shadow: 0 0 18px 6px #001133;
}

100% {
box-shadow: 0 0 6px 2px var(--color-accent-green);
}

}

.voice-button {
width: 50px;
height: 50px;
border-radius: 50%;
background: #00bf13; /* This green is different, might be intentional */
border: 1px solid var(--color-accent-green);
box-shadow: 0 0 6px rgba(0, 255, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
transition: all 0.3s ease;
}

.voice-button:active {
background: var(--button-bg-hover);
transform: scale(0.95);
box-shadow: 0 0 12px rgba(0, 255, 0, 0.8);
}

.mic-icon {
width: 24px;
height: 24px;
display: block;
overflow: visible;
}


.voice-player {
display: flex;
align-items: center;
gap: 2px;
padding: 2px;
margin-bottom: 4px;
background: rgba(0, 255, 0, 0.05);
border: 1px solid var(--color-accent-green);
border-radius: 30px;
box-shadow: 0 0 3px var(--color-accent-green);
max-width: 100%;
width: fit-content;
height: 30px;
/* Убираем фиксированную высоту, чтобы адаптировалась */
overflow: visible;
}

.voice-player-container {
display: flex;
flex-direction: column;
align-items: flex-start;
/* Для выравнивания по началу */
justify-content: flex-start;
gap: 4px;
}

.voice-player .avatar-wrapper {
position: relative;
/* Обязательно, чтобы mic-icon позиционировался от него */
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
margin-left: -6px;
/* немного на вынос из плеера */
margin-right: 0px;
border-radius: 50%;
overflow: visible;
}

.voice-player .avatar-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid #00c707;
}

/* Иконка микрофона */
.voice-player .avatar-wrapper .mic-icon {
position: absolute;
bottom: 5px;
right: -56px;
width: 16px;
height: 16px;
fill: red;
background: transparent;
z-index: 2;
}

.voice-player .duration {
font-size: 12px;
color: var(--color-accent-green);
white-space: nowrap;
padding-right: 5px;
}

.audio-message {
background: transparent;
box-shadow: none;
}

.voice-player.playing {
box-shadow:
0 0 7px var(--color-accent-green),
0 0 15px var(--color-accent-green);
animation: pulseGlow 1.5s infinite alternate;
}

@keyframes pulseGlow {
0% {
box-shadow: 0 0 3px var(--color-accent-green), 0 0 7px var(--color-accent-green);
}

100% {
box-shadow: 0 0 7px var(--color-accent-green), 0 0 15px var(--color-accent-green);
}
}

textarea#messageInput {
resize: none;
overflow-y: hidden;
min-height: 45px;
max-height: 75px;
line-height: 1.4;
padding: 10px;
border: 1px solid #909090;
border-radius: 6px;
font-size: 16px;
font-family: inherit;
width: 100%;
box-sizing: border-box;
}

textarea#messageInput::-webkit-scrollbar {
display: none;
}

.text-message {
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
font-size: 16px;
font-family: inherit;
margin: 8px 0;
}

.send-button {
  /* Inherits from .icon-button now */
  width: 50px;
  height: 50px;
}

.send-button .icon {
  width: 32px;
  height: 32px;
}

.send-button:hover .icon {
transform: scale(1.1);
}

.hidden {
display: none !important;
}

.message.selected-for-delete,
.partner-message.selected-for-delete {
border: 1px solid rgba(255, 0, 0, 0.7);
background-color: rgba(255, 0, 0, 0.1);
position: relative;
}

/* Общий стиль для обоих крестиков */
.delete-cross,
.cancel-reply-btn {
position: absolute;
top: 4px;
right: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 0, 0, 0.8);
/* по умолчанию красный */
box-shadow: 0 0 6px rgba(255, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
}

.cancel-reply-btn {
background-color: rgba(0, 204, 0, 0.8);
/* зелёный */
box-shadow: 0 0 6px rgba(0, 255, 0, 0.6);
}

.delete-cross svg,
.cancel-reply-btn svg {
width: 5px;
height: 5px;
stroke: white;
stroke-width: 2;
stroke-linecap: round;
fill: none;
pointer-events: none;
}

#deleteSelectedButton {
position: fixed;
bottom: 25px;
right: 25px;
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle, #ff0000, #8b0000);
box-shadow:
0 0 10px #ff0000,
0 0 20px #ff0000,
inset 0 0 10px #ff3333;
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
line-height: 60px;
cursor: pointer;
display: none;
z-index: 999;
}

#deleteSelectedButton:hover {
transform: scale(1.1);
box-shadow: 0 0 16px rgba(255, 0, 0, 1);
}

.deleted-message {
opacity: 0.4;
color: #888;
font-style: italic;
padding: 10px;
border: 1px dashed #555;
border-radius: 8px;
background: rgba(255, 255, 255, 0.359);
pointer-events: none;
}

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

.modal.show {
display: flex;
}

.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}

.modal-content {
background: var(--color-background-dark);
border: 1px solid var(--color-accent-green);
border-radius: 10px;
padding: 20px;
width: 300px;
box-shadow: 0 0 15px var(--color-accent-green);
text-align: center;
}

/* Общие стили для круглых иконок-кнопок */
.modal-btn {
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  padding: 0;
  cursor: pointer;
  background-color: #4CAF50; /* по умолчанию — зелёная */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.modal-btn:hover {
  transform: scale(1.07);
}

.modal-btn svg {
  width: 22px;
  height: 22px;
  fill: rgb(6, 0, 0);
}

/* Принять (зелёная) */
.accept-btn {
  background-color: #4CAF50;
}

/* Отклонить/Отменить (красная) */
.cancel-btn {
  background-color: #f44336; /* красивый красный */
  color: white;
  border: none;
  border-radius: 50%;      /* чтобы кнопка была круглой */
  width: 48px;
  height: 48px;
  padding: 0;              /* без лишних отступов */
  display: flex;
  align-items: center;
  justify-content: center; /* чтобы иконка была по центру */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cancel-btn:hover {
  background-color: #d50000; /* чуть темнее при наведении */
}

.cancel-btn svg {
  width: 22px;
  height: 22px;
  fill: rgb(2, 0, 0); /* чтобы иконка была белой */
}

/* Модалки (цвет текста, выравнивание) */
#incomingCallModal .modal-content,
#callingModal .modal-content,
#activeCallModal .modal-content {
  color: rgb(1, 110, 105);
  text-align: center;
  padding: 20px;
}

/* Адаптивность для мобильных */
@media screen and (max-width: 480px) {
  .modal-content {
    width: 80%;
    font-size: 14px;
    padding: 20px 10px;
  }

  .modal-btn {
    width: 48px;
    height: 48px;
  }

  .modal-btn svg {
    width: 22px;
    height: 22px;
  }

  .modal-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }
}

.message-action-menu {
background-color: var(--color-background-dark);
color: #eee;
border: 1px solid #444;
padding: 6px 10px;
border-radius: 8px;
box-shadow: 0 2px 6px var(--color-accent-green-glow);
z-index: 9999;
}

.message-action-menu button {
background: none;
border: none;
color: var(--color-accent-green);
font-size: 14px;
margin: 4px 0;
cursor: pointer;
display: block;
width: 100%;
text-align: left;
}

.message-action-menu .arrow-up {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid var(--color-background-dark);
position: absolute;
top: -8px;
left: 12px;
}

.reply-preview {
position: absolute;
bottom: 150px;
/* расстояние до поля ввода */
left: 15px;
width: auto;
max-width: 80%;
max-height: 80px;
min-height: 60px;
background: #000;
border-left: 3px solid #00ff00;
padding: 8px 12px; 
border-radius: 8px; 
overflow: hidden; 
text-overflow: ellipsis; 
font-size: 13px; 
color: var(--color-text-primary);
backdrop-filter: blur(2px); /* 🔮 Магический эффект */
z-index: 50;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 0 6px #00ff00;
}

.reply-preview span {
color: #ff4444;
font-size: 16px;
position: absolute;
right: 8px;
top: 8px;
cursor: pointer;
z-index: 20;
}


.replying-to {
border: 1px solid var(--color-accent-green) !important;
background: rgba(0, 255, 0, 0.07);
position: relative;
}

.message.deleted-message {
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
}

.partner-message.deleted-message {
background: transparent !important;
padding: 0 !important;
}


.recording-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 10000;
pointer-events: none;
}

.recording-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle, #ff0000, #8b0000);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
animation: pulse 1.5s infinite alternate;
}

.recording-circle svg {
width: 50px;
height: 50px;
fill: #ffffff;
filter: drop-shadow(0 0 5px #ffffff);
}

@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 20px #ff0000;
}

100% {
transform: scale(1.1);
box-shadow: 0 0 40px #ff0000;
}
}

.matrix-canvas-recording {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}

#mainMenuButton {
position: absolute;
top: 8px;
right: 10px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
background: none;
border: none;
cursor: pointer;
z-index: 10;
padding: 6px;
}

#mainMenuButton .dot {
width: 4px;
height: 4px;
background-color: var(--color-accent-green);
border-radius: 50%;
animation: flicker 1.5s infinite alternate;
}

#menuButton {
position: absolute;
top: 8px;
right: 8px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
background: none;
border: none;
cursor: pointer;
z-index: 10;
padding: 6px;
}

#menuButton .dot {
width: 4px;
height: 4px;
background-color: var(--color-accent-green);
border-radius: 50%;
animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
0% {
opacity: 0.6;
}

100% {
opacity: 1;
}
}

#mainSidebarOverlay {
position: static;
background: none;
width: auto;
height: auto;
padding: 0;
margin: 0;
display: contents;
pointer-events: none;
}

#mainSidebarOverlay[style*="block"] {
opacity: 1;
pointer-events: auto;
}

.sidebar {
position: fixed;
top: 0;
right: -260px;
width: 260px;
height: 100%;
background-color: var(--color-background-dark);
border-left: 0.5px solid #00696e;
box-shadow: -0.5px 0 1px #00696e;
transition: right 0.3s ease;
/* Плавная анимация шторки */
z-index: 1001;
/* Выше оверлея */
padding: 20px; 
color: var(--color-text-primary);
box-sizing: border-box;
display: flex;
flex-direction: column;
}

#gamesSidebar {
  z-index: 1002 !important; /* Выше основной панели */
  right: -260px !important; /* Начальная позиция */
}

#gamesSidebar.sidebar.open {
    right: 0 !important;
}

#gamesSidebar.sidebar {
    right: -260px !important;
}

/* 🔽 ОБЕСПЕЧИМ ВИДИМОСТЬ КОНТЕНТА */
#gamesSidebar .games-sidebar-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#gamesSidebar .games-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--color-accent-green) !important;
}

#gamesSidebar .games-title {
    color: var(--color-accent-green) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin: 0 !important;
}

#gamesSidebar .back-to-filters {
    background: none !important;
    border: 1px solid var(--color-accent-green) !important;
    color: var(--color-accent-green) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

#gamesSidebar .games-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    flex: 1 !important;
}

.sidebar.open {
right: 0;
}

.sidebar-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 15px;
word-break: break-word;
overflow-wrap: break-word;
position: relative;
pointer-events: auto;
}

.sidebar-content h3 {
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
font-size: 11px;
line-height: 1.3;
color: var(--color-accent-green);
text-shadow: 0 0 2px var(--color-accent-green), 0 0 4px var(--color-accent-green);
margin-bottom: 12px;
letter-spacing: 0.8px;
text-transform: uppercase;
animation: glow-pulse 2s infinite ease-in-out;
border-bottom: 1px dashed var(--color-accent-green);
padding-bottom: 4px;
}

@keyframes glow-pulse {

0%,
100% {
text-shadow: 0 0 2px var(--color-accent-green), 0 0 4px var(--color-accent-green);
}

50% {
text-shadow: 0 0 4px var(--color-accent-green), 0 0 8px var(--color-accent-green);
}
}

@media (max-width: 600px) {
.sidebar-content h3 {
font-size: 13px;
line-height: 1.4;
}
}

@media (max-width: 768px) {
.sidebar {
width: 50vw;
right: -55vw;
}

.sidebar.open {
right: 0;
}
}

.sidebar-content select {
background: #222;
color: var(--color-accent-green);
border: 1px solid var(--color-accent-green);
padding: 6px;
border-radius: 4px;
font-size: 14px;
}

.sidebar-spacer {
flex-grow: 1;
pointer-events: auto;
}

.sidebar-info-button {
position: absolute;
bottom: 2px;
left: 2px;
z-index: 10;
}

.sidebar-info-button button {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 20px;
height: 20px;
padding: 0;
}

.sidebar-info-button svg {
width: 20px;
height: 20px;
fill: none;
stroke: #7e7e7e;
transition: opacity 0.2s ease;
}

.sidebar-info-button:hover svg {
opacity: 0.7;
}

.terminal-cursor {
display: inline-block;
margin-left: 5px;
color: #01fbde;
animation: blink-caret 0.5s step-start infinite;
font-weight: bold;
font-size: 12px;
}

/* Анимация мигающего курсора */
@keyframes blink-caret {

0%,
100% {
opacity: 1;
}

50% {
opacity: 0;
}
}

.link-preview {
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, 0.2); 
border-left: 3px solid #00ff00;
border-radius: 5px;
padding: 6px 8px;
margin-top: 5px;
max-width: 100%;
font-size: 10px;
min-height: 50px;
box-shadow: none;
}

.link-preview a {
text-decoration: none;
outline: none;
border: none;
display: flex;
align-items: center;
gap: 8px;
color: inherit;
}

.preview-img {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 4px;
border: none;
flex-shrink: 0;
}

.preview-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}

.preview-title {
font-weight: bold;
font-size: 10px;
color: var(--color-accent-green);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
/* Уменьшил line-height */
}

.preview-description {
font-size: 8px;
color: #88ff88;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.1;
/* Минимальный line-height */
margin-top: 1px;
/* Минимальный отступ сверху */
}

.preview-url {
font-size: 11px;
color: #44ff44;
word-break: break-word;
}

.link-preview img,
.link-preview a {
outline: none;
border: none;
}

@media (max-width: 600px) {
.link-preview {
padding: 5px;
margin-top: 5px;
font-size: 9px;
box-shadow: none;
max-width: 100%;
}

.preview-img {
width: 36px;
height: 36px;
}

.preview-title {
font-size: 9px;
}

.preview-description {
font-size: 8px;
-webkit-line-clamp: 1;
}
}

.attachment-btn {
cursor: pointer;
font-size: 22px;
margin-right: 10px;
user-select: none;
}

.send-wrapper {
display: flex;
align-items: center;
gap: 8px;
}

.upload-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(10, 10, 10, 0.96);
padding: 20px 30px;
border-radius: 10px;
z-index: 9999;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
color: #01fbde;
text-align: center;
width: 90%;
max-width: 320px;
display: flex;
flex-direction: column;
align-items: center;
backdrop-filter: blur(6px);
}

.upload-content h3 {
margin-bottom: 10px;
color: #01fbde;
font-size: 18px;
}

.upload-content p {
margin: 4px 0;
font-size: 13px;
color: #ccc;
}

.upload-content progress {
width: 100%;
height: 8px;
margin: 10px 0;
appearance: none;
}

.upload-content progress::-webkit-progress-bar {
background-color: #333;
border-radius: 4px;
}

.upload-content progress::-webkit-progress-value {
background-color: #01fbde;
border-radius: 4px;
}

.upload-filename {
display: block;
max-width: 100%;
margin: 0 auto 8px auto;
font-weight: bold;
color: #fff;
text-align: center;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
hyphens: auto;
}

.uploading-filename-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
max-width: 100%;
overflow: hidden;
text-align: center;
gap: 4px;
font-size: 13px;
}

.uploading-filename {
display: inline-block;
max-width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
color: #fff;
}

progress::-webkit-progress-bar {
background: #222;
border-radius: 10px;
}

progress::-webkit-progress-value {
background: #00ff00;
border-radius: 10px;
}

.download-file-button {
background-color: var(--color-background-dark);
border: 1px solid var(--color-accent-green);
color: var(--color-accent-green);
padding: 10px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
box-shadow: 0 0 5px #00ff00;
width: 100%;
text-align: left;
line-height: 1.4;
}

.download-file-button:hover {
background-color: #1a1a1a;
}

/* 🔷 ГЛАВНЫЙ индикатор в центре экрана — для получателя */
#incomingFileIndicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10001;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 24px;
background-color: rgba(10, 10, 10, 0.92);
border: 2px solid #01fbde;
border-radius: 10px;
color: #01fbde;
font-size: 14px;
text-align: center;
max-width: 90%;
width: auto;
box-shadow: 0 0 12px rgba(1, 251, 222, 0.2);
backdrop-filter: blur(4px);
animation: fadeInIndicator 0.3s ease-out;
}

@keyframes fadeInIndicator {
from {
opacity: 0;
transform: translate(-50%, -40%);
}

to {
opacity: 1;
transform: translate(-50%, -50%);
}
}

#incomingFileIndicator canvas {
display: block;
}

@media (max-width: 600px) {
#incomingFileIndicator {
font-size: 13px;
padding: 14px 20px;
}

.download-file-button {
font-size: 12px;
padding: 8px;
border-radius: 5px;
}
}

.message,
.partner-message {
position: relative;
}


/* === Адаптивный стиль для входящих сообщений с кнопкой скачивания === */
.incoming-file-message .download-file-button {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
padding-left: 8px;
font-size: 14px;
border: none;
background: transparent; 
color: #1aff05;
width: 100%;
max-width: 100%;
box-sizing: border-box;
gap: 4px;
word-break: break-word;
overflow-wrap: anywhere;
}

/* 📁 Иконка + надпись первой строки */
.incoming-file-message .download-file-button .file-label {
display: flex;
/*align-items: center;*/
font-weight: bold;
color: #00ffa2;
padding-left: -18px;
}

/* ⬇ стрелка */
.incoming-file-message .download-file-button .file-label::before {
content: "⬇ ";
font-size: 12px;
margin-right: 6px;
}

/* ⏳ срок действия по центру */
.incoming-file-message .download-file-button .expires {
width: 100%;
/* text-align: center;*/
padding-left: 20px;
font-size: 8px;
opacity: 0.8;
line-height: 1.3;
color: #1aff05;
}

/* ✨ Ховер эффект */
.incoming-file-message .download-file-button:hover {
background-color: rgba(0, 255, 0, 0.05);
border-radius: 8px;
}

/* Аватарка всегда сверху */
.message .chat-avatar {
z-index: 10;
pointer-events: auto;
}

/* Адаптив для маленьких экранов */
@media (max-width: 500px) {
.incoming-file-message .download-file-button {
padding-left: 60px;
font-size: 13px;
}

.incoming-file-message .download-file-button .file-label {
font-size: 13px;
}

.incoming-file-message .download-file-button .expires {
font-size: 10px;
}

.incoming-filename {
max-width: 90%;
font-size: 12px;
color: #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
hyphens: auto;
text-align: center;
}

.chat-avatar {
width: 42px;
height: 42px;
top: 5px;
left: 5px;
}
}

.modal-cancel-btn {
margin-top: 10px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid #444;
color: #aaa;
font-size: 13px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}

.modal-cancel-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
}

.sent-label {
font-style: italic;
color: #0c6868;
}

.incoming-upload-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 100%;
padding: 10px;
box-sizing: border-box;
}

.uploading-title {
margin-bottom: 6px;
color: #00ffee;
font-size: 14px;
word-break: break-word;
}

.uploading-filename-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
max-width: 100%;
overflow: hidden;
font-size: 13px;
color: #ccc;
}

.uploading-filename {
display: inline-block;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
color: #fff;
}

.uploading-filesize {
white-space: nowrap;
color: #ccc;
font-size: 13px;
}

.upload-modal.alert-style {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(30, 30, 30, 0.96);
border-radius: 12px;
padding: 20px 28px;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
min-width: 250px;
max-width: 90vw;
}

.upload-modal.alert-style.show {
opacity: 1;
pointer-events: auto;
}

.alert-text {
font-size: 18px;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 1.4;
}

@media (hover: hover) and (pointer: fine) {
.back-button {
display: inline-block;
}
}

@media (display-mode: standalone),
(hover: none) and (pointer: coarse) {
.back-button {
display: none !important;
}
}

@media (display-mode: standalone),
(max-width: 768px) {
.chat-controls .back-button {
display: none !important;
}
}

.input-with-attachment {
position: relative;
width: 100%;
}

.input-with-attachment textarea {
width: 100%;
padding-right: 40px;
/* создаём пространство для скрепки */
resize: none;
overflow-y: hidden;
min-height: 45px;
max-height: 75px;
line-height: 1.4;
padding: 10px;
border: 1px solid #909090;
border-radius: 6px;
font-size: 16px;
font-family: inherit;
box-sizing: border-box;
}

.input-with-attachment .attachment-btn {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #2E5E6A;
padding: 0;
line-height: 1;
}

.call-button-container {
  position: absolute;
  top: 85px; /* минимальный отступ сверху */
  right: 15px; /* небольшой отступ справа */
  z-index: 10; /* поверх контента */
  display: flex;
  gap: 10px; /* расстояние между кнопками */
  pointer-events: auto;
}

.phone-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #00bf13;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0, 255, 0, 0.5);
  transition: all 0.3s ease;
  padding: 0;
}

.phone-button:hover {
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.8);
  transform: scale(1.1);
}

.phone-button svg {
  width: 24px;
  height: 24px;
  fill: black;
}

.chat-controls button,
.chat-controls .back-button,
.chat-controls .photo-button,
.chat-controls .voice-button,
.chat-controls .send-button {
margin-top: auto;
margin-bottom: auto;
}

.custom-audio-player {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 200px;
}

.custom-audio-player .play-btn {
position: relative;
background: #01bd10;
border: none;
border-radius: 50%;
width: 26px;
height: 26px;
padding: 5px;
margin: 0 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 4px rgba(0, 255, 247, 0.528);
transition: background 0.2s;
}

.custom-audio-player .play-btn:hover {
background: #3a3a3a;
/* чуть ярче при наведении */
}

.custom-audio-player .play-btn svg {
width: 16px;
height: 16px;
color: #000;
transition: color 0.2s;
}

.custom-audio-player .play-btn:hover svg {
color: #00981ed7;
}

.custom-audio-player .progress-container {
flex: 1;
height: 2px;
background: #5e5e5ea0;
border-radius: 2px;
overflow: hidden;
position: relative;
}

.custom-audio-player .progress-bar {
height: 100%;
width: 0%; 
transition: width 0.1s linear;
background: #179b00;
}

.custom-audio-player .duration {
font-size: 8px;
min-width: 10px;
text-align: right;
}

.custom-audio-player .my-mic-icon-after-play {
position: absolute;
left: 32px;
bottom: -2px;
width: 16px;
height: 16px;
fill: red;
opacity: 0.9;
pointer-events: none;
z-index: 2;
}

.partner-message {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}

.voice-player,
.voice-player-container,
.player-row {
align-self: flex-start;
margin-top: 0;
}

.waveform {
flex: 1;
height: 32px;
margin: 0 8px;
position: relative;
overflow: hidden;
cursor: pointer;
}

.waveform canvas {
width: 100% !important;
height: 100% !important;
}

.waveform canvas {
transition: filter 0.3s ease;
}

.scroll-to-bottom-button {
position: absolute;
bottom: 65px;
/* выступает за чат */
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.75);
border-radius: 50%;
padding: 10px;
z-index: 5;
cursor: pointer;
display: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}

.scroll-to-bottom-button:hover {
transform: translateX(-50%) scale(1.1);
}

.scroll-to-bottom-button .icon {
width: 14px;
height: 14px;
display: block;
}

/* Контейнер для всех кошельков */
.wallets-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
margin-bottom: 20px;
}

/* Общий стиль кошелька */
.wallet-link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #007aff;
padding: 10px;
border: 1px solid #007aff;
border-radius: 8px;
transition: background-color 0.2s;
background-color: #f0f8ff;
/* светлый фон */
font-size: 0.9rem;
}

/* Hover эффект для десктопа */
.wallet-link:hover {
background-color: rgba(0, 122, 255, 0.1);
}

/* Иконка кошелька */
.wallet-icon {
width: 24px;
height: 24px;
border-radius: 4px;
}

/* Кнопка добавления (+) */
.wallet-add-button {
background-color: #444;
color: #fff;
border: none;
border-radius: 10px;
font-size: 20px;
padding: 0 14px;
cursor: pointer;
transition: background-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
}

/* Hover для кнопки добавления */
.wallet-add-button:hover {
background-color: #666;
}

/* 🔽 Мобильная адаптация */
@media (max-width: 768px) {
.wallet-link {
font-size: 0.5rem;
padding: 8px 10px;
border: none;
border-radius: 10px;
background-color: #252525;
color: #fff;
box-shadow: 0 0 10px rgba(0, 122, 255, 0.3);
}

.wallet-link span {
font-size: 0.75rem;
}

.wallet-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
padding: 2px;
}

.wallet-add-button {
background-color: #1f1f1f;
font-size: 18px;
height: 36px;
padding: 0 12px;
border-radius: 10px;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}
}

.wallet-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(5, 5, 5, 0.6);
z-index: 9998;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(4px);
}

.wallet-options {
display: flex;
flex-direction: column;
gap: 12px;
margin: 16px 0;
width: 100%;
}

.wallet-option {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.05);
padding: 8px 12px;
border-radius: 8px;
transition: background-color 0.2s ease;
}

.wallet-option:hover {
background-color: rgba(1, 251, 222, 0.1);
}

.wallet-option img {
width: 24px;
height: 24px;
border-radius: 6px;
background: white;
padding: 2px;
}

.wallet-option span {
color: #fff;
font-size: 14px;
}

.wallet-modal-close {
margin-top: 10px;
font-size: 10px;
background: none;
border: none;
color: #01fbde;
cursor: pointer;
}

/* Центрируем заголовок и подзаголовок */
#walletModal h3,
#walletModal p {
text-align: center;
width: 100%;
}

/* Центрируем кнопку Отмена */
#walletModal .wallet-modal-close {
display: block;
margin: 10px auto 0 auto;
transform: translateX(8px);
/* выравиваем кнопку */
}

.highlighted-reply {
border: 1px solid #4caf50;
background-color: rgba(76, 175, 80, 0.1);
border-radius: 8px;
transition: background-color 3s ease, border-color 3s ease;
animation: highlightFade 10s ease-in-out forwards;
}

@keyframes highlightFade {
0% {
border: 1px solid #4caf50;
background-color: rgba(76, 175, 80, 0.1);
}

80% {
border: 1px solid rgba(76, 175, 80, 0.3);
background-color: rgba(76, 175, 80, 0.03);
}

100% {
border: 1px solid transparent;
background-color: transparent;
}
}

.rename-modal {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
/* затемнение фона */
display: flex;
justify-content: center;
align-items: center;
}

.rename-modal-content {
background: white;
padding: 20px;
border-radius: 12px;
width: 90%;
max-width: 400px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: fadeIn 0.3s ease;
}

.rename-modal-content input {
width: 100%;
padding: 10px;
font-size: 16px;
margin-bottom: 15px;
}

.rename-modal-content button {
padding: 8px 16px;
font-size: 16px;
margin: 0 5px;
border: none;
border-radius: 8px;
cursor: pointer;
}

.rename-modal-content button.confirm {
background-color: #4caf50;
color: white;
}

.rename-modal-content button.cancel {
background-color: #f44336;
color: white;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}

to {
opacity: 1;
transform: scale(1);
}
}

.steam {
fill: none;
stroke: #ccc;
stroke-width: 1;
stroke-linecap: round;
transform-origin: center center;
opacity: 0.7;
animation: steamRise 3.6s ease-in-out infinite,
steamFat 3.6s ease-in-out infinite;
}

.steam1 {
animation-delay: 0s, 0s;
}

.steam2 {
animation-delay: 0.6s, 0.6s;
}

.steam3 {
animation-delay: 1.2s, 1.2s;
}

@keyframes steamRise {
0% {
transform: translateY(0px) scaleX(1);
opacity: 0.7;
}

50% {
transform: translateY(-20px) scaleX(1.5);
/* пузатость в середине */
opacity: 0.5;
}

100% {
transform: translateY(-40px) scaleX(1);
opacity: 0;
}
}

@keyframes steamFat {

0%,
100% {
stroke-width: 1;
}

50% {
stroke-width: 3;
/* толще в середине */
}
}

.copy-address {
color: #aaa;
user-select: all;
cursor: pointer;
font-family: monospace;
transition: color 0.2s ease;
}

.copy-address:hover {
color: #ccc;
text-shadow: 0 0 4px #666;
}

.btc-label {
color: #f7931a;
}

.usdt-label {
color: #26a17b;
}

@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.9;
}

50% {
transform: scale(1.5);
opacity: 0.4;
}

100% {
transform: scale(1);
opacity: 0.9;
}
}

/* Hover и активное состояние */
.custom-select-option:hover,
.custom-select-option.active { 
  background-color: #0f0;
  color: #000;
}

.custom-select-options {
  display: none;
}

.custom-select-options.open {
  display: block;
}

.custom-select-container {
  pointer-events: auto !important;
}
.voiceFilterSidebar {
  pointer-events: auto !important;
}

.custom-select-text {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 20px); /* Чтобы текст не заезжал под стрелку */
}

@media (max-width: 480px) {
  .custom-select-wrapper {
    font-size: 9px; /* Ещё уменьшаем шрифт на мобильных */
    padding: 6px 18px 6px 6px; /* Уменьшаем padding */
  }
}

/* ===== СТИЛИ ДЛЯ ВИДЕО ЗВОНКОВ ===== */

.video-call-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  z-index: 9999 !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Модалка входящего видео звонка - УБИРАЕМ ПРИНУДИТЕЛЬНОЕ ОТОБРАЖЕНИЕ */
#incomingVideoCallModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.9) !important;
  z-index: 10000 !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Минимизированный индикатор - УБИРАЕМ ПРИНУДИТЕЛЬНОЕ ОТОБРАЖЕНИЕ */
#minimizedVideoCallIndicator {
  position: fixed !important;
  top: 10px !important;
  right: 100px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background-color: #ff4444 !important;
  cursor: pointer !important;
  z-index: 9998 !important;
  /* display: flex !important; <-- УБРАНО! ИНДИКАТОР ДОЛЖЕН БЫТЬ СКРЫТ ПО УМОЛЧАНИЮ */
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

.video-call-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

.video-call-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 20px; 
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
  color: #fff;
  z-index: 10;
}

/* Стили для индикаторов качества */
.quality-indicators {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 4px;
}

.quality-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.quality-icon {
  width: 12px;
  height: 12px;
}

.quality-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

/* Стили для разных уровней качества */
.quality-status.excellent {
  background-color: #00aa00;
}

.quality-status.good {
  background-color: #00aa00;
  opacity: 0.7;
}

.quality-status.fair {
  background-color: #ffaa00;
}

.quality-status.poor {
  background-color: #ff5500;
}

.quality-status.bad {
  background-color: #ff0000;
}

.quality-status.unknown {
  background-color: #666;
}

.header-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00ff00;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.header-info {
  flex: 1;
}

.header-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 2px;
}

.call-status {
  font-size: 12px;
  color: #ccc;
}

.call-timer {
  font-family: var(--font-monospace);

  color: #ffffff;
  background: rgba(0, 0, 0, 0);
  padding: 4px 8px;
  border-radius: 4px;
  width: 150px; /* Ширина как у #localVideo */
  text-align: center; /* Центрируем время */
  box-sizing: border-box; /* Чтобы padding не влиял на ширину */
  margin-right: 0; /* 🗑 Убираем старый отступ */
}

/* Видео элементы */
#remoteVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #222;
}

#localVideo {
  position: absolute;
  top: 130px; /* 80px (indicator top) + 45px (indicator height) + 5px (gap) */
  right: 20px;
  width: 150px;
  height: 200px;
  border-radius: 5px;
  border: none !important;
  object-fit: cover;
  box-shadow: none !important;
  cursor: pointer;
  z-index: 15;
  transition: all 0.3s ease;
  /* Мобильные настройки для лучшего отклика на касания */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 255, 0, 0.3);
  touch-action: manipulation;
}

#localVideo:hover {
  transform: scale(1.05);
}

/* 🐆 Мобильное касание - эффект подобный hover */
#localVideo:active {
  transform: scale(1.05);
}

/* Индикатор трафика */
.traffic-indicator {
  position: absolute;
  top: 80px; /* 75px (header bottom) + 5px (gap) */
  right: 20px;
  width: 150px;
  height: 45px;
  background: rgba(0, 0, 0, 0);
  color: #ffffff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Центрируем по горизонтали */
  justify-content: center;
  gap: 2px; /* Отступ между строками */
  padding: 5px 0;
  box-sizing: border-box; /* 📦 Учитываем padding в высоте, чтобы избежать наложения */
  font-size: 14px;
  font-family: var(--font-monospace);
  z-index: 16;
}

.traffic-main {
  display: flex;
  align-items: center; /* Выравнивание иконки и скорости */
  gap: 6px;
}

.traffic-value {
  font-weight: bold;
}

.traffic-total {
  font-size: 11px;
  color: #ccc;
  opacity: 0.8;
  white-space: nowrap; /* Чтобы текст не переносился */
}

.traffic-indicator .traffic-icon {
  width: 16px;
  height: 16px;
  fill: #fff;
  flex-shrink: 0; /* Предотвращает сжатие иконки */
}

/* Панель управления */
.video-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  z-index: 20;
}

.control-btn {
  width: 55px;
  height: 55px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.control-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.control-btn svg {
  width: 24px;
  height: 24px;
  fill: #D3D3D3;
  transition: opacity 0.3s ease;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
  align-self: center;
}

.control-btn:active {
  transform: scale(0.95);
}

.control-btn.disabled {
  background: rgba(255, 0, 0, 0.3);
  border-color: rgba(255, 0, 0, 0.5);
}

.control-btn.disabled svg {
  opacity: 0.5;
}

.end-call-btn {
  width: 65px;
  height: 65px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, #ff4444, #cc0000);
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.end-call-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(255, 68, 68, 0.6);
}

.end-call-btn svg {
  width: 24px;
  height: 24px;
  fill: #D3D3D3;
  transition: opacity 0.3s ease;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
  align-self: center;
}

.end-call-btn:active {
  transform: scale(0.9);
}

/* Модалка входящего видео звонка */
.video-call-incoming {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 2px solid #00ff00;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
  text-align: center;
  padding: 30px;
  border-radius: 15px;
  min-width: 300px;
}

.video-call-incoming p {
  margin: 10px 0;
  color: #fff;
}

.video-modal-btn {
  width: 70px;
  height: 70px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-btn svg {
  width: 30px;
  height: 30px;
  fill: white;
  display: block;
  margin: 0 auto;
  align-self: center;
}

.video-accept-btn {
  background: linear-gradient(135deg, #00ff00, #00cc00);
  box-shadow: 0 4px 15px rgba(0, 255, 0, 0.4);
}

.video-accept-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 255, 0, 0.6);
}

.video-cancel-btn {
  background: linear-gradient(135deg, #ff4444, #cc0000);
  box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4);
}

.video-cancel-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(255, 68, 68, 0.6);
}

/* Минимизированный индикатор */
#minimizedVideoCallIndicator {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#minimizedVideoCallIndicator:hover {
  transform: scale(1.1);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .video-call-header {
    padding: 10px 15px; /* Возвращаем исходный отступ для хедера */
  }
  
  .header-avatar {
    width: 35px;
    height: 35px;
  }
  
  .header-name {
    font-size: 14px;
  }
  
  .call-status {
    font-size: 11px;
  }
  
  .call-timer {
    font-size: 30px;
    /* 🕐 Дополнительный отступ для мобильных */
    margin-right: 20px !important;
    padding: 3px 6px;
    width: 120px; /* 📏 Ширина как у #localVideo на планшетах */
  }
  
  #localVideo {
    width: 120px;
    height: 160px;
    top: 107px; /* 60px (indicator top) + 42px (indicator height) + 5px (gap) */
    right: 15px;
    border: none !important;
    box-shadow: none !important;
  }

  .traffic-indicator {
    top: 60px; /* 55px (header bottom) + 5px (gap) */
    right: 15px;
    width: 120px;
    height: 42px;
    font-size: 13px;
  }

  .video-controls {
    gap: 12px;
    padding: 0;
    bottom: 20px;
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
  }
  
  .control-btn {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
  
  .end-call-btn {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }
  
  .control-btn svg {
    width: 20px;
    height: 20px;
    transition: opacity 0.3s ease;
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
    align-self: center;
    fill: #D3D3D3;
  }
  
  .end-call-btn svg {
    width: 20px;
    height: 20px;
    transition: opacity 0.3s ease;
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
    align-self: center;
    fill: #D3D3D3;
  }

  .control-btn.disabled svg {
    opacity: 0.5;
  }
  
  .video-call-incoming {
    margin: 20px;
    padding: 25px;
    min-width: 250px;
  }
  
  .video-modal-btn {
    width: 60px;
    height: 60px;
  }
  
  .video-modal-btn svg {
    width: 25px;
    height: 25px;
    display: block;
    margin: 0 auto;
    align-self: center;
  }
}

@media (max-width: 480px) {
  #localVideo {
    width: 100px;
    height: 133px;
    top: 105px; /* 60px (indicator top) + 40px (indicator height) + 5px (gap) */
    border: none !important;
    box-shadow: none !important;
  }
  
  .call-timer {
    top: 20px !important;;
    margin-right: 20px !important;
    font-size: 30px !important; /* Реальная смена высоты текста */
    width: 100px; /* 📏 Ширина как у #localVideo на мобильных */
  }
  
  .traffic-indicator {
    top: 60px; /* 55px (header bottom) + 5px (gap) */
    width: 100px;
    height: 40px;
    font-size: 12px;
    gap: 5px;
  }

  .video-controls {
    gap: 10px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
  }
  
  .control-btn {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }
  
  .end-call-btn {
    width: 55px;
    height: 55px;
    font-size: 20px;
  }
}

/* Анимации для видео звонков */
@keyframes videoCallPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
  }
}

.video-call-incoming {
  animation: videoCallPulse 2s infinite;
}

/* ===== КОНЕЦ СТИЛЕЙ ДЛЯ ВИДЕО ЗВОНКОВ ===== */

/* Минимизированный кружок */
#minimizedCallIndicator {
  display: none;
}

/* 📱 АГРЕССИВНОЕ КЭШ-БАСТИНГ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ */
@media screen and (max-device-width: 768px) {
  .call-timer {
    top: 20px !important;;
    margin-right: 20px !important;
    font-size: 30px !important;
  }
  
  #localVideo {
    border: none !important;
    box-shadow: none !important;
  }
}

@media screen and (max-device-width: 480px) {
  .call-timer {
    margin-right: 20px !important;
    font-size: 30px !important;
  }
  
  #localVideo {
    border: none !important;
    box-shadow: none !important;
  }
}

/* 📱 iOS Safari специфичные правила */
@supports (-webkit-touch-callout: none) {
  .call-timer {
    margin-right: 20px !important;
  }
  
  #localVideo {
    border: none !important;
    box-shadow: none !important;
  }
}

/* 🤖 Chrome Mobile специфичные правила - АГРЕССИВНОЕ КЭШ-БАСТИНГ */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
  .call-timer {
    top: 20px !important;
    margin-right: 25px !important;
    padding: 4px 8px !important;
    background: rgba(0, 0, 0, 0.151) !important;
  }
  
  #localVideo {
    border: 0px solid transparent !important;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
  }
}

/* 🔥 Дополнительные правила для Chrome на Android */
@supports (-webkit-appearance: none) {
  @media (max-width: 768px) {
    .call-timer {
      margin-right: 25px !important;
      transform: translateX(-5px) !important;
    }
    
    #localVideo {
      border-width: 0 !important;
      border-style: none !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }
  }
}

/* 🔥 МАКСИМАЛЬНО АГРЕССИВНОЕ ПРАВИЛО ДЛЯ Chrome Mobile */
html body .video-call-modal .video-call-container .video-call-header .call-timer {
  margin-right: 25px !important;
}

html body .video-call-modal .video-call-container #localVideo {
  border: 0px !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* QR Scanner Styles */
#qr-scanner-modal {
    display: none; /* скрыта по умолчанию */
    position: fixed; /* вне потока страницы */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 10px; /* отступы для маленьких экранов */
    box-sizing: border-box;
}

/* сам контейнер сканера */
#qr-reader-container {
    width: 90%;
    max-width: 400px; /* ограничение ширины */
    max-height: 90%;  /* не вылезает по высоте */
    background-color: white;
    padding: 15px;
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden; /* чтобы камера не вылезала */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* контейнер камеры внутри модалки */
#qr-reader {
    width: 100%;
    height: calc(100% - 60px); /* оставляем место для кнопок стандартного интерфейса */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

/* кастомизация кнопок стандартного интерфейса html5-qrcode */
#qr-reader__dashboard_section_csr button {
    background-color: #007bff !important;
    color: white !important;
}

/* адаптив для маленьких экранов */
@media (max-width: 480px) {
    #qr-reader-container {
        width: 95%;
        padding: 10px;
    }

    #qr-reader {
        height: calc(100% - 60px); /* автоматически подстраивается */
    }
}