/* ===== FormulaVoy AI / FormulaVoy Chat — окно входа =====
   Надстройка над auth-redesign.css (то же окно, что на основном сайте).
   Меняется только левая «витрина» (вместо фото — живой макет продукта) и акцентный цвет.
   Подключать ПОСЛЕ auth-redesign.css. Всё scoped к #authModal. */

/* ---- акценты продуктов ---- */
#authModal[data-app="ai"]   { --av-primary: #9d8cff; --av-primary-hover: #b3a6ff; --av-primary-fg: #12102a; --av-hero: #c9bfff; --av-rgb: 157,140,255; }
#authModal[data-app="chat"] { --av-primary: #4cc9f0; --av-primary-hover: #74d7f5; --av-primary-fg: #08202a; --av-hero: #a8e6f8; --av-rgb: 76,201,240; }

/* места, где в базовом CSS цвет акцента зашит числом */
#authModal[data-app] .av-symbol { border-color: rgba(var(--av-rgb), .22); background: rgba(var(--av-rgb), .07); }
#authModal[data-app] .auth-card input:focus { box-shadow: 0 0 0 3px rgba(var(--av-rgb), .16); }
#authModal[data-app] .auth-card button { box-shadow: inset 0 1px 0 #ffffff20, 0 4px 15px rgba(var(--av-rgb), .08); }
#authModal[data-app] .auth-card button:hover { box-shadow: 0 4px 20px rgba(var(--av-rgb), .22); }
#authModal[data-app] .auth-card button.av-ghost,
#authModal[data-app] .auth-card button.av-ghost:hover { box-shadow: none; }
body[data-app] .phone-country-option.selected { background: rgba(var(--av-rgb), .09); }

