/* ===== Основа ===== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:root {
  /* Голубо-бирюзовый фон, фиолетовые облачка диалога */
  --bg1: #cdeef9;          /* голубой */
  --bg2: #d6f5ef;          /* бирюзовый */
  --panel: #ffffff;
  --panel-2: #eef4f7;
  --accent: #7c5cff;       /* фиолетовый акцент */
  --accent-dark: #6a49f2;
  --text: #24304a;
  --muted: #6a7b93;
  --bubble-me: #7c5cff;    /* моё сообщение — насыщенно-фиолетовое */
  --bubble-me-text: #ffffff;
  --bubble-them: #ece7ff;  /* сообщение собеседника — светло-фиолетовое */
  --bubble-them-text: #35265f;
  --danger: #ff5d7a;
  --radius: 18px;
}

html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  overscroll-behavior-y: none;
  /* Фон по умолчанию — CSS-версия (павлинья иридесценция) */
  background-color: #5a63c2;
  background-image:
    radial-gradient(130% 110% at 82% 6%,  rgba(150, 110, 214, .95), transparent 55%),
    radial-gradient(120% 110% at 14% 20%, rgba(70, 122, 208, .92), transparent 55%),
    radial-gradient(120% 130% at 6% 88%,  rgba(28, 184, 178, .92), transparent 55%),
    radial-gradient(140% 130% at 94% 96%, rgba(178, 212, 78, .96), transparent 55%),
    radial-gradient(100% 100% at 52% 52%, rgba(96, 156, 196, .45), transparent 72%),
    linear-gradient(150deg, #3f74cb 0%, #7b5fd0 46%, #9ec84c 100%);
  background-attachment: fixed;
}

/* Тонкая «текстура пера» — штрихи (только для CSS-версии) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,.07) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(118deg, rgba(0,0,0,.05) 0 1px, transparent 1px 10px);
  mix-blend-mode: soft-light;
}

/* Медленный иридесцентный «отблеск» (только для CSS-версии) */
body::after {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(46,197,193,0), rgba(124,92,255,.28), rgba(46,197,193,0),
    rgba(178,212,78,.24), rgba(63,111,209,0), rgba(124,92,255,.28), rgba(46,197,193,0));
  filter: blur(46px);
  mix-blend-mode: screen;
  animation: sheen 26s linear infinite;
}
@keyframes sheen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* Фон-фотография — включается классом .bg-photo (переключатель) */
body.bg-photo {
  background:
    linear-gradient(rgba(18, 18, 40, .18), rgba(18, 18, 40, .30)),
    url('/fon.png') center center / cover no-repeat fixed;
}
body.bg-photo::before, body.bg-photo::after { display: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; }

.screen { min-height: 100dvh; }

/* ===== Экран входа ===== */
#screen-login { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box {
  width: 100%; max-width: 360px; background: var(--panel); border-radius: 24px;
  padding: 32px 24px; text-align: center; box-shadow: 0 18px 50px rgba(70, 90, 130, .22);
}
.login-logo { font-size: 44px; }
.login-box h1 { font-size: 24px; margin: 6px 0 4px; }
.login-sub { color: var(--muted); margin-bottom: 22px; }

.user-cards { display: flex; flex-direction: column; gap: 12px; }
.user-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--panel-2); border-radius: 16px; padding: 14px 18px; text-align: left;
}
.user-card:active { transform: scale(.98); }
.uc-emoji { font-size: 28px; }
.uc-name { font-size: 18px; font-weight: 600; }

