/* Плавающая кнопка "Хронология" — прибита к левому краю, сразу под кнопкой черновиков.
   Скругление только с правой стороны; при наведении плавно расширяется, открывая подпись. */
#chronicle-float-btn {
    box-sizing: border-box;
    position: fixed;
    background: #362e26;
    top: 160px;
    left: 0;
    z-index: 11;
    width: 40px;
    height: 50px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    color: var(--text4);
    font-size: 0; /* прячет служебный текстовый узел "Хронология" из HTML в состоянии покоя */
    transition: width 0.25s ease, font-size 0.15s ease;
}

#chronicle-float-btn:hover {
    width: 160px;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 8px;
    gap: 8px;
    font-size: 11px;
}

#chronicle-float-btn.chronicle-on:before {
    content: "\f02d";
    font: 15px FontAwesome;
    color: var(--text3);
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}

/* Мягкая пульсация — есть хотя бы один непрочитанный новый пост от соигрока */
#chronicle-float-btn.has-new {
    animation: chronicle-glow 2.2s ease-in-out infinite;
}

@keyframes chronicle-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    50% {
        box-shadow: 0 0 10px 2px var(--accent);
    }
}

/* Кнопка "Добавить в хронологию" в списке действий поста */
.pl-chronicle {
    display: inline-block;
}

.chronicle-add-btn {
    cursor: pointer;
    user-select: none;
    font: 700 11px var(--font);
    color: var(--links);
    background: var(--beg500);
    padding: 1px 10px 3px;
    text-transform: lowercase;
    border-radius: 6px;
}

.chronicle-add-btn.is-added {
    color: var(--text1);
    opacity: 0.75;
    font: 500 11px var(--font);
}

/* Оверлей и диалог */
.chronicle-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Оверлей под боковую панель — затемняет фон, но клик по нему НЕ закрывает панель */
.chronicle-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.chronicle-dialog {
    position: relative;
    background: var(--beg300);
    border-radius: 15px;
    padding: 24px 20px 20px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    font-family: var(--font, 'Montserrat', sans-serif);
    color: var(--text1);
    box-sizing: border-box;
}

/* Боковая панель "Моя хронология" — выезжает слева, во весь рост экрана */
.chronicle-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 35%;
    max-width: none;
    max-height: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.chronicle-panel.is-open {
    transform: translateX(0);
}

.chronicle-dialog-title {
    margin: 0 0 15px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    color: var(--links);
    font-weight: 700;
}

/* Крестик закрытия обычных модалок (гостевой доступ, добавление эпизода из темы) */
.chronicle-close-icon {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text2);
    user-select: none;
}

.chronicle-close-icon:before {
    content: "\f00d";
    font: 13px FontAwesome;
}

.chronicle-close-icon:hover {
    background: var(--beg600);
    color: var(--text1);
}

/* Иконка закрытия боковой панели — f0d9 (стрелка "свернуть влево"), только по клику на неё */
.chronicle-panel-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text2);
    user-select: none;
    z-index: 1;
}

.chronicle-panel-close:before {
    content: "\f0d9";
    font: 15px FontAwesome;
}

.chronicle-panel-close:hover {
    background: var(--beg600);
    color: var(--text1);
}

.chronicle-alt-badge {
    display: block;
    width: fit-content;
    margin: -8px auto 15px;
    background: var(--beg600);
    color: var(--text1);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 20px;
}

.chronicle-turn-hint {
    font-size: 10px;
    color: var(--text2);
    font-style: italic;
    margin: -6px 0 10px;
}

/* Поля формы */
.chronicle-field-label {
    display: block;
    font-size: 11px;
    margin-bottom: 5px;
    color: var(--text1);
}

.chronicle-input-title,
.chronicle-input-date,
.chronicle-input-place,
.chronicle-input-members,
.chronicle-input-myoverride,
.chronicle-input-description,
.chronicle-input-status {
    width: 100%;
    padding: 8px 10px;
    background: var(--beg100);
    border: 1px solid var(--borders);
    border-radius: 8px;
    color: var(--text1);
    font-size: 12px;
    box-sizing: border-box;
    margin-bottom: 12px;
    font-family: var(--font, 'Montserrat', sans-serif);
}

.chronicle-input-status {
    cursor: pointer;
}

.chronicle-input-description {
    resize: vertical;
}

/* Кнопки управления в форме */
.chronicle-dialog-controls {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 10px;
}

.chronicle-delete-btn {
    background: #61311e;
    color: #fff;
    border-radius: 8px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    margin-right: auto;
    user-select: none;
    display: inline-block;
}

.chronicle-cancel-btn {
    background: transparent;
    color: var(--text2);
    padding: 8px 15px;
    cursor: pointer;
    font-size: 11px;
    display: inline-block;
    user-select: none;
}

