/* ═══════════════════════════════════════════════════════════════════════════
   SpellBook · ВХОД В ПРИВАТНОГО АССИСТЕНТА — САМОДОСТАТОЧНЫЕ стили.

   Один файл на двух потребителей, разметка у них байт-в-байт одна:
     • новый чат (React SPA)  — chat-v2/web/src/components/AssistantLock.tsx,
       файл подключён в chat-v2/web/index.html рядом с /css/auth-modal.css;
     • легаси-страница        — public_html/assistant_login.php (?legacy=1,
       встраивание, аварийный откат нового чата).
   Правка дизайна здесь меняет обе точки входа сразу — как у модалки авторизации.

   Токены объявлены ЛОКАЛЬНО на .alock: страница-хозяин может быть какой угодно
   (маркет-шелл с [data-theme], легаси-чат с body.light-theme, голый SPA) —
   внешний вид от неё не зависит и её стили не ломает.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Локальные токены (тёмная тема по умолчанию, как на сайте) ──────────────── */
.alock{
  --canvas:#141416; --modal:#101011; --surface:#1c1c1f; --raised:#26262a; --wash:#303034;
  --ring:rgba(255,255,255,0.08); --line-2:rgba(255,255,255,0.14);
  --text:#f0f0f0; --text-2:#9a9a9a; --text-3:#6a6a6a; --text-4:#4f4f4f;
  --btn:#f0f0f0; --btn-text:#0d0d0d; --pos:#2ebd85; --neg:#e5484d;
  --font-display:"Chakra Petch","Chakra Petch Fallback",system-ui,sans-serif;
  --font-body:"Exo 2","Exo 2 Fallback",system-ui,sans-serif;
  --ease:cubic-bezier(0.4,0,0.2,1); --spring:cubic-bezier(0.22,1,0.36,1); --dur:200ms;
}
[data-theme="light"] .alock,
body.light-theme .alock{
  --canvas:#f6f6f7; --modal:#ffffff; --surface:#ffffff; --raised:#f0f0f1; --wash:#e8e8ea;
  --ring:rgba(0,0,0,0.10); --line-2:rgba(0,0,0,0.16);
  --text:#18181b; --text-2:#5c5c66; --text-3:#8a8a93; --text-4:#a8a8b0;
  --btn:#18181b; --btn-text:#ffffff; --pos:#1a9e6b; --neg:#d83a3f;
}
@media (prefers-reduced-motion: reduce){ .alock{ --dur:0ms; } }

/* ── Полотно ────────────────────────────────────────────────────────────────── */
/*
 * Слой фиксированный, а не «страница»: в SPA документ заперт (html.sb-lock,
 * chat-v2/web/src/index.css) и не прокручивается вообще, поэтому прокрутка
 * обязана быть своей. Отсчёт от ВИДИМОЙ области: --sb-vv-top / --sb-kb ставит
 * chat-v2/web/src/lib/viewport.ts, когда на мобиле вылезает клавиатура. На
 * обычной PHP-странице этих переменных нет и работают нули из фолбэка.
 */
