:root {
  --primary: #ff005c;
  --primary2: #ff3b85;
  --bg1: #0a0a0c;
  --bg2: #141016;
  --glass: rgba(18,18,18,0.62);
  --glass-border: rgba(255,255,255,0.08);
  --text: #ffffff;
  --muted: rgba(255,255,255,0.55);
  --bubble-in: #1d1a20;
  /* фон чата (тёмная подложка под паттерн-картинку с позами); URL ставится из app.js */
  --chat-bg-color: #0d0b10;
  --chat-bg-image: none;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  width:100%; min-height:100%;
  background:#000;
  font-family:'Inter',sans-serif;
  color:var(--text);
  overflow:hidden;
}

.bg {
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,0,92,0.12), transparent 45%),
    linear-gradient(160deg, var(--bg2), var(--bg1));
}

.noise {
  position:fixed; inset:0; z-index:0; opacity:0.025; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* Заглушка прямого захода */
.gate {
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--bg2), var(--bg1));
  padding:24px;
}
.gate-inner { text-align:center; }
.gate-lock { font-size:46px; margin-bottom:14px; opacity:0.85; }
.gate-text { font-size:16px; font-weight:600; color:rgba(255,255,255,0.7); }

.app {
  position:relative; z-index:1;
  width:100%; height:100vh; height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  padding-top:max(14px, env(safe-area-inset-top));
  padding-bottom:max(14px, env(safe-area-inset-bottom));
}

.card {
  width:100%; max-width:440px;
  height:100%; max-height:880px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:28px;
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
  display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}

/* Шапка */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px 10px; flex:0 0 auto;
}
.topbar-left { display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; margin-right:12px; }
.geo-flag {
  width:30px; height:30px; border-radius:50%; object-fit:cover; display:block;
  border:2px solid rgba(255,255,255,0.18);
  box-shadow:0 4px 14px rgba(0,0,0,0.45); background:#15151a; flex:0 0 auto;
}
.brand {
  flex:1 1 auto; min-width:0;
  font-size:clamp(14px, 4.4vw, 18px); font-weight:800; letter-spacing:0.2px;
  line-height:1.12; color:#fff; opacity:0.96;
}
.online-block { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.online-label { font-size:clamp(9px, 2.7vw, 10.5px); font-weight:400; letter-spacing:0.4px; line-height:1; color:rgba(255,255,255,0.45); white-space:nowrap; }
.online-row { display:flex; align-items:center; justify-content:center; gap:5px; font-size:clamp(9px, 2.7vw, 10.5px); font-weight:400; letter-spacing:0.4px; line-height:1; color:rgba(255,255,255,0.45); }
.online-row #onlineCount { font-variant-numeric:tabular-nums; letter-spacing:0.3px; }
.dot { width:8px; height:8px; border-radius:50%; background:#00ff5a; box-shadow:0 0 8px #00ff5a; animation:pulse 0.8s infinite; flex:0 0 auto; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.55; transform:scale(0.82); } }

.divider { height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); margin:0 14px; flex:0 0 auto; }

/* Контакт */
.contact { display:flex; align-items:center; gap:12px; padding:12px 16px; flex:0 0 auto; }
.avatar-wrap { position:relative; flex:0 0 auto; width:52px; height:52px; }
.avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; display:block; background:#221c26; }
.avatar-ring { position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--primary); box-shadow:0 0 12px rgba(255,0,92,0.5); pointer-events:none; }
.contact-name { font-size:18px; font-weight:800; line-height:1.2; }
.contact-status { display:flex; align-items:center; gap:6px; font-size:13px; color:#00ff5a; margin-top:2px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#00ff5a; box-shadow:0 0 7px #00ff5a; animation:pulse 0.8s infinite; }

/* Чат + тёмный паттерн-фон (картинка с позами по URL) */
.chat {
  flex:1 1 auto; overflow-y:auto;
  padding:16px 14px 10px;
  display:flex; flex-direction:column; gap:10px;
  -webkit-overflow-scrolling:touch;
  background-color:var(--chat-bg-color);
  background-image:var(--chat-bg-image);
  background-repeat:repeat;
  background-size:340px auto;
}

.bubble {
  max-width:80%; padding:11px 14px;
  font-size:14.5px; line-height:1.45; border-radius:18px;
  opacity:0; transform:translateY(8px); animation:bubbleIn 0.32s ease forwards;
}
@keyframes bubbleIn { to { opacity:1; transform:translateY(0); } }
.bubble.in { align-self:flex-start; background:var(--bubble-in); border:1px solid rgba(255,255,255,0.06); border-bottom-left-radius:6px; }

/* Фото девушки (чёткое) */
.bubble.photo { align-self:flex-start; padding:4px; background:var(--bubble-in); border:1px solid rgba(255,255,255,0.07); }
.bubble.photo img { display:block; width:200px; max-width:72vw; height:auto; border-radius:14px; }

/* Индикатор печати */
.typing { align-self:flex-start; display:flex; align-items:center; gap:5px; padding:13px 16px; background:var(--bubble-in); border:1px solid rgba(255,255,255,0.06); border-radius:18px; border-bottom-left-radius:6px; }
.typing span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.5); animation:typingBounce 1.2s infinite ease-in-out; }
.typing span:nth-child(2){ animation-delay:0.2s; }
.typing span:nth-child(3){ animation-delay:0.4s; }
@keyframes typingBounce { 0%,60%,100% { transform:translateY(0); opacity:0.5; } 30% { transform:translateY(-5px); opacity:1; } }

