/* ВСПЛЫВАЮЩИЕ ОКНА — в одном стиле с окном входа и страницей книг
 *
 * Чат Mimi, дневник, плашка о данных, политика, отзыв, увеличенная
 * работа в галерее, всплывающие подсказки. Одеты как сцена страницы
 * книг: тёмно-синий фон с фото крыла и мягким голубым светом, тонкая
 * золотая рамка (вторая — внутри, как на обложке), Cormorant в
 * заголовках, золотая главная кнопка.
 *
 * Подключается последним (из _privacy.html и _journal.html), поэтому
 * перекрывает прежние правила при равной точности селекторов.
 */

:root {
    --pp-ink: #0b1d2b;
    --pp-ink-2: #10304a;
    --pp-gold: #d8b46a;
    --pp-gold-soft: rgba(216, 180, 106, 0.35);
    --pp-gold-faint: rgba(216, 180, 106, 0.14);
    --pp-text: rgba(255, 255, 255, 0.86);
    --pp-muted: rgba(255, 255, 255, 0.55);
    --pp-line: rgba(255, 255, 255, 0.12);
    --pp-ease: cubic-bezier(.2, .7, .2, 1);
    --pp-scene:
        radial-gradient(70% 40% at 50% 0%, rgba(56, 183, 215, 0.22), transparent 70%),
        linear-gradient(180deg, rgba(8, 21, 32, 0.62), rgba(8, 21, 32, 0.95)),
        url("/static/images/bg-window.webp") 85% 100% / cover no-repeat,
        #0b1d2b;
}


/* ========================================
   ОБЩАЯ РАМКА ОКОН
======================================== */

.chat-window,
.journal-panel,
.ppol__in,
.review-dialog {
    background: var(--pp-scene);
    color: var(--pp-text);
    border: 1px solid var(--pp-gold-soft);
    border-radius: 0;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
    isolation: isolate;
    scrollbar-color: rgba(216, 180, 106, 0.4) transparent;
}

/* вторая тонкая рамка внутри — как на обложке книги */
.chat-window::after,
.journal-panel::after,
.review-dialog::after,
.pcn::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--pp-gold-faint);
    pointer-events: none;
    z-index: 3;
}

.chat-window, .journal-panel { overflow: hidden; }

/* появление */
@media (prefers-reduced-motion: no-preference) {
    @keyframes pp-in {
        from { opacity: 0; transform: translateY(16px) scale(0.985); }
    }
    .journal-panel:not([hidden]) {
        animation: pp-in 0.45s var(--pp-ease) both;
    }
}

/* затемнение под окнами */
.ppol::backdrop,
.review-dialog::backdrop,
.g-lightbox::backdrop {
    background: rgba(8, 21, 32, 0.58);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


/* ========================================
   ШАПКА ЧАТА И ДНЕВНИКА
======================================== */

.chat-header,
.journal-header {
    background: transparent;
    color: #fff;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--pp-gold-soft);
}

.chat-header strong,
.journal-header strong {
    font-family: var(--font-header);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #fff;
}

.chat-status,
.journal-presence {
    color: var(--pp-gold);
    font-size: 10px;
    letter-spacing: 2.4px;
}

.chat-status i,
.journal-presence i { background: var(--pp-gold); }

.chat-avatar,
.journal-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--pp-gold-soft);
}

.chat-avatar .mimi-fab__fly,
.journal-avatar .mimi-fab__fly {
    width: 24px;
    height: 22px;
}

/* крестики во всех окнах — тонкие линии, золото на наведении */
.chat-header #chat-close,
.journal-close,
.ppol__x,
.review-dialog-close,
.g-lightbox-close {
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
    .chat-header #chat-close:hover,
    .journal-close:hover,
    .ppol__x:hover,
    .review-dialog-close:hover,
    .g-lightbox-close:hover {
        color: var(--pp-gold);
        border-color: var(--pp-gold-soft);
        background: transparent;
        transform: none;
    }
}