/* PIN */
.pin-title { margin-bottom: 14px; font-size: 16px; }
.pin-dots { display: flex; gap: 12px; justify-content: center; margin-bottom: 10px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); }
.pin-dot.on { background: var(--accent); border-color: var(--accent); }
.pin-error { color: var(--danger); min-height: 20px; font-size: 14px; margin-bottom: 6px; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.key {
  height: 60px; border-radius: 16px; background: var(--panel-2); font-size: 22px; font-weight: 600;
  color: var(--text);
}
.key:active { background: var(--accent); color: #fff; }
.key-ok { background: var(--accent); color: #fff; }

.link-btn { color: var(--muted); font-size: 14px; margin-top: 16px; text-decoration: underline; }

/* ===== Экран чата ===== */
#screen-main { display: flex; flex-direction: column; height: 100dvh; }
.topbar {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: transparent;
}
.hdr-left { display: flex; align-items: baseline; gap: 8px; margin-right: auto; min-width: 0; }
.hdr-title { font-weight: 700; font-size: 18px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.hdr-status { font-size: 13px; font-style: italic; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); white-space: nowrap; }
.topbar .link-btn { margin: 0; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.icon-btn { font-size: 20px; line-height: 1; padding: 2px 4px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.icon-btn:active { transform: scale(.9); }

.chat-list {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}

.msg {
  position: relative; max-width: 78%; padding: 10px 14px; border-radius: var(--radius);
  line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; cursor: pointer;
  box-shadow: 0 2px 8px rgba(70, 90, 130, .12);
}
.msg.me { align-self: flex-end; background: var(--bubble-me); color: var(--bubble-me-text); border-bottom-right-radius: 6px; }
.msg.them { align-self: flex-start; background: var(--bubble-them); color: var(--bubble-them-text); border-bottom-left-radius: 6px; }
.msg-time { display: block; font-size: 10.5px; opacity: .7; margin-top: 3px; text-align: right; }
.msg.has-img { padding: 5px; }
.msg-img { display: block; width: 220px; max-width: 62vw; border-radius: 12px; cursor: pointer; }
.msg-text { margin: 0; }
.msg.has-img .msg-text { padding: 4px 8px 0; }
.msg.has-img .msg-time { padding: 0 8px 3px; }

/* Галочки «прочитано» */
.msg-tick { opacity: .85; }
.msg-tick.read { color: #86f0ff; opacity: 1; }

/* Реакция в уголке сообщения */
.msg-reaction {
  position: absolute; bottom: -12px; right: 8px; background: #fff;
  border-radius: 999px; padding: 1px 6px; font-size: 13px; box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}
.msg.them .msg-reaction { right: auto; left: 8px; }
.msg + .msg { margin-top: 2px; }

/* Панелька действий: реакции + удалить (по тапу на сообщение) */
.msg-actions {
  position: absolute; top: -46px; right: 0; z-index: 10; display: flex; gap: 2px;
  background: #fff; border-radius: 999px; padding: 4px 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.msg.them .msg-actions { right: auto; left: 0; }
.react-btn { font-size: 19px; line-height: 1; padding: 3px; border-radius: 50%; }
.react-btn.on { background: #ffe1ea; }
.react-btn.del { font-size: 15px; }

/* Разделитель дат */
.date-sep {
  align-self: center; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .28);
  padding: 4px 12px; border-radius: 999px; margin: 8px 0 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* Кнопка удаления одного сообщения (появляется по тапу) */
.msg-del {
  position: absolute; top: -10px; right: -6px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: 13px; line-height: 26px; text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.msg.them .msg-del { right: auto; left: -6px; }

.empty { color: var(--muted); text-align: center; margin: auto; padding: 40px 20px; white-space: pre-line; }

/* Всплывающее уведомление (например, ошибка) */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: var(--danger); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 50; max-width: 90%;
}

/* Поле ввода */
.chat-form {
  display: flex; gap: 8px; padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: transparent;
}
.chat-form input {
  flex: 1; min-width: 0; border: 2px solid var(--panel-2); border-radius: 999px;
  padding: 11px 16px; outline: none; background: #fff; color: var(--text);
}
.chat-form input:focus { border-color: var(--accent); }
.chat-send, .chat-emoji-btn, .chat-photo-btn {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; font-size: 18px;
}
.chat-send { background: var(--accent); color: #fff; }
.chat-emoji-btn, .chat-photo-btn { background: rgba(255, 255, 255, .85); }

.emoji-panel {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  padding: 10px 12px; background: rgba(255, 255, 255, .95); border-top: 1px solid rgba(120, 140, 170, .18);
  max-height: 200px; overflow-y: auto;
}
.emoji-panel button { font-size: 24px; padding: 4px; border-radius: 10px; }
.emoji-panel button:active { background: var(--panel-2); }

/* На большом экране — по центру, как в мессенджере */
@media (min-width: 720px) {
  #screen-main {
    max-width: 680px; margin: 0 auto;
    border-left: 1px solid rgba(120, 140, 170, .18);
    border-right: 1px solid rgba(120, 140, 170, .18);
  }
}