.alock{
  position:fixed; z-index:60;
  top:var(--sb-vv-top, 0px); left:0; right:0; bottom:var(--sb-kb, 0px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:flex; align-items:flex-start; justify-content:center;
  padding:32px 20px calc(32px + env(safe-area-inset-bottom));
  background:var(--canvas); color:var(--text);
  font-family:var(--font-body); font-size:0.875rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.alock *, .alock *::before, .alock *::after{ box-sizing:border-box; }

/* Карточка. Своей рамкой и тенью отделена от полотна — тот же приём,
   что у панели модалки авторизации (css/auth-modal.css:38-45). */
/* Обёртка «карточка + ссылка назад». Центрируется auto-полями, а не
   align-items:center: при контенте выше контейнера центрирование флексом
   срезает верх и доскроллить до него нельзя. */
.al-outside{
  margin:auto; width:min(420px, 100%);
  display:flex; flex-direction:column; align-items:center;
}

.al-card{
  position:relative; z-index:1;
  width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:34px 28px 28px;
  background:var(--modal); border:1px solid var(--ring); border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,0.46), 0 4px 16px rgba(0,0,0,0.28);
  animation:alPop 0.32s var(--spring) both;
}
[data-theme="light"] .al-card,
body.light-theme .al-card{ box-shadow:0 24px 64px rgba(15,23,42,0.14), 0 3px 12px rgba(15,23,42,0.08); }
@keyframes alPop{ from{ opacity:0; transform:translateY(10px) scale(0.97); } to{ opacity:1; transform:none; } }

/* Тряска карточки на неверных данных — единственная «эмоция» экрана. */
.alock.is-shake .al-card{ animation:alShake 0.42s var(--ease) both; }
@keyframes alShake{
  0%,100%{ transform:none; } 15%{ transform:translateX(-7px); } 30%{ transform:translateX(6px); }
  45%{ transform:translateX(-4px); } 60%{ transform:translateX(3px); } 80%{ transform:translateX(-1px); }
}
@media (prefers-reduced-motion: reduce){
  .al-card, .alock.is-shake .al-card{ animation:none; }
}

/* ── Аватар ассистента + свечение позади ────────────────────────────────────── */
.al-face{ position:relative; width:88px; height:88px; margin:0 0 18px; flex-shrink:0; }
.al-face::before{
  content:""; position:absolute; left:50%; top:50%; z-index:0;
  width:170px; height:170px; margin:-85px 0 0 -85px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,150,60,0.42), rgba(255,120,30,0) 70%);
  filter:blur(22px); opacity:0.9; pointer-events:none;
  animation:alGlow 4s ease-in-out infinite;
}
[data-theme="light"] .al-face::before,
body.light-theme .al-face::before{
  background:radial-gradient(50% 50% at 50% 50%, rgba(74,160,255,0.36), rgba(40,120,255,0) 70%);
  opacity:0.75;
}
@keyframes alGlow{
  0%,100%{ transform:scale(0.92); filter:blur(22px) brightness(0.95); }
  50%    { transform:scale(1.08); filter:blur(25px) brightness(1.25); }
}
@media (prefers-reduced-motion: reduce){ .al-face::before{ animation:none; } }

.al-avatar{
  position:relative; z-index:1; width:88px; height:88px;
  border-radius:24px; overflow:hidden; background:var(--raised);
  border:1px solid var(--ring);
  display:flex; align-items:center; justify-content:center;
}
.al-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.al-avatar-ph{
  font-family:var(--font-display); font-weight:600; font-size:2rem; color:var(--text-2);
  user-select:none;
}

/* Замок-значок в углу аватара: линейная иконка на плотной подложке. */
.al-badge{
  position:absolute; z-index:2; right:-2px; bottom:-2px;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--modal); border:1px solid var(--ring); color:var(--text-2);
}
.al-badge svg{ width:15px; height:15px; }

/* ── Тексты ─────────────────────────────────────────────────────────────────── */
.al-title{
  font-family:var(--font-display); font-weight:600; font-size:1.375rem; line-height:1.25;
  letter-spacing:-0.01em; color:var(--text); margin:0;
  overflow-wrap:anywhere;
}
.al-owner{
  font-size:0.8125rem; line-height:1.4; color:var(--text-3); margin:6px 0 0;
  overflow-wrap:anywhere;
}
.al-sub{
  font-size:0.9375rem; line-height:1.5; color:var(--text-2);
  max-width:320px; margin:12px 0 22px;
}

/* ── Форма ──────────────────────────────────────────────────────────────────── */
.al-form{ width:100%; display:flex; flex-direction:column; gap:10px; text-align:left; }

.al-field{
  display:flex; align-items:center; gap:10px; height:52px; padding:0 14px;
  border:1px solid var(--line-2); border-radius:13px; background:var(--surface);
  transition:border-color var(--dur) var(--ease);
}
.al-field:focus-within{ border-color:var(--text-3); }
.alock.is-bad .al-field{ border-color:color-mix(in srgb, var(--neg) 55%, var(--line-2)); }
.al-field-ic{ flex-shrink:0; display:flex; color:var(--text-3); }
.al-field-ic svg{ width:17px; height:17px; }
.al-input{
  flex:1; min-width:0; height:100%;
  background:none; border:none; outline:none; padding:0;
  -webkit-tap-highlight-color:transparent;
  color:var(--text); font-family:var(--font-body); font-size:1rem; line-height:1.2;
}
.al-input:focus, .al-input:focus-visible{ outline:none; box-shadow:none; }
.al-input::placeholder{ color:var(--text-4); }
/* Автозаполнение браузера красит поле своим синим — гасим (без !important нельзя). */
.al-input:-webkit-autofill,
.al-input:-webkit-autofill:hover,
.al-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
  transition:background-color 9999s ease-out 0s;
}