.journal-lang { border-color: var(--pp-gold-soft); border-radius: 0; }
.journal-lang-option.is-active { background: rgba(216, 180, 106, 0.18); color: #fff; }


/* ========================================
   СООБЩЕНИЯ
======================================== */

.chat-messages,
.chat-suggestions,
.chat-quick-buttons,
.journal-tabs { background: transparent; }

.journal-tabs { border-bottom: 1px solid var(--pp-line); }
.journal-tab { color: #fff; letter-spacing: 0.04em; }
.journal-tab.is-active { border-bottom-color: var(--pp-gold); }

.chat-message.bot,
.journal-message.bot {
    background: rgba(255, 255, 255, 0.07);
    color: var(--pp-text);
    border: 1px solid var(--pp-line);
    border-left: 2px solid var(--pp-gold);
    border-radius: 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.chat-message.user,
.journal-message.user {
    background: rgba(216, 180, 106, 0.16);
    color: #fff;
    border: 1px solid var(--pp-gold-soft);
    border-right: 2px solid var(--pp-gold);
    border-radius: 0;
}

.journal-message.system {
    background: transparent;
    color: var(--pp-text);
    border: 1px solid var(--pp-gold-soft);
}

.chat-message.typing,
.journal-message.typing {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--pp-gold-soft);
    color: var(--pp-muted);
}

.chat-message.bot strong,
.chat-message.bot .chat-heading { color: var(--pp-gold); }
.chat-message.bot a,
.journal-message.bot a { color: var(--pp-gold); }
.chat-message.bot code { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* быстрые вопросы */
.chat-suggestions button,
.chat-quick-buttons .quick-question,
.journal-vote button {
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0;
}

@media (hover: hover) {
    .chat-suggestions button:hover,
    .chat-quick-buttons .quick-question:hover,
    .journal-vote button:hover {
        background: rgba(216, 180, 106, 0.12);
        border-color: var(--pp-gold);
        color: #fff;
    }
}

/* накопленная картина в дневнике */
.journal-picture { color: var(--pp-text); }
.journal-pattern { border-bottom-color: var(--pp-line); }
.journal-pattern-name { color: #fff; }
.journal-pattern.is-repeating .journal-pattern-name { color: var(--pp-gold); }
.journal-observation { border-left-color: var(--pp-gold-soft); }


/* ========================================
   ПОЛЕ ВВОДА
======================================== */

.chat-form,
.chat-input-area,
.journal-input-area {
    background: rgba(8, 21, 32, 0.55);
    border-top: 1px solid var(--pp-gold-soft);
}

.chat-form input,
.chat-input-area input,
.journal-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    color: #fff;
}

.chat-form input::placeholder,
.chat-input-area input::placeholder,
.journal-input::placeholder { color: rgba(255, 255, 255, 0.5); }

.chat-form input:focus,
.chat-input-area input:focus,
.journal-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--pp-gold);
}

.chat-form button,
.chat-input-area button,
.journal-send {
    background: var(--pp-gold);
    border: 1px solid var(--pp-gold);
    border-radius: 0;
    color: var(--pp-ink);
    transition: transform 0.25s var(--pp-ease), background-color 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
    .chat-form button:hover,
    .chat-input-area button:hover,
    .journal-send:not(:disabled):hover {
        background: #fff;
        border-color: #fff;
        transform: translateY(-1px);
    }
}

.journal-mic {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    color: #fff;
}

.journal-mic.is-listening {
    background: rgba(216, 180, 106, 0.2);
    border-color: var(--pp-gold);
}


/* ========================================
   ПЛАШКА О ДАННЫХ — светлая: кремовый фон, золотая рамка
======================================== */

.pcn {
    background: #fbf6f2;
    color: var(--pp-ink);
    border: 1px solid var(--pp-gold-soft);
    border-radius: 0;
    box-shadow: 0 30px 70px -30px rgba(11, 29, 43, 0.45);
    isolation: isolate;
}

.pcn::after { border-color: rgba(216, 180, 106, 0.28); }

.pcn__t { color: #4a4a4a; }

.pcn__b {
    color: var(--pp-ink);
    border: 1px solid rgba(11, 29, 43, 0.22);
    border-radius: 0;
    letter-spacing: 2px;
}

.pcn__b--main {
    background: var(--pp-ink);
    border-color: var(--pp-ink);
    color: #fff;
}

@media (hover: hover) {
    .pcn__b--ghost:hover { border-color: var(--pp-gold); color: var(--pp-ink); }
    .pcn__b--main:hover { background: var(--pp-gold); border-color: var(--pp-gold); color: var(--pp-ink); }
}


/* ========================================
   ОКНО ПОЛИТИКИ
======================================== */

.ppol { color: var(--pp-text); }

.ppol__in {
    padding: 40px 44px 32px;
    background-attachment: local, local, scroll, scroll;
}

.ppol__h {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pp-gold-soft);
}

.ppol__h h2 {
    font-weight: 500;
    font-size: 34px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #fff;
}

.ppol__b section { border-top-color: var(--pp-line); }
.ppol__b section:first-child { border-top: 0; }
.ppol__b h3 { color: var(--pp-gold); font-weight: 500; font-size: 22px; }
.ppol__b p { color: var(--pp-text); }
.ppol__a { color: var(--pp-gold); }
.ppol__f { color: var(--pp-muted); border-top-color: var(--pp-gold-soft); }


/* ========================================
   ОТЗЫВ В ОТДЕЛЬНОМ ОКНЕ
======================================== */

.review-dialog-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    font-size: 24px;
}

