/* ==========================================================================
   Баксик — помощник в кабинетах IS Coach (30.10.2026)
   Кнопка = сам Баксик с шапкой (анимация падения шапки), чат — без аватарки в шапке.
   Палитра IS Coach: тёмно-синий #1B3A6B, бирюза #5BA4A4, золото #D4AF6A.
   ========================================================================== */

/* ---------- кнопка: Баксик с шапкой ---------- */
#bk-btn {
    position: fixed; right: 14px; bottom: 14px;
    width: 118px; height: 150px; padding: 0; border: 0;
    background: transparent; cursor: pointer; z-index: 9990;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .65))
            drop-shadow(0 10px 18px rgba(27, 58, 107, .28));
    transition: transform .25s ease, opacity .3s ease;
}
#bk-btn:hover, #bk-btn.bk-open { transform: scale(1.06); }

/* сцена: сверху поле под шапку, чтобы она не обрезалась.
   display:block обязателен — внутри <button> элементы по умолчанию inline,
   и тогда clientWidth/clientHeight = 0 (шапка «крутится на месте»). */
.bk-stage { display: block; position: relative; width: 100%; padding-top: 34%; }
.bk-chars {
    display: block; position: relative;
    transform-origin: 50% 92%;
    animation: bkBreath 4.2s ease-in-out infinite;
}
@keyframes bkBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.bk-baksik { display: block; width: 100%; height: auto; }
.bk-cap {
    position: absolute; left: 0; top: 0; width: 62%; height: auto;
    transform-origin: 50% 50%; will-change: transform; pointer-events: none;
}

/* ---------- панель чата ---------- */
#bk-panel {
    position: fixed; right: 14px; bottom: 172px;
    width: 340px; max-width: calc(100vw - 24px);
    height: min(470px, calc(100vh - 200px));   /* верх окна не уходит за экран */
    z-index: 9991; display: none; flex-direction: column;
    background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 18px 50px rgba(27, 58, 107, .26);
    border: 1px solid rgba(27, 58, 107, .08);
}
#bk-panel.bk-show { display: flex; }

.bk-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    /* градиент от основного цвета сайта (кабинетная зелёная гамма) */
    background: linear-gradient(135deg, #1E6B5C, #2FA184 60%, #5BA4A4);
    color: #fff;
}
/* аватарку в шапке чата не ставим — Баксика видно на кнопке (решение Ирины 30.10) */
.bk-title { flex: 1; font-family: "Playfair Display", serif; font-size: 20px; font-weight: 600; line-height: 1.15; }
.bk-title small {
    display: block; font-family: "Inter", sans-serif; font-size: 12px;
    font-weight: 400; opacity: .8; letter-spacing: .3px;
}
.bk-clear, .bk-close {
    border: 0; background: transparent; color: #fff; cursor: pointer;
    font-size: 17px; line-height: 1; opacity: .75; padding: 4px;
}
.bk-clear:hover, .bk-close:hover { opacity: 1; }

.bk-msgs {
    flex: 1; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 8px; background: #fbfcfd;
}
.bk-m {
    max-width: 87%; padding: 9px 13px; border-radius: 14px;
    font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.5;
    white-space: pre-wrap; word-wrap: break-word;
}
.bk-m.bot { background: #eef4f8; color: #23384a; border-bottom-left-radius: 4px; align-self: flex-start; }
.bk-m.usr { background: #1E6B5C; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.bk-m a { color: #1E6B5C; }

.bk-typing { display: none; font-size: 12px; color: #6d8194; padding: 0 14px 6px; animation: bkTyping 1.2s ease-in-out infinite; }
@keyframes bkTyping { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.bk-inp { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(27, 58, 107, .1); background: #fff; }
.bk-inp input {
    flex: 1; border: 1px solid rgba(27, 58, 107, .18); border-radius: 12px;
    padding: 9px 12px; font-size: 13px; outline: none; color: #23384a;
}
.bk-inp input:focus { border-color: #5BA4A4; }
.bk-inp button {
    border: 0; border-radius: 12px; padding: 9px 14px; cursor: pointer;
    background: #1E6B5C; color: #fff; font-size: 13px; font-weight: 600;
}
.bk-inp button:disabled { opacity: .5; }

@media (max-width: 480px) {
    #bk-btn { width: 96px; height: 124px; }
    #bk-panel { height: min(62vh, 440px); max-height: calc(100vh - 170px); bottom: 146px; }
}

/* ---------- 30.10.2026 (Ирина): на странице УРОКА Баксик не поверх видео ----------
   Кнопка стоит в левой колонке под списком уроков (в потоке, а не fixed),
   чат раскрывается снизу слева. В ЛКС и ЛКК всё остаётся как было. */
/* 30.10.2026 (Ирина): левая колонка урока — зелёная панель уроков сверху,
   Баксик ПОД ней, на светлом фоне страницы. 130px — запас под шапку сайта. */
/* страница урока: верхний отступ меньше — колонке остаётся больше высоты */
.lesson-wrap--baksik { padding-top: 12px; }

.lesson-left {
    position: sticky;
    top: 8px;
    /* 30.10.2026 (Ирина): колонка доходит почти до низа окна —
       100px запаса хватает под шапку сайта; панель уроков тянется над Баксиком,
       а сам Баксик стоит у нижнего края */
    height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
}
.lesson-left .lesson-side {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}
.lesson-left .lesson-nav {
    flex: 1 1 auto;
    max-height: none;
    min-height: 100px;
    overflow-y: auto;
}
.lesson-left .bk-dock { flex: none; margin-top: 14px; }
@media (max-width: 900px) {
    .lesson-left { position: static; height: auto; }
    .lesson-left .lesson-nav { max-height: 40vh; }
}

.bk-dock { margin-top: 14px; }
.bk-dock #bk-btn {
    position: static;
    display: block;
    width: 104px;
    height: 132px;
    margin: 0 auto;
}
.bk-dock #bk-panel {
    left: 14px;
    right: auto;
    /* 30.10.2026 (Ирина): окно чата уже на 1 см и поднято на 1,5 см */
    width: 302px;
    bottom: 70px;
    height: min(440px, calc(100vh - 96px));
}
@media (max-width: 480px) {
    .bk-dock #bk-btn { width: 92px; height: 117px; }
    .bk-dock #bk-panel { left: 8px; right: 8px; width: auto; bottom: 8px; }
}