/* бейдж рядом с логотипом */
#authModal .av-badge { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 7px; background: rgba(var(--av-rgb), .14); border: 1px solid rgba(var(--av-rgb), .3); color: var(--av-primary); font-size: 11px; font-weight: 800; letter-spacing: .6px; vertical-align: 4px; }
#authModal .av-brand-icon i { margin-left: 0; }
#authModal .av-brand { white-space: nowrap; }
@media (max-width: 420px) { #authModal .av-badge { margin-left: 5px; padding: 2px 6px; font-size: 10px; vertical-align: 3px; } #authModal .av-brand { font-size: 20px; } }

/* ---- левая витрина ---- */
#authModal .av-art { display: flex; flex-direction: column; background: #14151a; }
#authModal .av-art::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(520px 380px at 12% 8%, rgba(var(--av-rgb), .30), transparent 70%),
    radial-gradient(460px 420px at 100% 70%, rgba(var(--av-rgb), .16), transparent 70%),
    linear-gradient(180deg, #17181e, #101114); }
#authModal .av-art::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse at 30% 20%, #000 0%, transparent 75%); }
#authModal .av-art .av-top { padding-bottom: 8px; }
#authModal .av-art .av-top h2 span.av-grad { color: transparent; background: linear-gradient(90deg, var(--av-hero), var(--av-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

#authModal .av-mock { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 8px 38px 118px; min-height: 0; }
#authModal .av-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 88%; opacity: 0; transform: translateY(8px); animation: avMsgIn .5s ease forwards; }
#authModal .av-msg:nth-child(1) { animation-delay: .25s; }
#authModal .av-msg:nth-child(2) { animation-delay: 1.0s; }
#authModal .av-msg:nth-child(3) { animation-delay: 1.8s; }
#authModal .av-msg:nth-child(4) { animation-delay: 2.5s; }
@keyframes avMsgIn { to { opacity: 1; transform: none; } }
#authModal .av-msg.me { align-self: flex-end; flex-direction: row-reverse; }
#authModal .av-ava { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--av-rgb), .18); border: 1px solid rgba(var(--av-rgb), .35); color: var(--av-primary); font-size: 12px; font-weight: 800; }
#authModal .av-bubble { padding: 11px 14px; border-radius: 16px 16px 16px 5px; background: #ffffff10; border: 1px solid #ffffff14; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #f1eeff; font-size: 13.5px; line-height: 1.5; text-align: left; }
#authModal .av-msg.me .av-bubble { border-radius: 16px 16px 5px 16px; background: var(--av-primary); border-color: transparent; color: var(--av-primary-fg); font-weight: 600; }
#authModal .av-bubble small { display: block; margin-top: 5px; color: #ffffff80; font-size: 11px; }
#authModal .av-msg.me .av-bubble small { color: rgba(0,0,0,.45); }

/* «сгенерированная» картинка */
#authModal .av-gen { margin-top: 10px; height: 100px; width: 100%; min-width: 230px; border-radius: 11px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #2b1f5c 0%, #6b3fa0 46%, #ff8a65 78%, #ffd29a 100%); }
#authModal .av-gen::before { content: ""; position: absolute; left: 50%; bottom: 30px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: radial-gradient(circle, #fff6d6, #ffd29a 60%, transparent 72%); }
#authModal .av-gen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(180deg, #1b1740aa, #0f0d26); clip-path: polygon(0 55%, 10% 30%, 18% 52%, 30% 18%, 42% 50%, 55% 25%, 68% 55%, 80% 30%, 100% 58%, 100% 100%, 0 100%); }

/* набор типов */
#authModal .av-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; opacity: 0; animation: avMsgIn .5s 2.5s ease forwards; }
#authModal .av-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #ffffff0d; border: 1px solid #ffffff1c; color: #efeaff; font-size: 12px; font-weight: 600; }
#authModal .av-chips i { color: var(--av-primary); font-size: 11px; }

/* индикатор печати */
#authModal .av-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
#authModal .av-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--av-hero); animation: avDot 1.2s infinite ease-in-out; }
#authModal .av-typing i:nth-child(2) { animation-delay: .15s; }
#authModal .av-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes avDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* голосовое сообщение (чат) */
#authModal .av-voice { display: flex; align-items: center; gap: 10px; min-width: 190px; }
#authModal .av-voice .av-vplay { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.18); font-size: 10px; flex: 0 0 auto; }
#authModal .av-wave { display: flex; align-items: center; gap: 3px; height: 24px; }
#authModal .av-wave i { width: 3px; border-radius: 2px; background: currentColor; opacity: .75; }
#authModal .av-online { position: relative; }
#authModal .av-online::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--av-ok); border: 2px solid #17181e; }

/* ---- адаптив / движение ---- */
@media (max-width: 1100px) {
  #authModal .av-mock { padding: 8px 28px 112px; }
}
@media (prefers-reduced-motion: reduce) {
  #authModal .av-msg, #authModal .av-chips { opacity: 1; transform: none; animation: none; }
  #authModal .av-typing i { animation: none; opacity: .7; }
}

/* ---- прокрутка: вниз можно, вправо-влево нельзя; полоса тонкая и нейтральная (глобальный style.css красит её красным) ---- */
#authModal.modal, #authModal.modal.active { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a3b42 transparent; }
#authModal.modal::-webkit-scrollbar { width: 4px; height: 0; }
#authModal.modal::-webkit-scrollbar-track { background: transparent; }
#authModal.modal::-webkit-scrollbar-thumb { background: #3a3b42; border-radius: 4px; }
#authModal .av-dialog { scrollbar-width: thin; scrollbar-color: #3a3b42 transparent; }
#authModal .av-dialog::-webkit-scrollbar-thumb { background: #3a3b42; }
#authModal .av-shell { max-width: 100vw; overflow-x: clip; }
#authModal .av-header > * { min-width: 0; }

/* ---- телефон: просторная форма (листается вниз), но шапка не шире экрана ---- */
@media (max-width: 800px) {
  #authModal .av-header { min-height: 76px; gap: 8px; width: calc(100% - 32px); }
  #authModal .av-actions { gap: 8px; flex-shrink: 0; }
  #authModal #authLangTrigger { padding: 7px 10px; }
  #authModal #authLangTrigger .lang-picker-trigger-label { display: none; }
  #authModal .av-help-btn span { display: none; }
  #authModal .av-divider { display: none; }
  #authModal .av-layout { width: calc(100% - 32px); margin: 0 auto; padding: 16px 0 40px; }
  #authModal .av-tabs { margin-bottom: 32px; }
  #authModal .av-heading { margin-bottom: 28px; }
  #authModal .auth-card .auth-method-switch { margin-bottom: 28px; }
  #authModal .auth-link { margin-top: 30px; }
  #authModal .av-legal { margin-top: 18px; }
  #authModal .av-footer { padding-top: 22px; }
}
@media (max-width: 420px) {
  #authModal .av-brand { font-size: 19px; gap: 7px; letter-spacing: -1px; }
  #authModal .av-brand-icon { width: 29px; height: 29px; border-radius: 9px; font-size: 13px; }
}