body.home-body .review-dialog .review-text,
body.home-body .review-dialog .review-lead { color: var(--pp-text); }

body.home-body .review-dialog .review-lead {
    font-family: var(--font-header);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
}

body.home-body .review-dialog .review-stars { color: var(--pp-gold); }

body.home-body .review-dialog .review-footer {
    border-top: 1px solid var(--pp-gold-soft);
    padding-top: 20px;
}

body.home-body .review-dialog .review-meta,
body.home-body .review-dialog .review-meta * { color: rgba(255, 255, 255, 0.75); }
body.home-body .review-dialog .review-meta strong,
body.home-body .review-dialog .review-meta b { color: #fff; }

body.home-body .review-dialog .review-avatar {
    background: transparent;
    color: var(--pp-gold);
    border: 1px solid var(--pp-gold);
}


/* ========================================
   ГАЛЕРЕЯ И ПОДСКАЗКИ
======================================== */

.g-lightbox img { border: 1px solid var(--pp-gold-soft); }

.lesson-toast {
    background: var(--pp-ink);
    color: #fff;
    border: 1px solid var(--pp-gold-soft);
    border-radius: 0;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
}


/* ========================================
   ТЕЛЕФОН
======================================== */

@media (max-width: 700px) {
    .chat-window::after,
    .journal-panel::after { inset: 4px; }
    .ppol__in { padding: 28px 22px 24px; }
    .ppol__h h2 { font-size: 28px; }
}


/* ========================================
   ОКНО МИМИ (ЧАТ И ДНЕВНИК) — СВЕТЛОЕ
   Как окно входа: кремовый фон, двойная золотая рамка,
   тёмно-синий текст. Ответы Мими — белые карточки с золотой
   чертой, свои сообщения — тёмно-синие.
======================================== */

.chat-window,
.journal-panel {
    background:
        radial-gradient(70% 30% at 50% 0%, rgba(216, 180, 106, 0.14), transparent 70%),
        #fbf6f2;
    color: var(--pp-ink);
    border-color: rgba(216, 180, 106, 0.6);
    box-shadow: 0 40px 90px -30px rgba(11, 29, 43, 0.45);
    scrollbar-color: rgba(216, 180, 106, 0.5) transparent;
}

.chat-window::after,
.journal-panel::after { border-color: rgba(216, 180, 106, 0.28); }

.chat-header,
.journal-header {
    color: var(--pp-ink);
    border-bottom-color: rgba(216, 180, 106, 0.45);
}

.chat-header strong,
.journal-header strong { color: var(--pp-ink); }

.chat-status,
.journal-presence { color: #a07a35; }

.chat-avatar,
.journal-avatar {
    background: #fff;
    border-color: rgba(216, 180, 106, 0.6);
}

.chat-header #chat-close,
.journal-close { color: #6b6b6b; }

@media (hover: hover) {
    .chat-header #chat-close:hover,
    .journal-close:hover { color: #a07a35; border-color: rgba(216, 180, 106, 0.6); }
}

.journal-lang { border-color: rgba(216, 180, 106, 0.6); }
.journal-lang-option { color: #8a8a8a; }
.journal-lang-option.is-active { background: rgba(216, 180, 106, 0.2); color: var(--pp-ink); }

.journal-tabs { border-bottom-color: rgba(11, 29, 43, 0.08); }
.journal-tab { color: var(--pp-ink); }

.chat-message.bot,
.journal-message.bot {
    background: #fff;
    color: #2b2b2b;
    border: 1px solid rgba(11, 29, 43, 0.07);
    border-left: 2px solid var(--pp-gold);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 6px 18px -12px rgba(11, 29, 43, 0.25);
}

.chat-message.user,
.journal-message.user {
    background: var(--pp-ink);
    color: #fff;
    border: 1px solid var(--pp-ink);
    border-right: 2px solid var(--pp-gold);
}

.journal-message.system { color: #4a4a4a; }

.chat-message.typing,
.journal-message.typing { color: #8a8a8a; }

.chat-message.bot strong,
.chat-message.bot .chat-heading,
.chat-message.bot a,
.journal-message.bot a { color: #8a6526; }

.chat-message.bot code { background: rgba(216, 180, 106, 0.16); color: var(--pp-ink); }

.chat-suggestions button,
.chat-quick-buttons .quick-question,
.journal-vote button {
    background: #fff;
    color: var(--pp-ink);
    border-color: rgba(11, 29, 43, 0.16);
}

@media (hover: hover) {
    .chat-suggestions button:hover,
    .chat-quick-buttons .quick-question:hover,
    .journal-vote button:hover {
        background: rgba(216, 180, 106, 0.14);
        border-color: var(--pp-gold);
        color: var(--pp-ink);
    }
}

.journal-picture { color: #2b2b2b; }
.journal-pattern { border-bottom-color: rgba(11, 29, 43, 0.08); }
.journal-pattern-name { color: var(--pp-ink); }
.journal-pattern.is-repeating .journal-pattern-name { color: #8a6526; }

.chat-form,
.chat-input-area,
.journal-input-area {
    background: #fff;
    border-top-color: rgba(216, 180, 106, 0.45);
}

.chat-form input,
.chat-input-area input,
.journal-input {
    background: #fbf6f2;
    border-color: rgba(11, 29, 43, 0.16);
    color: var(--pp-ink);
}

.chat-form input::placeholder,
.chat-input-area input::placeholder,
.journal-input::placeholder { color: #9a9a9a; }

.chat-form input:focus,
.chat-input-area input:focus,
.journal-input:focus { background: #fff; border-color: var(--pp-gold); }

.chat-form button,
.chat-input-area button,
.journal-send {
    background: var(--pp-ink);
    border-color: var(--pp-ink);
    color: #fff;
}

@media (hover: hover) {
    .chat-form button:hover,
    .chat-input-area button:hover,
    .journal-send:not(:disabled):hover {
        background: var(--pp-gold);
        border-color: var(--pp-gold);
        color: var(--pp-ink);
    }
}

.journal-mic {
    border-color: rgba(11, 29, 43, 0.16);
    color: var(--pp-ink);
}

.journal-mic.is-listening {
    background: rgba(216, 180, 106, 0.22);
    border-color: var(--pp-gold);
}