/* OnlyChats v2 — экран персонажа (детали), вид B 4.2.
   Разметку собирает details.js из узлов renderCharacterDetails (app.js):
   .v2-dt-top (назад, баланс, избранное) поверх арта, .v2-dt-art (галерея),
   .v2-dt-panel (имя, счётчики, автор, теги, описание, бонус),
   .v2-dt-cta (строка модели и «Чат с …» / «Купить за N»), таббар.
   Инлайновые стили app.js на блоке автора, кнопке подписки и бонусе
   перебиваем через !important. */

html.v2 .page-container.v2-dt {
    --v2-dt-art-h: 60vh;
    --v2-dt-overlap: 70px;      /* на сколько панель наезжает на арт */
    --v2-dt-col: 760px;         /* колонка на ПК */
    position: relative;
    padding-top: 0 !important;  /* арт от самого верха, safe-area учитывает строка кнопок */
    max-width: var(--v2-dt-col);
    margin-left: auto;
    margin-right: auto;
}

/* У #app свой верхний отступ 10px, он оставлял полоску фона над артом */
html.v2 #app:has(> .page-container.v2-dt) {
    padding-top: 0;
}

/* ---------- Верхняя строка: «← Назад», баланс, звезда ---------- */

html.v2 .v2-dt-top {
    position: fixed;
    top: calc(var(--tg-safe-area-top, 0px) + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    pointer-events: none;
}

html.v2 .v2-dt-top-inner {
    max-width: var(--v2-dt-col);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

html.v2 .v2-dt-top-inner > * {
    pointer-events: auto;
}

html.v2 .v2-dt-top-gap {
    flex: 1;
    pointer-events: none !important;
}

/* «← Назад»: круглая стеклянная кнопка со стрелкой. Текст в кнопке остаётся
   (кегль 0), стрелка рисуется маской */
html.v2 .v2-dt-top .back-btn {
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(11, 7, 16, .6) !important;
    border: 0 !important;
    color: var(--v2-text-1) !important;
    font-size: 0 !important;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform var(--v2-dur-fast) var(--v2-ease), background var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-dt-top .back-btn::before {
    content: "";
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

html.v2 .v2-dt-top .back-btn:active {
    transform: scale(.92);
}

/* Баланс на экране персонажа не показываем (Павел 27.10): узел остаётся в DOM,
   app.js продолжает в него писать */
html.v2 .v2-dt-top .crystal-counter {
    display: none !important;
}

/* Баланс: тот же счётчик, что в шапках (base.css), только на стекле */
html.v2 .v2-dt-top .crystal-counter {
    min-height: 44px;
    background: rgba(11, 7, 16, .6) !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform var(--v2-dur-fast) var(--v2-ease);
}

html.v2 .v2-dt-top .crystal-counter.v2-dt-pop {
    animation: v2DtSpring 600ms var(--v2-ease-spring);
}

/* Звезда «В избранное / Убрать из избранного»: ☆/★ из app.js остаются в
   разметке (toggleFavorite меняет именно их), видна маска-звезда */
html.v2 .v2-dt-top .character-details-fav-btn {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(11, 7, 16, .6) !important;
    border: 1px solid transparent !important;
    color: var(--v2-text-1);
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform: none;
    transition: transform var(--v2-dur-fast) var(--v2-ease), color var(--v2-dur-base) var(--v2-ease), border-color var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-dt-top .character-details-fav-btn .fav-icon {
    font-size: 0;
    line-height: 0;
    display: inline-flex;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 550ms var(--v2-ease-spring);
}

html.v2 .v2-dt-top .character-details-fav-btn.active {
    color: var(--v2-gold);
    border-color: var(--v2-gold-line) !important;
}

html.v2 .v2-dt-top .character-details-fav-btn.active .fav-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z'/%3E%3C/svg%3E");
    transform: scale(1.12);
}

html.v2 .v2-dt-top .character-details-fav-btn:active {
    transform: scale(.92);
}

html.v2 .v2-dt-top .character-details-fav-btn:disabled {
    opacity: .7;
}

/* ---------- Арт ---------- */

html.v2 .v2-dt-art {
    position: sticky;
    top: 0;
    z-index: 0;
    height: var(--v2-dt-art-h);
    /* целые px: 60vh давал дробный верх панели и всего, что ниже */
    height: round(var(--v2-dt-art-h), 1px);
    margin: 0;
    overflow: visible;
}

html.v2 .v2-dt-art-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--v2-bg-2);
    will-change: transform;
}

html.v2 .v2-dt .character-details-image-container {
    position: absolute;
    inset: 0;
    margin: 0 !important;
    text-align: left;
}

html.v2 .v2-dt .character-details-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center 18%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    display: block;
    transition: none;
    cursor: zoom-in;
}

html.v2 .v2-dt .character-details-image:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

/* Низ арта растворяется в фон, сверху лёгкое затемнение под кнопки */
html.v2 .v2-dt-art-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 7, 16, .45) 0%, rgba(11, 7, 16, 0) 20%, rgba(11, 7, 16, 0) 58%, var(--v2-bg-1) 100%);
}

