/* ИИ-Ассистент «Спросите об Исламе» (задание № 1644). Цвета и шрифты — переменные сайта (stil.css), поэтому
   светлая, тёмная и «звёздная» темы подхватываются сами. Окно: компьютер — карточка справа внизу, телефон — весь экран. */
.sp-knopka {
  position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + var(--niz));
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 14px;
  border: 0; border-radius: 26px; background: var(--navy); color: #fff; cursor: pointer;
  font: 600 .95rem/1 var(--f-ui); letter-spacing: .01em;
  box-shadow: 0 10px 28px rgba(10, 26, 51, .28), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transition: transform .25s var(--dvizh), box-shadow .25s var(--dvizh), bottom .3s var(--dvizh), opacity .2s;
}
.sp-knopka:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(10, 26, 51, .34); }
.sp-knopka:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; }
.sp-knopka .sp-znak { width: 30px; height: 30px; flex: none; }
.sp-knopka .sp-tochka { position: absolute; top: 9px; left: 36px; width: 9px; height: 9px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 2px var(--navy); }
.sp-otkryto .sp-knopka { opacity: 0; pointer-events: none; transform: translateY(8px); }
:root[data-tema="noch"] .sp-knopka { background: var(--navy-2); box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(92, 207, 255, .25) inset; }
@media (max-width: 1199px) {
  .dok-viden body:not(.geroy-viden) .sp-knopka { bottom: calc(var(--dok-h) + var(--niz) + 14px); }
}
@media (max-width: 599px) {
  .sp-knopka { height: 48px; padding: 0 16px 0 10px; font-size: .9rem; }
  .sp-knopka .sp-znak { width: 28px; height: 28px; }
  .sp-knopka .sp-tochka { top: 8px; left: 30px; }
  body.geroy-viden .sp-knopka { opacity: 0; pointer-events: none; transform: translateY(12px); }   /* первый экран: не закрывать «Читать» */
}

