/* ============ DOSUDEBKA ============ */

:root{
  --pink: #ff7fa5;
  --pink-deep: #e75480;
  --cream: #fff6ec;
  --cream-glass: rgba(255,246,236,.88);
  --ink: #2d2126;
  --gold: #ffd166;
  --radius: 28px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }

body{
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #1a1216; /* виден, пока грузится картинка */
  overflow-x: hidden;
}
::selection{ background: var(--pink); color:#fff; }

/* ============ параллакс-фон ============ */
.scene{
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
}
.parallax{
  position: absolute; left: 0; top: -30%;
  width: 100%; height: 160%;
  will-change: transform;
}
.vignette{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(20,10,14,.55) 100%);
}

/* --- картинка зала суда --- */
.bg{
  position: absolute; inset: 0;
  background: url('images/bg-court.jpg') center / cover no-repeat;
}

/* заглушка аватара бота, если картинки нет — монограмма вместо эмодзи */
.avatar-fallback{
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: var(--pink-deep);
  background: #ffe3ea; border: 3px solid var(--pink);
}

/* ============ блюр фона при прокрутке (только фон, не контент) ============ */
.blur{
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(20,10,14,.15);
  -webkit-backdrop-filter: blur(12px) brightness(.82) saturate(1.1);
  backdrop-filter: blur(12px) brightness(.82) saturate(1.1);
}

/* ============ первый экран ============ */
.hero{
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 20px; padding: 24px;
  position: relative;
}
.hero-inner{ display: flex; flex-direction: column; align-items: center; gap: 20px; will-change: transform, opacity; }
.hero h1{
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 11vw, 8.5rem);
  color: #fff; letter-spacing: .04em; line-height: 1;
  text-shadow: 0 10px 40px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.25);
}
.hero-sub{
  color: #fff; font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 600; max-width: 700px; line-height: 1.5;
  text-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.scroll-hint{
  position: absolute; bottom: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #fff; opacity: .85;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
}
.scroll-hint .arrow{ font-size: 1.6rem; animation: bounce 1.6s infinite; }
@keyframes bounce{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(10px) } }

/* ============ секции ============ */
.section{ position: relative; z-index: 2; padding: 70px 20px; display: flex; justify-content: center; }

.panel{
  width: min(880px, 100%);
  background: var(--cream-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(20,10,16,.35);
  padding: clamp(24px, 4.5vw, 48px);
}
.panel h2{
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  margin-bottom: 18px; line-height: 1.25;
}
.lead{ line-height: 1.65; font-size: 1.02rem; }

/* ============ чат ============ */
.chat-head{
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 2px dashed rgba(45,33,38,.15);
}
.chat-head img{
  width: 58px; height: 58px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--pink);
}
.chat-head .who{ display: flex; flex-direction: column; }
.chat-head .who b{ font-size: 1.1rem; }
.chat-head .who span{ font-size: .85rem; color: #8a7880; }
.online{
  margin-left: auto; font-size: .78rem; font-weight: 800;
  color: #128a3e; background: #e3f9ea;
  padding: 5px 12px; border-radius: 999px;
}

.chat-log{
  display: flex; flex-direction: column; gap: 10px;
  max-height: 440px; overflow-y: auto;
  padding: 6px 4px; scroll-behavior: smooth;
}
.msg{
  max-width: 80%; padding: 12px 16px; border-radius: 18px;
  line-height: 1.55; font-size: .95rem; white-space: pre-wrap;
  animation: pop .25s ease-out;
}
@keyframes pop{ from{ transform: scale(.96); opacity: 0 } to{ transform: scale(1); opacity: 1 } }
.msg.bot{
  align-self: flex-start; background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-bottom-left-radius: 6px;
}
.msg.user{
  align-self: flex-end; background: var(--pink); color: #fff;
  border-bottom-right-radius: 6px;
}
.msg.typing{ min-width: 64px; }
.msg.typing::after{ content: '•••'; letter-spacing: 3px; animation: dots 1.2s infinite; }
@keyframes dots{ 0%, 100%{ opacity: .25; } 50%{ opacity: 1; } }

/* «рабочее» сообщение: спиннер + таймер, пока ИИ составляет документ */
.msg.working{ display: flex; align-items: center; gap: 10px; min-width: 240px; }
.msg.working .spinner{
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(231,84,128,.25);
  border-top-color: var(--pink-deep);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(1turn); } }
.msg.working .dots{ display: inline-flex; gap: 3px; }
.msg.working .dots i{
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--pink-deep); opacity: .25;
  animation: dots-pulse 1.2s infinite;
}
.msg.working .dots i:nth-child(2){ animation-delay: .2s; }
.msg.working .dots i:nth-child(3){ animation-delay: .4s; }
@keyframes dots-pulse{ 0%, 100%{ opacity: .25; } 50%{ opacity: 1; } }
.msg.working .timer{
  margin-left: auto; font-size: .78rem; color: #8a7880;
  font-variant-numeric: tabular-nums;
}

/* поле ввода и кнопки */
.chat-dock{ padding-top: 6px; }
.chips{ display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.chip{
  font: inherit; font-weight: 700; font-size: .92rem;
  cursor: pointer; padding: 10px 16px; border-radius: 999px;
  background: #fff; color: var(--pink-deep);
  border: 2px solid var(--pink);
  transition: transform .15s, background .15s, color .15s;
}
.chip:hover{ background: var(--pink); color: #fff; transform: translateY(-2px); }
.chip:active{ transform: translateY(0); }

.ask{ display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.ask textarea{
  font: inherit; color: var(--ink);
  width: 100%; min-height: 100px; resize: vertical;
  border-radius: 14px; border: 2px solid rgba(45,33,38,.15);
  padding: 12px 14px; outline: none; background: #fff;
}
.ask textarea:focus{ border-color: var(--pink); }
button.primary{
  font: inherit; font-weight: 800; cursor: pointer;
  align-self: flex-end;
  background: var(--pink-deep); color: #fff;
  border: none; border-radius: 999px;
  padding: 12px 24px; transition: filter .15s, transform .15s;
}
button.primary:hover{ filter: brightness(1.08); transform: translateY(-1px); }

/* ============ подвал ============ */
.footer{
  position: relative; z-index: 2; margin-top: 60px;
  background: rgba(26,16,21,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #f7e9df; text-align: center;
  padding: 36px 20px 30px;
}
.footer .mail{ font-size: 1.05rem; font-weight: 600; }
.footer .mail a{ color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.footer .tiny{ margin-top: 10px; font-size: .8rem; opacity: .55; }

/* ============ адаптив ============ */
@media (max-width: 640px){
  .panel{ border-radius: 20px; }
  .msg{ max-width: 90%; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .scroll-hint .arrow{ animation: none; }
  .msg{ animation: none; }
  .msg.working .spinner{ animation: none; border-left-color: var(--pink-deep); }
  .msg.working .dots i{ animation: none; opacity: .6; }
}