/*  ────────────────────────────────────────────────────────────────
    style.css — версия 22 июня 2025 (AI rev 11)
    Изменения rev 11:
      • Добавлены стили KaTeX (+ mhchem) для корректного рендеринга
        inline- и display-формул, плавного переноса и горизонтального
        скролла длинных выражений.
      • Для display-формул (.katex-display) применён авто-скролл
        вместо перепрыгивания строки.
      • Исправлен размер шрифта <code>kbd</code>/<code>pre</code>
        внутри сообщений, чтобы совпадал с текстом.
      • Обновлено оглавление комментариев.
      • Остальной файл совпадает с rev 10 (21 июня 2025).
   ──────────────────────────────────────────────────────────────── */

/* ===== 0. Safe-area и CSS-vh ===== */
html{
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  height:100%;
  overflow-y:hidden;                /* запрет вертикального скролла */
}
:root{ --app-vh:1vh; }              /* динамическая переменная, правит JS */

/* ===== 1. Ресет ===== */
@import url('https://fonts.googleapis.com/css2?family=Commissioner:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{
  width:100%;
  display:flex;flex-direction:column;
  height:100%;
  overflow-x:hidden;overflow-y:hidden;   /* body без вертикального скролла */
  font-family:'Commissioner',sans-serif;
  background:#fff;
  color:#000;
}
button{-webkit-tap-highlight-color:transparent;user-select:none;outline:none;}
button::-moz-focus-inner{border:0;}
::-webkit-scrollbar{width:3px;height:6px;}
::-webkit-scrollbar-thumb{background:#eec228;border-radius:3px;}
*{scrollbar-width:thin;scrollbar-color:#eec228 transparent;}

/* ===== 2. Переменные ===== */
:root{
  --jungles:#39a38c;--aqua:#62c3a5;--saffron:#eec228;--black:#000;--white:#fff;--edpalm:#28a745;
  --heading-margin-vertical:16px;--msg-shadow:rgba(0,0,0,.1);
  --avatar-size:240px;--avatar-border:8px;--avatar-anim-speed:2s;
  --icon-size:28px;--icon-size-min:20px;--icon-size-max:32px;--icon-k:0.40;
  --nav-height:64px;
  --nav-gap:18px;
  --brick-gap:3px;
}

/* ===== 3. Контейнер (корневой блок WebApp) ===== */
.container{
  position:relative;
  width:100%;
  max-width:1200px;

  /* полная высота экрана */
  height:calc(var(--app-vh)*100);          /* JS меняет --app-vh */

  margin:0 auto;
  padding:calc(16px + 48px + var(--heading-margin-vertical)) 24px 24px;
  display:flex;flex-direction:column;
  background:var(--white);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  overflow-y:auto;
}


/* Современный Safari / iOS 15.4+ умеет 100dvh */
@supports (height:100dvh){
  .container{ height:100dvh; }
}

/* +Навбар → увеличиваем нижний отступ */
body.with-nav .container{
  padding-bottom:calc(24px + var(--nav-height));
}

/* ===== 4. «Обычные» кнопки внутри scroll-контента ===== */
button{
  display:block;width:100%;padding:16px 24px;margin:8px 0;
  background:transparent;border:none;color:var(--jungles);
  font-size:20px;font-weight:700;text-align:center;cursor:pointer;
  transition:color .2s,transform .1s;
}
button:hover{color:var(--aqua);}
button:active{transform:scale(.97);}
.container>button:first-of-type{margin-top:auto;}
.container>button:last-of-type{margin-bottom:auto;}

/* ===== 5. Спец-кнопки (back / send) ===== */
.back-btn{
  position:absolute;top:16px;left:16px;width:48px;height:48px;
  background:var(--jungles);border:none;border-radius:12px;cursor:pointer;
  transition:background .2s,transform .1s;z-index:1000;overflow:visible;
}
.back-btn::before{
  content:'';position:absolute;top:50%;left:50%;
  width:var(--icon-size);height:var(--icon-size);
  background:url('img/arrow.png') center/contain no-repeat;
  transform:translate(-50%,-50%);pointer-events:none;
}
.back-btn:hover{background:var(--aqua);}
.back-btn:active{transform:scale(.97);}

#send-btn{
  position:relative;width:48px;height:48px;
  background:var(--jungles);border:none;border-radius:12px;
  cursor:pointer;transition:background .2s,transform .1s;z-index:1000;
}
#send-btn::before{
  content:'';position:absolute;top:50%;left:50%;
  width:var(--icon-size);height:var(--icon-size);
  background:url('img/send.png') center/contain no-repeat;
  transform:translate(-50%,-50%) scaleX(-1);pointer-events:none;
}
#send-btn:hover{background:var(--aqua);}
#send-btn:active{transform:scale(.97);}
#send-btn.loading::before{display:none!important;}

#new-chat-btn{background:transparent!important;border:none!important;color:var(--jungles)!important;}
#new-chat-btn:hover{color:var(--aqua)!important;}
#new-chat-btn:active{transform:scale(.97);}

