/* cipherMode.css
   Стили для модуля "CryptChat".
   Лёгкая CSS-анимация "Матрицы" — плавное мерцание и смещение символов.
*/

.cipher-toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-family: var(--app-font, Arial, sans-serif);
}

.cipher-toggle-label {
  font-size: 10px;
  color: #00C853;
}

.cipher-switch {
  position: relative;
  width: 13px;
  height: 5px;
}

.cipher-switch input { display: none; }

.cipher-slider {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(90deg,#e4e4e4,#d0d0d0);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  transition: background .25s ease;
}

.cipher-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #004f58;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: transform .25s ease;
}

.cipher-switch input:checked + .cipher-slider { background: linear-gradient(90deg,#7be495,#45c160); }
.cipher-switch input:checked + .cipher-slider .cipher-knob { transform: translateX(22px); }

/* Сообщение в шифротексте */
.cipher-message {
  position: relative;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.cipher-scrambled {
  color: #0f0; /* цвет "матрицы" */
  background: rgba(0,0,0,0.02);
  display: inline-block;
  line-height: 1.2;
  will-change: contents;
  animation: matrixFlicker 1200ms linear infinite;
}

@keyframes matrixFlicker {
  0% { opacity: 0.85; transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(-1px); }
  100% { opacity: 0.85; transform: translateY(0); }
}

/* Скрытый нормальный текст (переключается через JS) */
.cipher-real { display: none; }
.cipher-real.visible { display: inline; color: inherit; }

/* Небольшой контейнер для видео-контроля (скрыт по умолчанию) */
.cipher-video-host {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: 160px;
  height: 120px;
  background: rgba(0,0,0,0.6);
  border-radius: 8px;
  overflow: hidden;
  z-index: 99999;
  display: none; /* показываем только при отладке/настройке */
}

.cipher-video-host.show { display: block; }

/* Утилитарные подсказки */
.cipher-note { font-size: 12px; color: #666; margin-top: 6px; }

.cipher-scrambled-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.35);
    font-family: monospace;
    font-size: 13px;
    color: #00ff88;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre-wrap;
    text-align: center;
    z-index: 1;
}

/* Скрываем превью ссылок, когда сообщение в режиме шифрования */
.cipher-message .link-preview {
    display: none !important;
}