.sp-okno {
  position: fixed; z-index: 60; right: 24px; bottom: 24px; width: 408px; height: min(660px, calc(100vh - 48px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: var(--fon); color: var(--tekst);
  box-shadow: 0 24px 64px rgba(10, 26, 51, .32), 0 0 0 1px rgba(10, 26, 51, .08);
  transform-origin: 100% 100%; animation: sp-poyavl .28s var(--dvizh); hyphens: manual; text-align: left;
}
.sp-okno[hidden] { display: none; }
:root[data-tema="noch"] .sp-okno { box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px var(--sery); }
@keyframes sp-poyavl { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.sp-sh { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 16px; background: var(--navy); color: #fff; }
.sp-sh .sp-znak { width: 38px; height: 38px; flex: none; }
.sp-sh-t { flex: 1; min-width: 0; }
.sp-sh h2 { margin: 0; font: 600 1.05rem/1.2 var(--f-ui); color: #fff; letter-spacing: 0; }
.sp-sh p { margin: 3px 0 0; font: 400 .8rem/1.3 var(--f-ui); color: rgba(255, 255, 255, .72); }
.sp-sh button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: rgba(255, 255, 255, .85); cursor: pointer; }
.sp-sh button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sp-sh button:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.sp-sh button svg { width: 20px; height: 20px; }
.sp-sh .sp-novyy[hidden] { display: none; }

.sp-lenta { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; scroll-behavior: smooth; }
.sp-privet { margin: 0 0 14px; font: 400 1rem/1.6 var(--f-tekst); color: var(--tekst); }
.sp-privet b { color: var(--zag); font-weight: 600; }
.sp-podskazki { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.sp-podskazki button { width: 100%; padding: 11px 14px; border: 1px solid var(--sery); border-radius: 12px; background: var(--fon);
  color: var(--zag); font: 500 .92rem/1.35 var(--f-ui); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.sp-podskazki button:hover { background: var(--fon-2); border-color: var(--akcent-t); }
.sp-podskazki button:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sp-podskazki-z { margin: 18px 0 8px; font: 600 .75rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-2); }

.sp-v { display: flex; justify-content: flex-end; margin: 16px 0 10px; }
.sp-v p { max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--fon-3); color: var(--zag);
  font: 400 .95rem/1.5 var(--f-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-o { margin: 0 0 6px; font: 400 1rem/1.62 var(--f-tekst); color: var(--tekst); overflow-wrap: break-word; }
.sp-o p { margin: 0 0 .7em; }
.sp-o ul, .sp-o ol { margin: 0 0 .7em; padding-left: 1.2em; }
.sp-o li { margin: .2em 0; }
.sp-o strong { color: var(--zag); font-weight: 600; }
.sp-o a { color: var(--akcent-t); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sp-o blockquote { margin: .2em 0 .8em; padding: 10px 14px; border-left: 3px solid var(--akcent); border-radius: 0 10px 10px 0;
  background: var(--fon-2); color: var(--zag); font-size: .96rem; }
.sp-o blockquote p:last-child { margin: 0; }
.sp-ist { margin: 4px 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.sp-ist a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--sery); border-radius: 12px;
  color: var(--zag); text-decoration: none; font: 500 .86rem/1.3 var(--f-ui); transition: background .15s, border-color .15s; }
.sp-ist a:hover { background: var(--fon-2); border-color: var(--akcent-t); }
.sp-ist svg { width: 18px; height: 18px; flex: none; color: var(--akcent-t); }
.sp-ist-z { margin: 10px 0 6px; font: 600 .72rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-2); }
.sp-zamet { margin: 10px 0; padding: 10px 14px; border-radius: 12px; background: var(--fon-2); color: var(--tekst); font: 400 .9rem/1.45 var(--f-ui); }

.sp-dumaet { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; color: var(--tekst-2); font: 400 .88rem/1 var(--f-ui); }
.sp-dumaet i { display: inline-flex; gap: 4px; }
.sp-dumaet i b { width: 6px; height: 6px; border-radius: 50%; background: var(--akcent); animation: sp-tochki 1.2s infinite ease-in-out; }
.sp-dumaet i b:nth-child(2) { animation-delay: .15s; }
.sp-dumaet i b:nth-child(3) { animation-delay: .3s; }
@keyframes sp-tochki { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.sp-forma { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--sery); border-radius: 14px; background: var(--fon); transition: border-color .15s, box-shadow .15s; }
.sp-forma:focus-within { border-color: var(--akcent-t); box-shadow: 0 0 0 3px var(--metka); }
.sp-forma textarea { flex: 1; min-width: 0; max-height: 140px; margin: 0; padding: 8px 0; border: 0; outline: 0; resize: none;
  background: none; color: var(--zag); font: 400 1rem/1.4 var(--f-ui); }
.sp-forma textarea::placeholder { color: var(--tekst-2); }
.sp-forma button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: var(--knopka-fon); color: var(--knopka-tekst); cursor: pointer; transition: background .15s, opacity .15s; }
.sp-forma button:hover { background: var(--knopka-fon-2); }
.sp-forma button:disabled { opacity: .45; cursor: default; }
.sp-forma button:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sp-forma button svg { width: 20px; height: 20px; }
.sp-niz { flex: none; margin: 0; padding: 8px 16px calc(10px + var(--niz)); color: var(--tekst-2); font: 400 .74rem/1.4 var(--f-ui); text-align: center; }
.sp-niz b { font-weight: 600; color: var(--tekst); }

@media (max-width: 599px) {
  .sp-okno { inset: 0; width: auto; height: auto; border-radius: 0; animation-name: sp-snizu; }
  .sp-sh { padding-top: max(12px, env(safe-area-inset-top)); }
  .sp-otkryto, .sp-otkryto body { overflow: hidden; }
  @keyframes sp-snizu { from { transform: translateY(24px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .sp-okno, .sp-knopka { animation: none; transition: none; }
  .sp-dumaet i b { animation: none; opacity: .7; }
  .sp-lenta { scroll-behavior: auto; }
}
@media print { .sp-knopka, .sp-okno { display: none !important; } }