.session-wrapper{display:flex;align-items:center;margin-bottom:8px;}
.session-btn{
  flex-grow:1;background:#f0f0f0;border:1px solid #ccc;border-radius:6px;
  color:var(--black);font-size:14px;padding:8px 12px;text-align:left;transition:background .2s;
}
.session-btn:hover{background:#e0e0e0;}
.delete-btn{font-size:1.2em;color:red;cursor:pointer;padding:4px;transition:transform .1s;}
.delete-btn:hover{transform:scale(1.1);}

/* ===== 6. Заголовок ===== */
h1{
  position:absolute;top:16px;left:0;width:100%;
  line-height:48px;font-size:28px;font-weight:700;
  color:var(--saffron);text-align:center;
}

/* ===== 7. Чат, история, ввод ===== */
#history-list{flex:1;overflow-y:auto;padding-right:4px;margin-bottom:16px;}
#chat-box{
  flex:1;overflow-y:auto;padding:12px;background:#f0f8f5;
  border-radius:12px;margin-bottom:16px;
}
.user-msg,.evrika-msg{
  max-width:80%;margin:8px 0;padding:10px 14px;border-radius:20px;
  line-height:1.4;word-break:break-word;
  box-shadow:0 2px 8px var(--msg-shadow);
  transition:transform .1s;
}
.user-msg{background:rgba(98,195,165,.2);margin-left:auto;border-bottom-right-radius:4px;}
.evrika-msg{background:var(--white);margin-right:auto;border-bottom-left-radius:4px;}
.user-msg:hover,.evrika-msg:hover{transform:translateY(-2px);}

/* ===== 7a. KaTeX внутри сообщений ===== */
.user-msg .katex, .evrika-msg .katex{
  font-size:1em;               /* выравниваем с основным текстом */
  line-height:1.4;
}
.user-msg .katex-display,
.evrika-msg .katex-display{
  margin:8px 0;
  overflow-x:auto;             /* длинные формулы скроллятся */
  -webkit-overflow-scrolling:touch;
}
.user-msg .katex-display > .katex,
.evrika-msg .katex-display > .katex{
  margin:0;                    /* убираем внутренний top-margin KaTeX */
}

/* ===== 7b. Примеры кода внутри сообщений ===== */
.user-msg pre,
.evrika-msg pre,
.user-msg kbd,
.evrika-msg kbd{
  font-family:inherit;
  font-size:1em;
}

/* ===== 8. Ввод ===== */
#input-box{display:flex;align-items:center;gap:8px;}
#chat-input{
  flex:1;height:48px;padding:12px;border:1px solid #ccc;border-radius:12px;font-size:16px;
}

/* ===== 9. Powered by EdPalm ===== */
.container .powered-by{
  margin-top:auto;margin-bottom:16px;text-align:center;font-size:.875rem;color:var(--black);
}
.container .powered-by__link{color:var(--edpalm);text-decoration:none;font-weight:600;}
.container .powered-by__link:hover{text-decoration:underline;}

/* ===== 10. Экран загрузки ===== */
.loading-screen{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:100%;height:100vh;background:var(--aqua) url("img/pattern.png") repeat;
}
.loading-img{max-width:50vw;max-height:50vh;}
.progress-bar{width:80%;height:6px;background:var(--aqua);border-radius:3px;overflow:hidden;margin-top:16px;}
.progress-inner{width:0;height:100%;background:var(--white);animation:fillProgress 1.5s forwards linear;}
@keyframes fillProgress{to{width:100%;}}
.loading-screen .powered-by{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-size:.875rem;color:var(--black);
}
.loading-screen .powered-by__link{color:var(--white);}
.loading-screen .powered-by__link:hover{text-decoration:underline;}

/* ===== 11. Аватар с вращающимся градиентом ===== */
.avatar-container{
  position:absolute;top:50%;left:50%;
  width:var(--avatar-size);height:var(--avatar-size);
  transform:translate(-50%,-50%);pointer-events:none;z-index:10;
}
.avatar-container::before{
  content:'';position:absolute;top:calc(-1*var(--avatar-border));left:calc(-1*var(--avatar-border));
  width:calc(100% + var(--avatar-border)*2);height:calc(100% + var(--avatar-border)*2);
  border-radius:50%;
  background:conic-gradient(var(--jungles),var(--aqua),var(--saffron),var(--aqua),var(--jungles));
  opacity:0;transition:opacity .3s ease;box-sizing:content-box;z-index:0;
}
.avatar{position:relative;width:100%;height:100%;border-radius:50%;z-index:1;}
@keyframes rotateGradient{to{transform:rotate(360deg);}}
.avatar-container.playing::before{opacity:1;animation:rotateGradient var(--avatar-anim-speed) linear infinite;}

/* ===== 12. Мини-аватар Web-App ===== */
#avatar-wrap{
  position:absolute;top:72px;right:16px;width:50px;height:50px;z-index:1000;cursor:pointer;
}
#avatar-wrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
@keyframes avatarPulse{0%{transform:scale(1);}50%{transform:scale(1.07);}100%{transform:scale(1);}}
#avatar-wrap.pulse{animation:avatarPulse 1.2s ease-in-out infinite;}
#avatar-wrap.flash{animation:avatarPulse .6s ease-in-out 1;}