.chronicle-save-btn {
    background: var(--accent);
    color: #ceccca;
    border-radius: 8px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    user-select: none;
    display: inline-block;
}

/* Вкладки "Планер" / "Хронология" */
.chronicle-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}

.chronicle-tab {
    flex: 1;
    padding: 8px 4px;
    background: var(--beg100);
    color: var(--text1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    user-select: none;
}

.chronicle-tab.is-active {
    background: var(--beg600);
    font-weight: bold;
}

.chronicle-tab-planner:before {
    font-family: FontAwesome;
    content: "\f0ae";
    margin-right: 6px;
}

.chronicle-tab-chronology:before {
    font-family: FontAwesome;
    content: "\f017";
    margin-right: 6px;
}

/* Список записей */
.chronicle-list-container {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 3px;
}

.chronicle-empty {
    text-align: center;
    color: var(--text2);
    font-size: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 5px;
}

.chronicle-empty-title {
    font-weight: 700;
    color: var(--text1);
    font-size: 12px;
}

.chronicle-empty-hint {
    font-size: 10px;
    font-style: italic;
    color: var(--text2);
    line-height: 1.4;
}

/* Заголовки блоков ("Основная" / "Альтернатива" / "Твой ход" / "Ждём соигрока") */
.chronicle-block-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text2);
    margin: 18px 0 8px;
    font-weight: 700;
}

.chronicle-block-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

.chronicle-block-heading-row .chronicle-block-heading {
    margin: 0;
}

.chronicle-block-heading:first-child,
.chronicle-block-heading-row:first-child {
    margin-top: 0;
}

.chronicle-sort-select {
    background: var(--beg100);
    border: 1px solid var(--borders);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--text1);
    cursor: pointer;
    font-family: var(--font, 'Montserrat', sans-serif);
}

/* ===================== Карточка эпизода — две колонки, как в драфтах ===================== */

.chronicle-item {
    background: var(--beg100);
    border: 1px solid var(--borders);
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.chronicle-item-info {
    flex: 1;
    min-width: 0;
    padding: 10px;
    border-right: 1px solid var(--borders);
}

.chronicle-item-title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--links);
    text-decoration: none;
    margin-bottom: 4px;
}

.chronicle-item-title:hover {
    text-decoration: underline;
}

.chronicle-item-meta {
    font-size: 10px;
    color: var(--text2);
    margin-bottom: 6px;
}

.chronicle-meta-date:before {
    font-family: FontAwesome;
    content: "\f133";
    margin-right: 4px;
    color: var(--text2);
}

.chronicle-meta-place:before {
    font-family: FontAwesome;
    content: "\f3c5";
    margin-right: 4px;
    color: var(--text2);
}

.chronicle-meta-sep {
    margin: 0 6px;
}

.chronicle-item-members {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}

.chronicle-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--beg300);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 10px;
    color: var(--text1);
    line-height: 1.6;
}

.chronicle-member-chip-label {
    cursor: pointer;
}

.chronicle-member-chip.is-highlighted .chronicle-member-chip-label {
    font-weight: 700;
}

/* Крестик удаления — скрыт по умолчанию, всплывает при наведении на чип */
.chronicle-member-chip-remove {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
    color: var(--text2);
    flex-shrink: 0;
}

.chronicle-member-chip-remove:before {
    font-family: FontAwesome;
    content: "\f00d";
    font-size: 7px;
}

.chronicle-member-chip:hover .chronicle-member-chip-remove {
    opacity: 1;
}

.chronicle-member-chip-remove:hover {
    color: #fff;
    background: #61311e;
}

.chronicle-member-chip-add {
    cursor: pointer;
    color: var(--text2);
    font-weight: 700;
    border: 1px dashed var(--borders);
    background: transparent;
}

.chronicle-member-chip-add:hover {
    color: var(--text1);
    border-color: var(--text2);
}

.chronicle-member-add-input {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--borders);
    background: var(--beg100);
    color: var(--text1);
    width: 110px;
    box-sizing: border-box;
}

/* Подсказки под полями формы (формат даты, требование к никам и т.п.) */
.chronicle-field-hint {
    font-size: 10px;
    color: var(--text2);
    font-style: italic;
    margin: -8px 0 12px;
    line-height: 1.4;
}

/* Гостевая модалка — приглашение войти/зарегистрироваться */
.chronicle-guest-text {
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 18px;
    color: var(--text1);
}