/* Видео-кружок: размытое видео -> кольцо загрузки 1.7s -> чёткое + play */
.video-circle {
  align-self:flex-start; flex:0 0 auto;
  position:relative; width:150px; height:150px; min-height:150px; border-radius:50%;
  overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,0.10);
  opacity:0; transform:translateY(8px); animation:bubbleIn 0.32s ease forwards;
  background:#000;
}
.vc-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(9px) brightness(0.8); transition:filter 0.4s ease; }
.video-circle.ready .vc-video { filter:none; }

/* Кольцо загрузки (SVG поверх) */
.vc-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.vc-ring .track { fill:none; stroke:rgba(255,255,255,0.15); stroke-width:5; }
.vc-ring .bar { fill:none; stroke:var(--primary); stroke-width:5; stroke-linecap:round; stroke-dasharray:289; stroke-dashoffset:289; animation:ringLoad 1.7s linear forwards; }
@keyframes ringLoad { to { stroke-dashoffset:0; } }
.video-circle.ready .vc-ring { opacity:0; transition:opacity 0.3s ease; }

/* Кнопка play (серая полупрозрачная, в стиле сайта) */
.vc-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.6);
  width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(20,20,24,0.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,0.25);
  display:none; align-items:center; justify-content:center;
}
.vc-play svg { width:22px; height:22px; margin-left:3px; }
.video-circle.ready .vc-play { display:flex; animation:playPop 0.3s ease forwards; }
@keyframes playPop { to { transform:translate(-50%,-50%) scale(1); } }

/* Поле ввода (антураж) */
.composer { flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 12px; padding-bottom:max(10px, env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,0.06); background:rgba(0,0,0,0.28); }
.ic-btn { flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:none; background:transparent; color:var(--primary); display:flex; align-items:center; justify-content:center; cursor:default; }
.ic-btn svg { width:24px; height:24px; }
.msg-input { flex:1 1 auto; min-width:0; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); border-radius:22px; padding:12px 16px; font-size:15px; color:#fff; font-family:inherit; outline:none; pointer-events:none; }
.msg-input::placeholder { color:rgba(255,255,255,0.4); }
.send-btn { flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:none; cursor:default; background:#000; box-shadow:0 6px 16px rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.send-btn svg { width:22px; height:22px; }

/* Пре-permission плашка */
.prompt-overlay { position:fixed; inset:0; z-index:50; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,0.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); padding:16px; padding-bottom:max(16px, env(safe-area-inset-bottom)); }
.prompt-overlay.show { display:flex; animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.prompt-card { width:100%; max-width:420px; background:#17141a; border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:24px 22px; text-align:center; animation:slideUp 0.28s ease; }
@keyframes slideUp { from{transform:translateY(30px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.prompt-icon { font-size:38px; margin-bottom:10px; }
.prompt-title { font-size:16.5px; font-weight:700; line-height:1.4; margin-bottom:20px; }
.prompt-title b { color:var(--primary); }
.prompt-allow { width:100%; border:none; cursor:pointer; border-radius:18px; padding:16px; font-size:15.5px; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary2)); box-shadow:0 12px 26px rgba(255,0,92,0.34); line-height:1.3; }
.prompt-allow:active { transform:scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .dot,.status-dot,.typing span,.bubble,.video-circle,.vc-ring .bar { animation:none !important; opacity:1 !important; transform:none !important; }
  .video-circle .vc-video { filter:none !important; }
  .video-circle .vc-play { display:flex !important; transform:translate(-50%,-50%) scale(1) !important; }
}
/* === Фикс мобильного скролла: на телефоне чат на весь экран === */
@media (max-width: 560px) {
  .app {
    padding: 0;
    align-items: stretch;
  }
  .card {
    max-width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: none;
  }
}
/* ===============================================================
 *  Индикатор "записывает видео" (стиль WhatsApp voice-recording,
 *  камера вместо микрофона). Вставить в style.css Сайта 2.
 * =============================================================== */
.recording {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  max-width: 80%;
  margin: 4px 0;
  padding: 10px 14px;
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  background: rgba(20, 20, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Пульсирующая красная точка "REC" */
.recording .rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b30;
  flex-shrink: 0;
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

/* Иконка камеры */
.recording .rec-cam {
  width: 20px;
  height: 20px;
  color: #ff3b30;
  flex-shrink: 0;
}

/* Бегущая "волна" записи (столбики, как аудио-волна в WhatsApp) */
.recording .rec-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}
.recording .rec-wave i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
  animation: recWave 1s ease-in-out infinite;
}
.recording .rec-wave i:nth-child(1) { height: 6px;  animation-delay: 0s;    }
.recording .rec-wave i:nth-child(2) { height: 12px; animation-delay: 0.1s;  }
.recording .rec-wave i:nth-child(3) { height: 16px; animation-delay: 0.2s;  }
.recording .rec-wave i:nth-child(4) { height: 10px; animation-delay: 0.3s;  }
.recording .rec-wave i:nth-child(5) { height: 16px; animation-delay: 0.4s;  }
.recording .rec-wave i:nth-child(6) { height: 12px; animation-delay: 0.5s;  }
.recording .rec-wave i:nth-child(7) { height: 6px;  animation-delay: 0.6s;  }
@keyframes recWave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}