/* Галерея app.js: стрелки, счётчик и точки держим над зоной, которую накрывает панель */
html.v2 .v2-dt .gallery-arrow {
    width: 44px;
    height: 44px;
    top: 50%;
    background: var(--v2-glass-soft);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-1);
    font-size: 26px;
    z-index: 3;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background var(--v2-dur-base) var(--v2-ease), transform var(--v2-dur-fast) var(--v2-ease);
}

html.v2 .v2-dt .gallery-arrow:active {
    transform: translateY(-50%) scale(.92);
}

html.v2 .v2-dt .gallery-prev { left: 12px; }
html.v2 .v2-dt .gallery-next { right: 12px; }

html.v2 .v2-dt .gallery-counter {
    top: auto;
    bottom: calc(var(--v2-dt-overlap) + 16px);
    right: 16px;
    padding: 4px 10px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass-soft);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-strong-2);
    font: 700 12px/1 var(--v2-font-mono);
    z-index: 3;
}

html.v2 .v2-dt .gallery-dots {
    bottom: calc(var(--v2-dt-overlap) + 22px);
    gap: 6px;
    z-index: 3;
}

/* Ширина точек меняется сразу (раскладка один раз на перелистывание), а глазу
   активная доезжает scaleX от 14 до 28px — transform, без layout на каждом кадре */
html.v2 .v2-dt .gallery-dots {
    contain: layout;
}

html.v2 .v2-dt .gallery-dot {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: rgba(214, 190, 255, .4);
    transition: background-color var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-dt .gallery-dot.active {
    width: 28px;
    background: var(--v2-accent);
    box-shadow: var(--v2-neon);
    animation: v2DtDot var(--v2-dur-base) var(--v2-ease);
}

@keyframes v2DtDot { from { transform: scaleX(.5); } to { transform: none; } }

/* ---------- Панель контента ---------- */

html.v2 .v2-dt-panel {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--v2-dt-overlap));
    min-height: calc(100vh - var(--v2-dt-art-h) + var(--v2-dt-overlap));
    background: var(--v2-bg-1);
    border-radius: var(--v2-r-sheet) var(--v2-r-sheet) 0 0;
    padding: 22px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 -24px 40px rgba(11, 7, 16, .9);
    animation: v2DtRise var(--v2-dur-screen) var(--v2-ease) 120ms both;
}