.chronicle-guest-links {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.chronicle-guest-link {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.chronicle-guest-link-login {
    background: var(--accent);
    color: #fff;
}

.chronicle-guest-link-register {
    background: var(--beg600);
    color: var(--text1);
}

.chronicle-item-description {
    font-size: 10px;
    color: var(--text2);
    font-style: italic;
    line-height: 1.4;
    word-break: break-word;
}

/* Правая колонка — статус/ход + кнопки, всё по центру */
.chronicle-item-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    flex-shrink: 0;
}

/* Строка эйброу — статус хода/нового поста + иконка ручного переключения */
.chronicle-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.chronicle-eyebrow {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.chronicle-eyebrow-turn-mine {
    color: var(--accent);
}

.chronicle-eyebrow-turn-partner {
    color: var(--text2);
}

/* Эйброу "Новый пост" — заметно ярче обычного статуса хода, кликабельна */
.chronicle-eyebrow-fresh {
    color: #fff;
    background: var(--accent);
    padding: 2px 8px;
    border-radius: 10px;
    text-decoration: none;
}

.chronicle-eyebrow-fresh:hover {
    opacity: 0.85;
}

/* Галочка "прочитано" рядом со статусом нового поста */
.chronicle-ack-btn {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--beg500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.chronicle-ack-btn:before {
    font-family: FontAwesome;
    content: "\f00c";
    font-size: 8px;
    color: var(--text1);
}

.chronicle-ack-btn:hover {
    background: var(--beg600);
}

/* Иконка ручного переключения хода — маленькая, ненавязчивая, на случай багов автоопределения */
.chronicle-manual-override {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text2);
    opacity: 0.4;
    flex-shrink: 0;
    margin-left: auto;
}

.chronicle-manual-override:before {
    font-family: FontAwesome;
    content: "\f074";
    font-size: 9px;
}

.chronicle-manual-override:hover {
    opacity: 0.8;
}

.chronicle-manual-override.is-active {
    opacity: 1;
    color: var(--accent);
}

/* Уведомление о новом посте — стилизовано отдельно от остальных jGrowl-всплывашек сайта
   благодаря параметру theme: 'chronicle-growl' в вызове $.jGrowl */
.jGrowl-notification.chronicle-growl {
    background: var(--beg300) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 10px !important;
    color: var(--text1) !important;
    font-family: var(--font, 'Montserrat', sans-serif) !important;
    font-size: 12px !important;
    padding: 12px 16px !important;
}

.jGrowl-notification.chronicle-growl a {
    color: var(--accent) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.jGrowl-notification.chronicle-growl a:hover {
    text-decoration: underline !important;
}

/* Статус-лейбл в правой колонке — только в Хронологии */
.chronicle-status-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.chronicle-status-label-active {
    color: var(--text2);
}

.chronicle-status-label-completed {
    color: #4a9c6e;
}

.chronicle-status-label-unfinished {
    color: #c9803a;
}

/* Иконочные кнопки редактирования/удаления */
.chronicle-item-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

.chronicle-item-edit {
    background: var(--beg500);
}

.chronicle-item-edit:before {
    content: "\f304";
    font: 12px/1 FontAwesome;
    color: var(--text1);
}

.chronicle-item-delete {
    background: #61311e;
}

.chronicle-item-delete:before {
    content: "\f1f8";
    font: 12px/1 FontAwesome;
    color: #fff;
}

/* Адаптив — на узких экранах карточки хронологии складываются друг под друга,
   а планер остаётся в две колонки (правая — узко, только под кнопки) */
@media (max-width: 720px) {
    #chronicle-float-btn {
        top: 125px;
        left: 0;
        width: 30px;
        height: 44px;
        border-radius: 0 8px 8px 0;
    }

    #chronicle-float-btn:hover {
        width: 140px;
    }

    #chronicle-float-btn.chronicle-on:before {
        font-size: 16px;
    }

    .chronicle-panel {
        width: 85%;
        border-radius: 0 10px 10px 0;
    }

    .chronicle-item:not(.chronicle-item-planner) {
        flex-direction: column;
    }

    .chronicle-item:not(.chronicle-item-planner) .chronicle-item-info {
        border-right: none;
        border-bottom: 1px solid var(--borders);
    }

    .chronicle-item:not(.chronicle-item-planner) .chronicle-item-actions {
        flex-direction: row;
        padding: 8px;
    }
}

/* ===================== Оформление карточки эпизода прямо в посте ===================== */
/* Необязательный блок — стилизует custom_tag_epwrap, чтобы шаблон эпизода
   выглядел аккуратной карточкой. Уберите этот раздел, если у вас уже есть
   своё оформление bb-тегов. */

.custom_tag_epwrap {
    background: var(--beg100);
    border: 1px solid var(--borders);
    border-radius: 12px;
    padding: 15px 18px;
    margin: 10px 0;
}

.custom_tag_eptitle {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 14px;
    color: var(--links);
    margin-bottom: 10px;
}

.custom_tag_epdate,
.custom_tag_epplace,
.custom_tag_epchars {
    font-size: 11px;
    color: var(--text2);
    margin-bottom: 4px;
}

.custom_tag_epdescription {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
}