/* Показать/скрыть пароль */
.al-eye{
  flex-shrink:0; width:34px; height:34px; margin-right:-8px;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:none; color:var(--text-3); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.al-eye:hover{ background:var(--raised); color:var(--text); }
.al-eye:active{ transform:scale(0.94); }
.al-eye svg{ width:17px; height:17px; }

/* Ошибка — та же механика раскрытия, что у модалки авторизации. */
.al-error{
  min-height:0; max-height:0; overflow:hidden; margin:0;
  font-size:0.8125rem; line-height:1.4; color:var(--neg); opacity:0;
  transition:opacity 0.2s var(--ease), max-height 0.2s var(--ease), margin 0.2s var(--ease);
}
.al-error.is-on{ max-height:64px; opacity:1; margin:2px 0 0; }

/* Кнопка входа */
.al-submit{
  position:relative; height:48px; margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:12px; background:var(--btn); color:var(--btn-text);
  font-family:var(--font-display); font-weight:600; font-size:0.9375rem; letter-spacing:-0.01em;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.al-submit:hover{ filter:brightness(0.92); }
.al-submit:active{ transform:scale(0.99); }
.al-submit:disabled{ opacity:0.55; cursor:default; filter:none; transform:none; }
.al-submit-label{ transition:opacity 0.15s var(--ease); }
.al-spin{
  position:absolute; width:18px; height:18px; opacity:0;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  animation:alSpin 0.7s linear infinite;
}
@keyframes alSpin{ to{ transform:rotate(360deg); } }
.alock.is-busy .al-submit-label{ opacity:0; }
.alock.is-busy .al-spin{ opacity:1; }

/* Фокус клавиатурой — серое кольцо, как во всём шелле (css/marketplace.css:593) */
.alock :focus-visible{ outline:2px solid var(--text-2); outline-offset:2px; }
.al-input:focus-visible{ outline:none; }

/* ── Подвал карточки ────────────────────────────────────────────────────────── */
.al-foot{
  font-size:0.75rem; line-height:1.55; color:var(--text-3);
  margin:18px 0 0; max-width:340px; text-align:center;
}
.al-foot a{ color:var(--text-2); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.al-foot a:hover{ color:var(--text); }

/* Кто вошёл — строка «вы вошли как …» при успехе (SPA использует её при handover) */
.al-done{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:0.875rem; color:var(--pos); margin:14px 0 0;
}
.al-done svg{ width:17px; height:17px; }

/* ── Мобилка ────────────────────────────────────────────────────────────────── */
@media (max-width:520px){
  .alock{ padding:20px 14px calc(20px + env(safe-area-inset-bottom)); }
  .al-card{ padding:28px 20px 22px; border-radius:18px; }
  .al-face{ width:80px; height:80px; margin-bottom:14px; }
  .al-avatar{ width:80px; height:80px; border-radius:22px; }
  .al-title{ font-size:1.25rem; }
  /* iOS зумит страницу на полях мельче 16px — здесь ровно 16px. */
  .al-input{ font-size:16px; }
}

/* Экран невысокий (клавиатура на мобиле) — свечение только мешает. */
@media (max-height:600px){
  .al-face::before{ display:none; }
  .al-face{ width:64px; height:64px; margin-bottom:10px; }
  .al-avatar{ width:64px; height:64px; border-radius:18px; }
  .al-card{ padding-top:24px; }
  .al-sub{ margin-bottom:16px; }
}

/* Ссылка «назад» под карточкой — общая для SPA и PHP-страницы. */
.al-back{
  display:inline-flex; align-items:center; gap:6px;
  margin:18px auto 0; padding:8px 14px;
  border:none; border-radius:10px; background:none;
  color:var(--text-3); font-family:var(--font-body); font-size:0.8125rem;
  cursor:pointer; text-decoration:none;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.al-back:hover{ color:var(--text); background:var(--raised); }
.al-back svg{ width:15px; height:15px; }