/* Имя: дисплейный 32px, длинные имена переносятся, черта под каждой строкой */
html.v2 .v2-dt-panel h1 {
    margin: 0;
    font-family: var(--v2-font-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -.005em;
    color: var(--v2-text-1);
    -webkit-text-fill-color: currentColor;
    background: none;
    text-shadow: none;
    text-wrap: balance;
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 100%;
}

/* base.css ставит TildaSans каждому элементу (html.v2 *), наследование не
   работает: шрифт вложенным узлам задаём явно */
html.v2 .v2-dt-panel h1 *,
html.v2 .v2-dt-chats * {
    font-family: inherit !important;
}

html.v2 .v2-dt-name {
    padding: 0 .1em 2px;
    border-bottom: 2px solid var(--v2-accent);
    box-shadow: 0 10px 16px -10px var(--v2-accent);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Счётчики: огонёк и чаты */
html.v2 .v2-dt-counters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

html.v2 .v2-dt .character-details-like-btn {
    height: 44px;
    padding: 0 14px !important;
    border-radius: var(--v2-r-pill);
    background: var(--v2-bg-2);
    border: 1px solid rgba(214, 190, 255, .1);
    color: var(--v2-text-1);
    gap: 8px;
    font-size: 15px;
    backdrop-filter: none;
    box-shadow: none;
    transform: none;
    transition: background var(--v2-dur-base) var(--v2-ease), border-color var(--v2-dur-base) var(--v2-ease), transform var(--v2-dur-fast) var(--v2-ease);
}

html.v2 .v2-dt .character-details-like-btn:not(:disabled):hover {
    background: var(--v2-control);
    border-color: var(--v2-accent-line);
    transform: none;
    box-shadow: none;
}

html.v2 .v2-dt .character-details-like-btn:not(:disabled):active {
    transform: scale(.97);
}

/* Отключённая кнопка не гаснет целиком: до порога тускнеет только иконка
   (inline opacity .5 из app.js), после лайка — акцентная */
html.v2 .v2-dt .character-details-like-btn:disabled {
    opacity: 1 !important;
    cursor: default;
}

html.v2 .v2-dt .character-details-like-btn:has(.like-icon[style*="opacity: 1"]) {
    background: var(--v2-accent-tint);
    border-color: var(--v2-accent);
    color: var(--v2-accent);
}

/* Эмодзи 🔥 остаётся в разметке (toggleLike работает с этим span), рисуем огонёк маской */
html.v2 .v2-dt .character-details-like-btn .like-icon {
    font-size: 0 !important;
    line-height: 0;
    display: inline-flex;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.8 3.2 5.5 5.2 5.5 10.2a5.5 5.5 0 0 1-11 0c0-2.6 1.4-4.2 2.6-5.2.2 2 1.3 3.1 2.4 3.3-.8-3-.2-5.9.5-8.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.8 3.2 5.5 5.2 5.5 10.2a5.5 5.5 0 0 1-11 0c0-2.6 1.4-4.2 2.6-5.2.2 2 1.3 3.1 2.4 3.3-.8-3-.2-5.9.5-8.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 550ms var(--v2-ease-spring), opacity var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-dt .character-details-like-btn .like-icon[style*="opacity: 1"] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-opacity='.45' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.8 3.2 5.5 5.2 5.5 10.2a5.5 5.5 0 0 1-11 0c0-2.6 1.4-4.2 2.6-5.2.2 2 1.3 3.1 2.4 3.3-.8-3-.2-5.9.5-8.3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-opacity='.45' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.8 3.2 5.5 5.2 5.5 10.2a5.5 5.5 0 0 1-11 0c0-2.6 1.4-4.2 2.6-5.2.2 2 1.3 3.1 2.4 3.3-.8-3-.2-5.9.5-8.3z'/%3E%3C/svg%3E");
}

html.v2 .v2-dt .character-details-like-btn .like-count {
    display: inline-block;
    min-width: 2ch;
    font: 700 15px/18px var(--v2-font-mono);
    color: inherit;
}

html.v2 .v2-dt .like-count.v2-dt-pop,
html.v2 .v2-dt-chats-num.v2-dt-pop {
    animation: v2DtPop 550ms var(--v2-ease-spring);
}

html.v2 .v2-dt-chats {
    height: 44px;
    padding: 0 14px;
    border-radius: var(--v2-r-pill);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--v2-bg-2);
    border: 1px solid rgba(214, 190, 255, .1);
    color: var(--v2-text-2);
    font: 700 15px/1 var(--v2-font-mono);
}

html.v2 .v2-dt-chats svg {
    flex: none;
}

/* Подсказка «Лайк станет доступен после 10 сообщений» (inline-стили из app.js) */
html.v2 .v2-dt .like-hint {
    margin: -10px 0 0 !important;
    text-align: left !important;
    font-size: 12px !important;
    opacity: 1 !important;
    color: var(--v2-text-3);
}

/* «Теги:» в B подписи нет: текст остаётся в разметке (скринридер, innerText),
   визуально скрыт, чипы говорят сами за себя */
html.v2 .v2-dt .character-details-tags-title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px !important;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Строка автора: блок с инлайновыми стилями из app.js делаем плоским */
html.v2 .v2-dt .creator-block {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 10px !important;
}

html.v2 .v2-dt .creator-block .v2-dt-ava {
    width: 40px !important;
    height: 40px !important;
    padding: 2px;
    border: 0 !important;
    background: conic-gradient(from 200deg, #ffc46b, #ff2d8a, #ffc46b) !important;
}

html.v2 .v2-dt .creator-block .v2-dt-ava > img,
html.v2 .v2-dt .creator-block .v2-dt-ava > span {
    border-radius: 50%;
    border: 2px solid var(--v2-bg-1);
    box-sizing: border-box;
}

html.v2 .v2-dt .creator-block .v2-dt-ava > span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff2d8a 0%, #7b3cff 100%);
}

html.v2 .v2-dt .creator-block .v2-dt-who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

html.v2 .v2-dt-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
}