/* ===== 13. Спиннер отправки ===== */
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
#send-btn .spinner{
  position:absolute;top:50%;left:50%;width:24px;height:24px;
  transform:translate(-50%,-50%) rotate(0deg);
  border:3px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;
  animation:spin 1s linear infinite;background:transparent;
}

/* ===== 14. Спец-страницы ===== */
body.contacts-page .container{
  padding-top:calc(16px + 48px + var(--heading-margin-vertical) + 16px);
}
body.contacts-page p{margin:12px 0;font-size:16px;line-height:1.6;color:#333;}
body.contacts-page p strong{
  color:#fff;
}
body.contacts-page a{color:var(--jungles);text-decoration:underline;}
body:not(.contacts-page):not(.chat-page){overflow-y:hidden;}
body.about-page .container{overflow-y:auto!important;max-height:100vh;padding-bottom:16px;}

/* ------------------------------------------------------------------
   15. Нижний нав-бар — четыре «резиновые» 3D-кнопки  (rev 16, 27 июн 2025)
   ------------------------------------------------------------------ */
.bottom-bar{
  position:fixed;
  left:0;
  bottom:calc(env(safe-area-inset-bottom) + var(--nav-gap));
  width:100%;
  padding:0 var(--brick-gap);

  /* 4 трека, которые могут сжиматься сколько нужно */
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--brick-gap);

  background:transparent;
  z-index:10000;
}

/* Универсальные стили кнопок */
.nav-btn{
  min-width:0;                       /* разрешаем сжатие */
  width:100%;
  height:var(--nav-height);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;

  padding:8px 4px;                   /* чуть компактнее внутри */
  box-sizing:border-box;             /* всё входит в высоту */

  color:var(--black);
  font-size:clamp(10px,2.8vw,12px);  /* авто-уменьшение шрифта на узких экранах */
  font-weight:600;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;                /* НИКАКОГО переноса слов */
  overflow:hidden;                   /* если всё-таки не влезет — обрежем */

  border:none;
  border-radius:16px;
  cursor:pointer;
  position:relative;

  background:linear-gradient(180deg,#4cccb1 0%,#2d8a77 100%);
  box-shadow:0 6px 12px rgb(0 0 0 / .20), inset 0 -4px 6px rgb(0 0 0 / .30);
  transition:background .2s, box-shadow .2s, transform .1s, color .2s;
}

/* Иконки — чуточку меньше, чтобы гарантированно вмещались */
.nav-btn img{
  width:clamp(var(--icon-size-min),calc(var(--nav-height)*0.32),var(--icon-size-max));
  height:clamp(var(--icon-size-min),calc(var(--nav-height)*0.32),var(--icon-size-max));
  flex:0 0 auto;
  pointer-events:none;
}

/* Hover / Active — шафран */
.nav-btn:hover,
.nav-btn:active{
  background:var(--saffron);
  box-shadow:0 6px 12px rgb(0 0 0 / .20), inset 0 -4px 6px rgb(0 0 0 / .30);
}
.nav-btn:active{transform:translateY(2px);}

/* Шафрановая «Задай вопрос!» */
.nav-btn--main{
  background-image:none;
  background-color:var(--saffron);
}
.nav-btn--main:hover,
.nav-btn--main:active{background-color:var(--saffron);}

/* ===== 16. Слоган ===== */
.tagline {
  text-align: center;
  margin-top: 32px;
  /* базовый шрифт для подзаголовка и ссылок */
  font-size: 16px;
  color: var(--black);
}

/* ===== Стили для ключевой фразы ===== */
.tagline-highlight {
  display: block;
  margin-bottom: 12px;     /* расстояние до подзаголовка */
  font-size: 22px;         /* увеличенный размер */
  font-weight: 700;        /* чуть жирнее */
  color: var(--jungles);   /* фирменный цвет */
  line-height: 1.3;        /* плотный межстрочный интервал */
}

/* ===== Подзаголовок (обычный текст, новая строка) ===== */
.tagline-subtext {
  display: block;
  margin-top: 8px;         /* небольшая «пищаль» сверху */
  /* font-size и color унаследуются от .tagline */
}

/* ===== Ссылка внутри подзаголовка ===== */
.tagline__link {
  color: var(--edpalm);
  font-weight: 600;
  text-decoration: none;
}
.tagline__link:hover {
  text-decoration: underline;
}




/* ===== Override для кнопки «Начать учиться!» ===== */
.bottom-bar .nav-btn.nav-btn--main {
  /* Убираем градиент и ставим сплошной шафран */
  background-image: none;
  background-color: var(--saffron);
}

.bottom-bar .nav-btn.nav-btn--main:hover,
.bottom-bar .nav-btn.nav-btn--main:active {
  /* При наведении/нажатии тот же шафран */
  background-color: var(--saffron);
}


/* ------------------------------------------------------------------
   Конец файла
   ------------------------------------------------------------------ */