/* Оливия (2026-10-20): баннер «Не хотите читать?» на главной и плавающая панель с шаром. */

.lp-olivia-cta {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 12px 12px 12px 14px;
  border-radius: 20px; border: 1px solid rgba(225, 48, 108, .35);
  background: radial-gradient(120% 140% at 0% 0%, rgba(225, 48, 108, .18), transparent 60%), #141416;
}
.lp-olivia-dot {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), linear-gradient(135deg, #f9a03f, #e1306c 45%, #833ab4);
  box-shadow: 0 0 22px rgba(225, 48, 108, .55); animation: olivia-breath 2.4s ease-in-out infinite;
}
@keyframes olivia-breath { 50% { transform: scale(1.08); box-shadow: 0 0 32px rgba(225, 48, 108, .75); } }
.lp-olivia-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-olivia-cta-text b { font-size: 15px; }
.lp-olivia-cta-text span { font-size: 13px; line-height: 1.4; color: var(--lp-text-2, #b4b4bc); }
.lp-olivia-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 11px 14px; border: 0; border-radius: 999px;
  font: 600 14px/1 var(--font); color: #fff; cursor: pointer; background: linear-gradient(90deg, #e1306c, #833ab4);
}
.lp .lp-olivia-btn:hover { background: linear-gradient(90deg, #e1306c, #833ab4); color: #fff; filter: brightness(1.08); }
.lp-olivia-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Плавающая панель */
.olivia {
  position: fixed; right: 16px; bottom: 16px; z-index: 900; width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; font-family: var(--font);
}
.olivia[hidden] { display: none; }
.olivia-bubble {
  align-self: stretch; padding: 12px 14px; border-radius: 18px; font-size: 14px; line-height: 1.45; color: #fff;
  background: rgba(20, 20, 22, .94); border: 1px solid #2c2c31; backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5); max-height: 30vh; overflow-y: auto;
}
.olivia-bubble[hidden] { display: none; }
.olivia-panel {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 999px;
  background: rgba(20, 20, 22, .94); border: 1px solid #2c2c31; backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.olivia-orb { width: 56px; height: 56px; flex: none; }
.olivia-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.olivia-name { font-size: 14px; color: #fff; }
.olivia-controls { display: flex; gap: 6px; }
.olivia-btn {
  padding: 8px 12px; border-radius: 999px; border: 1px solid #34343a; background: #1d1d21; color: #fff;
  font: 500 13px/1 var(--font); cursor: pointer;
}
.olivia-btn[hidden] { display: none; }
.olivia-btn--x { width: 32px; padding: 8px 0; font-size: 16px; }
.lp .olivia-btn:hover, .olivia-btn:hover { background: #2a2a30; color: #fff; }
.olivia-btn:focus-visible, .olivia-mic:focus-visible, .olivia-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.olivia-form {
  display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(20, 20, 22, .96); border: 1px solid #2c2c31;
}
.olivia-form[hidden] { display: none; }
.olivia-form input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; padding: 8px 10px; font: 400 14px var(--font);
}
.olivia-mic, .olivia-send {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: #2a2a30;
}
.olivia .olivia-mic { background: #2a2a30; }
.olivia .olivia-send { background: linear-gradient(135deg, #e1306c, #833ab4); }
.olivia .olivia-mic.is-rec { background: #ff3b5c; }
.lp .olivia-mic:hover, .lp .olivia-send:hover { color: #fff; filter: brightness(1.1); }
.olivia-mic.is-rec { background: #ff3b5c; animation: olivia-breath 1s ease-in-out infinite; }

/* Раздел, о котором Оливия сейчас рассказывает */
.olivia-focus { position: relative; }
.olivia-focus::after {
  content: ""; position: absolute; inset: -10px; border-radius: 28px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(225, 48, 108, .6), 0 0 40px rgba(225, 48, 108, .25); animation: olivia-focus 1.6s ease-in-out infinite;
}
@keyframes olivia-focus { 50% { box-shadow: 0 0 0 2px rgba(131, 58, 180, .7), 0 0 50px rgba(131, 58, 180, .3); } }

@media (max-width: 520px) {
  .lp-olivia-cta { flex-wrap: wrap; }
  .lp-olivia-cta-text { flex-basis: calc(100% - 66px); }
  .lp-olivia-btn { width: 100%; justify-content: center; }
  .olivia { right: 10px; left: 10px; bottom: 10px; width: auto; }
  .olivia-name { display: none; }
  .olivia-body { justify-content: flex-end; }
  .olivia-bubble { font-size: 13px; padding: 10px 12px; max-height: 18vh; }
  .olivia-orb { width: 44px; height: 44px; }
  .olivia-panel { padding: 6px 8px 6px 6px; }
  .olivia-btn { padding: 7px 10px; font-size: 12.5px; }
  .olivia-btn--x { width: 30px; padding: 7px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-olivia-dot, .olivia-mic.is-rec, .olivia-focus::after { animation: none; }
}

/* Голосовой режим в чате кабинета */
.chat-olivia-btn {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: transparent; -webkit-tap-highlight-color: transparent;
}
.chat-olivia-dot {
  width: 26px; height: 26px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 35% 30%, #fff9, transparent 45%), linear-gradient(135deg, #f9a03f, #e1306c 45%, #833ab4);
  box-shadow: 0 0 14px rgba(225, 48, 108, .55); animation: olivia-breath 2.4s ease-in-out infinite;
}
.chat-olivia-btn:hover, .chat-olivia-btn:focus { background: transparent !important; }
.chat-olivia-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.olivia-voice {
  position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); text-align: center; color: #fff;
  background: radial-gradient(80% 60% at 50% 40%, rgba(131, 58, 180, .35), transparent 70%), rgba(8, 8, 10, .97);
}
.olivia-voice[hidden] { display: none; }
.olivia-voice-orb { width: min(64vw, 300px); height: min(64vw, 300px); }
.olivia-voice-status { margin: 0; font-size: 15px; color: #c9c9d1; letter-spacing: .02em; }
.olivia-voice-text {
  margin: 0; max-width: 34em; min-height: 3em; max-height: 30vh; overflow-y: auto; font-size: 17px; line-height: 1.45;
}
.olivia-voice-actions { display: flex; gap: 10px; margin-top: 8px; }
.olivia-voice-btn {
  padding: 13px 22px; border-radius: 999px; border: 1px solid #3a3a40; background: #1d1d21; color: #fff;
  font: 600 15px/1 var(--font); cursor: pointer;
}
.olivia-voice-btn[hidden] { display: none; }
.olivia-voice-btn--end { background: #ff3b5c; border-color: #ff3b5c; }
.olivia-voice-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .chat-olivia-dot { animation: none; } }

/* Пока человек смотрит сторис — Оливия остаётся поверх, компактно, и ждёт. */
.olivia.is-waiting { z-index: 1100; }
.olivia.is-waiting .olivia-controls, .olivia.is-waiting .olivia-form { display: none; }
.olivia.is-waiting .olivia-panel { width: max-content; align-self: flex-end; }
.olivia.is-waiting .olivia-bubble { align-self: flex-end; max-width: 260px; font-size: 13px; }

/* Шар из киоска рисуется на чёрном — делаем его круглым. */
.olivia-orb, .olivia-voice-orb { border-radius: 50%; background: #000; }
.olivia-voice-orb { box-shadow: 0 0 80px rgba(131, 58, 180, .45); }

/* --- v3 (2026-10-20): Оливия — только шар, без кнопок. Летает к разделу (transform задаёт olivia.js). --- */
.lp-olivia-banner-orb {
  width: 52px; height: 52px; flex: none; border-radius: 50%; background: #000;
  box-shadow: 0 0 22px rgba(131, 58, 180, .55);
}
.olivia {
  position: fixed; left: 0; top: 0; right: auto; bottom: auto; width: auto; display: block; z-index: 900;
  pointer-events: none; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.olivia .olivia-orb {
  display: block; width: 72px; height: 72px; pointer-events: auto; cursor: pointer;
  box-shadow: 0 0 40px rgba(131, 58, 180, .65), 0 0 0 1px rgba(180, 140, 255, .25);
  transition: transform .6s cubic-bezier(.55, 0, .75, .2), opacity .6s ease;
}
.olivia.is-leaving .olivia-orb { transform: scale(.1) translateY(60px); opacity: 0; }
.olivia.is-waiting { z-index: 1100; }
.olivia-caption {
  position: absolute; right: 84px; top: 16px; width: max-content; max-width: min(240px, 60vw);
  padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: #fff;
  background: rgba(20, 20, 22, .92); border: 1px solid #2c2c31; backdrop-filter: blur(8px);
}
.olivia-caption[hidden] { display: none; }
@media (max-width: 520px) {
  .olivia { left: 0; right: auto; bottom: auto; width: auto; }
  .olivia .olivia-orb { width: 60px; height: 60px; }
  .olivia-caption { right: 70px; top: 10px; }
}

/* --- Чат: шар-агент вместо полноэкранного окна (2026-10-20, v2) --- */
.chat-olivia-mini { width: 30px; height: 30px; display: block; border-radius: 50%; background: #000; box-shadow: 0 0 14px rgba(131, 58, 180, .6); }
.chat-olivia-btn.is-on .chat-olivia-mini { box-shadow: 0 0 0 2px #b48cff, 0 0 18px rgba(131, 58, 180, .9); }
.olivia-float {
  position: fixed; right: 18px; bottom: calc(120px + env(safe-area-inset-bottom)); z-index: 1500;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none;
}
.olivia-float[hidden] { display: none; }
.olivia-float-orb {
  width: 96px; height: 96px; border-radius: 50%; background: #000; cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 50px rgba(131, 58, 180, .7), 0 0 0 1px rgba(180, 140, 255, .25);
  animation: olivia-arrive .5s cubic-bezier(.22, 1, .36, 1) both;
  transition: transform .6s cubic-bezier(.55, 0, .75, .2), opacity .6s ease;
}
@keyframes olivia-arrive { from { transform: scale(.2) translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.olivia-float.is-leaving .olivia-float-orb { transform: scale(.1) translateY(60px); opacity: 0; }
.olivia-float-caption {
  max-width: min(280px, 70vw); padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: #fff;
  background: rgba(20, 20, 22, .92); border: 1px solid #2c2c31; backdrop-filter: blur(8px);
}
.olivia-float-caption[hidden], .olivia-float-caption:empty { display: none; }
@media (max-width: 520px) {
  .olivia-float { right: 12px; bottom: calc(110px + env(safe-area-inset-bottom)); }
  .olivia-float-orb { width: 78px; height: 78px; }
}
@media (prefers-reduced-motion: reduce) { .olivia-float-orb { animation: none; } }
@media (min-width: 901px) { .olivia .olivia-orb { width: 96px; height: 96px; } .olivia-caption { right: 108px; top: 24px; } }

/* Крестик у шара — уйти; сам шар — «спросить» (2026-10-21). */
.olivia-close {
  position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1px solid #3a3a40; background: rgba(20, 20, 22, .95); color: #fff; font: 600 16px/1 var(--font);
  cursor: pointer; pointer-events: auto; display: grid; place-items: center;
}
.lp .olivia-close:hover { background: #2a2a30; color: #fff; }
.olivia-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.olivia .olivia-orb[data-state="listening"] { box-shadow: 0 0 0 3px rgba(225, 48, 108, .8), 0 0 50px rgba(225, 48, 108, .7); }