html.v2 .v2-dt .creator-block .v2-dt-nick {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    max-width: 100%;
}

/* Ник без своего стиля (applyNickStyle ничего не задал) красим в цвет титула */
html.v2 .v2-dt .creator-block .v2-dt-nick:not([style*="color"]) {
    color: var(--v2-gold) !important;
}

html.v2 .v2-dt .creator-block .creator-title-badge {
    height: 18px;
    padding: 0 6px !important;
    font: 700 10px/16px var(--v2-font) !important;
    margin: 0;
    align-self: flex-start;   /* style.css центрирует бейдж в сетке карточки, тут колонка */
    justify-self: start;
}

html.v2 .v2-dt .creator-block .v2-dt-followers {
    white-space: nowrap;
    font-size: 12px !important;
    color: var(--v2-text-3) !important;
}

html.v2 .v2-dt .creator-block .v2-dt-followers span {
    font-family: var(--v2-font-mono);
    font-weight: 700;
    color: var(--v2-text-2);
}

/* Кнопка подписки app.js: только плюс/галочка; подпись «Подписаться/Отписаться»
   добавляет details.js в data-атрибут, состояние читается по иконке */
html.v2 .v2-dt .creator-follow-btn {
    height: 44px;
    padding: 0 14px !important;
    border-radius: 14px !important;
    background: var(--v2-control-2) !important;
    border: 1px solid var(--v2-line-3) !important;
    color: var(--v2-text-1) !important;
    font: 600 14px/1 var(--v2-font) !important;
    gap: 6px !important;
    transition: background var(--v2-dur-base) var(--v2-ease), transform var(--v2-dur-fast) var(--v2-ease), opacity var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-dt .creator-follow-btn::after {
    content: attr(data-v2-label);
}

html.v2 .v2-dt .creator-follow-btn.is-following {
    background: transparent !important;
    border-color: var(--v2-line-2) !important;
    color: var(--v2-text-2) !important;
}

html.v2 .v2-dt .creator-follow-btn:active {
    transform: scale(.97);
}

html.v2 .v2-dt .creator-follow-btn svg {
    width: 16px;
    height: 16px;
}

/* Теги: чипы с горизонтальной прокруткой */
html.v2 .v2-dt .character-details-tags {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

html.v2 .v2-dt .character-details-tags-wrapper {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    margin: -6px -16px;
    padding: 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

html.v2 .v2-dt .character-details-tags-wrapper::-webkit-scrollbar {
    display: none;
}

/* Чип 32px как в B, а элемент 44px: прозрачная рамка 6px сверху и снизу
   добирает зону нажатия, обводка чипа нарисована тенью внутри */
html.v2 .v2-dt .character-details-tag {
    flex: none;
    height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    background: transparent !important;
    background-clip: padding-box !important;
    border: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    box-shadow: inset 0 0 0 1px var(--v2-line-3);
    color: var(--v2-text-strong-2) !important;
    font: 600 13px/1 var(--v2-font);
    backdrop-filter: none;
    transition: border-color var(--v2-dur-base) var(--v2-ease), background var(--v2-dur-base) var(--v2-ease), transform var(--v2-dur-fast) var(--v2-ease);
}

html.v2 .v2-dt .character-details-tag:hover {
    transform: none;
}


html.v2 .v2-dt .character-details-tag.tag-clickable:active {
    transform: scale(.96);
}

/* Описание */
html.v2 .v2-dt .character-details-info {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

html.v2 .v2-dt .character-details-description {
    margin: 0 0 4px;
    padding-left: 12px;
    border-left: 2px solid var(--v2-accent);
    font: italic 500 17px/1.45 var(--v2-font);
    color: var(--v2-text-1);
    text-shadow: none;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

html.v2 .v2-dt .character-details-detailed-description {
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 15px;
    line-height: 1.55;
    color: var(--v2-text-2);
    overflow-wrap: anywhere;   /* длинные строки без пробелов не вылезают за край */
}

html.v2 .v2-dt .character-details-detailed-description p {
    margin: 0 0 .6em;
}

html.v2 .v2-dt .character-details-detailed-description p:last-child {
    margin-bottom: 0;
}

html.v2 .v2-dt .character-details-detailed-description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--v2-r-md);
}

/* Строка-разделитель из псевдографики: текст остаётся, видна тонкая линия */
html.v2 .v2-dt .v2-dt-rule {
    height: 1px !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    overflow: hidden;
    font-size: 1px !important;
    line-height: 1px !important;
    color: transparent !important;
    white-space: nowrap;
    border-top: 1px solid var(--v2-line-3);
    text-align: left !important;
}

/* Свёрнутое подробное описание: ограничение высоты и растворение внизу */
html.v2 .v2-dt-long {
    position: relative;
    overflow: hidden;
    transition: max-height 350ms var(--v2-ease);
}

html.v2 .v2-dt-long.is-collapsed:not(.is-hidden)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(180deg, rgba(11, 7, 16, 0), var(--v2-bg-1));
    pointer-events: none;
}

html.v2 .v2-dt-more {
    align-self: flex-start;
    height: 44px;
    margin: -8px 0 -6px -8px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    color: var(--v2-accent-soft);
    font: 700 14px/1 var(--v2-font);
    cursor: pointer;
    border-radius: var(--v2-r-sm);
    transition: background var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-dt-more svg {
    transition: transform var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-dt-more[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Карточка бонуса: иконка кристалла и кнопка «Забрать персональный бонус» из app.js */
html.v2 .v2-dt-bonus {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--v2-r-lg);
    background: var(--v2-bg-2);
    border: 1px solid rgba(240, 147, 251, .28);
}

html.v2 .v2-dt-bonus-ico {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 14px;
    background: rgba(240, 147, 251, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}

html.v2 .v2-dt-bonus .character-bonus-claim {
    flex: 1;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: var(--v2-crystal) !important;
    color: #3a0a42 !important;
    font: 700 15px/1.15 var(--v2-font) !important;
    box-shadow: var(--v2-crystal-glow) !important;
    text-align: center;
    transition: transform var(--v2-dur-fast) var(--v2-ease), opacity var(--v2-dur-base) var(--v2-ease);
}

html.v2 .v2-dt-bonus .character-bonus-claim:active {
    transform: scale(.97);
}

html.v2 .v2-dt-bonus .character-bonus-claim:disabled {
    opacity: .6;
    cursor: wait;
}

html.v2 .v2-dt-bonus.is-done {
    border-color: var(--v2-success-line);
}

html.v2 .v2-dt-bonus-done {
    flex: 1;
    font: 700 15px/1.2 var(--v2-font);
    color: var(--v2-success);
    animation: v2Fade var(--v2-dur-base) var(--v2-ease) both;
}

/* ---------- Закреплённая кнопка внизу ---------- */

html.v2 .v2-dt-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 28px 16px calc(var(--v2-tabbar-h) + var(--v2-safe-bottom) + 20px);
    background: linear-gradient(180deg, rgba(11, 7, 16, 0), var(--v2-bg-1) 28px);
    pointer-events: none;
}

html.v2 .v2-dt-cta-inner {
    max-width: var(--v2-dt-col);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
}

html.v2 .v2-dt-model {
    align-self: center;
    max-width: 100%;
    min-height: 28px;
    padding: 4px 4px 0;
    display: block;
    font: 500 13px/1.45 var(--v2-font);
    color: var(--v2-text-2);
    text-align: center;
    overflow-wrap: anywhere;
}

/* Точка в строке, чтобы при переносе осталась у начала текста */
html.v2 .v2-dt-model-dot {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f8f5ff, #b9aecb 45%, #564c68 100%);
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .45);
}

/* Одна строка: длинное имя («Чат с Ленор - сестра твоего друга» на 320)
   режется многоточием, текст в разметке целиком */
html.v2 .v2-dt-cta .character-details-main-action {
    display: block;
    width: 100%;
    min-height: 56px;
    margin: 0 !important;
    padding: 12px 16px;
    border-radius: var(--v2-r-md) !important;
    font: 700 17px/32px var(--v2-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.v2 .v2-dt-cta .character-details-main-action::before {
    display: none;
}

html.v2 .v2-dt-cta .character-details-main-action.purchase-needed {
    background: var(--v2-control-2) !important;
    border: 1px solid var(--v2-gold-line) !important;
    color: var(--v2-gold) !important;
    box-shadow: none !important;
}

/* Телефон: в B на экране персонажа таббара нет (назад ведёт «←»), кнопка
   прижата к низу. На ПК таббар остаётся, пока нет сайдбара, кнопка над ним */
html.v2 .v2-dt .bottom-nav {
    z-index: 100;
}

@media (max-width: 759px) {
    html.v2 .v2-dt .bottom-nav {
        display: none !important;
    }
    html.v2 .v2-dt-cta {
        padding-bottom: calc(var(--v2-safe-bottom) + 20px);
    }
}

/* ---------- Анимации ---------- */

@keyframes v2DtRise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes v2DtPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35) translateY(-2px); }
    100% { transform: scale(1); }
}

@keyframes v2DtSpring {
    0% { transform: scale(1); }
    40% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ---------- ПК ---------- */

@media (min-width: 900px) {
    html.v2 .page-container.v2-dt {
        --v2-dt-art-h: min(60vh, 560px);
    }

    html.v2 .v2-dt-art-inner {
        border-radius: 0 0 var(--v2-r-sheet) var(--v2-r-sheet);
    }

    html.v2 .v2-dt-panel {
        padding: 28px 24px 32px;
        box-shadow: none;   /* на светлом фоне ПК тень видна тёмной рамкой вокруг колонки */
    }

    html.v2 .v2-dt .character-details-tags-wrapper {
        margin: -6px -24px;
        padding: 0 24px;
    }
}

@media (hover: hover) {
    html.v2 .v2-dt-top .back-btn:hover,
    html.v2 .v2-dt-top .character-details-fav-btn:hover,
    html.v2 .v2-dt .gallery-arrow:hover {
        background: var(--v2-control-2) !important;
        transform: none;
    }

    html.v2 .v2-dt .gallery-arrow:hover {
        transform: translateY(-50%);
    }

    html.v2 .v2-dt .creator-follow-btn:hover {
        background: var(--v2-control) !important;
        opacity: 1;
    }

    html.v2 .v2-dt .creator-follow-btn.is-following:hover {
        background: var(--v2-hover) !important;
    }

    html.v2 .v2-dt-more:hover {
        background: var(--v2-accent-tint);
    }

    html.v2 .v2-dt .character-details-tag.tag-clickable:hover {
        background: var(--v2-hover) !important;
        background-clip: padding-box !important;
        box-shadow: inset 0 0 0 1px var(--v2-accent-line);
    }

    html.v2 .v2-dt-bonus .character-bonus-claim:hover {
        filter: brightness(1.08);
    }

    html.v2 .v2-dt-cta .character-details-main-action.purchase-needed:hover {
        background: var(--v2-control) !important;
    }
}

/* ---------- Меньше движения ---------- */

@media (prefers-reduced-motion: reduce) {
    html.v2 .v2-dt-art-inner {
        transform: none !important;
    }
    html.v2 .v2-dt-panel {
        animation: v2Fade 150ms var(--v2-ease) both;
    }
    html.v2 .v2-dt-long,
    html.v2 .v2-dt-more svg,
    html.v2 .v2-dt .like-icon,
    html.v2 .v2-dt .fav-icon {
        transition: none !important;
    }
    html.v2 .v2-dt .gallery-dot.active {
        animation: none !important;
    }
    html.v2 .v2-dt .like-count.v2-dt-pop,
    html.v2 .v2-dt-chats-num.v2-dt-pop,
    html.v2 .v2-dt-top .crystal-counter.v2-dt-pop {
        animation: none !important;
    }
}