/* ═══ Комикс-режим ленты ══════════════════════════════════════════════════
 *
 * Отдельный файл, потому что и режим отдельный: без класса .comic-feed на
 * ленте отсюда не применяется ни одно правило, и обычный вид остаётся ровно
 * таким, каким был.
 *
 * Сообщение внутри панели — тот же самый .msg, что и всегда. Здесь ему
 * меняются заливка, рамка и радиус, но структура, вложения, опросы,
 * галочки и меню остаются нетронутыми.
 *
 * Переменные названы с приставкой --c-, чтобы не столкнуться с палитрой
 * приложения: она продолжает работать рядом, в шапке и в списке чатов.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Манга: чёрно-белое, скринтоны, тонкая рамка ─────────────────────────── */
[data-comic-style="manga"] {
    --c-paper: #f3f1ea;
    --c-ink: #17171b;
    --c-frame: #17171b;
    --c-frame-w: 2px;
    --c-radius: 0px;
    --c-bubble: #ffffff;
    --c-bubble-ink: #17171b;
    --c-bubble-line: #17171b;
    --c-bubble-radius: 20px 24px 20px 24px;
    --c-caption-bg: #17171b;
    --c-caption-ink: #f3f1ea;
    --c-scene-a: #e6e3da; --c-scene-b: #dbd7cc; --c-scene-c: #d0ccbf;
    --c-tone: rgba(23,23,27,.34);
    --c-tone-size: 4px;
    --c-actor: grayscale(1) contrast(1.35) brightness(1.04);
    --c-font: "Segoe Script", "Comic Sans MS", "Bad Script", cursive;
}
[data-theme="dark"][data-comic-style="manga"] {
    --c-paper: #0e0e12;
    --c-ink: #eceae4;
    --c-frame: #7d7d8b;
    --c-bubble: #1a1a21;
    --c-bubble-ink: #eceae4;
    --c-bubble-line: #9a9aa8;
    --c-caption-bg: #eceae4;
    --c-caption-ink: #0e0e12;
    --c-scene-a: #191920; --c-scene-b: #212129; --c-scene-c: #292933;
    --c-tone: rgba(236,234,228,.26);
    --c-actor: grayscale(1) contrast(1.1) brightness(1.25);
}

/* ── Супергерои: толстый контур, полутон, жёлтые капшн-боксы ─────────────── */
[data-comic-style="hero"] {
    --c-paper: #f5eeda;
    --c-ink: #141019;
    --c-frame: #141019;
    --c-frame-w: 4px;
    --c-radius: 2px;
    --c-bubble: #fffdf6;
    --c-bubble-ink: #141019;
    --c-bubble-line: #141019;
    --c-bubble-radius: 16px;
    --c-caption-bg: #ffd23f;
    --c-caption-ink: #141019;
    --c-scene-a: #4b7bd6; --c-scene-b: #d95a4a; --c-scene-c: #f2a63b;
    --c-tone: rgba(20,16,25,.24);
    --c-tone-size: 5px;
    --c-actor: saturate(1.5) contrast(1.25);
    --c-font: "Comic Sans MS", "Segoe Script", cursive;
}
[data-theme="dark"][data-comic-style="hero"] {
    --c-paper: #12101c;
    --c-ink: #f4efe2;
    --c-frame: #f4efe2;
    --c-bubble: #1e1a31;
    --c-bubble-ink: #f7f3e8;
    --c-bubble-line: #f4efe2;
    --c-caption-bg: #ffd23f;
    --c-caption-ink: #171223;
    --c-scene-a: #2b4a91; --c-scene-b: #8c3037; --c-scene-c: #96601f;
    --c-tone: rgba(244,239,226,.2);
    --c-actor: saturate(1.35) contrast(1.2) brightness(1.08);
}

/* ── Чистая линия: тонкий ровный контур, плоские цвета, без растра ───────── */
[data-comic-style="clair"] {
    --c-paper: #fbf9f4;
    --c-ink: #2a2f3a;
    --c-frame: #2a2f3a;
    --c-frame-w: 1.5px;
    --c-radius: 10px;
    --c-bubble: #ffffff;
    --c-bubble-ink: #2a2f3a;
    --c-bubble-line: #2a2f3a;
    --c-bubble-radius: 14px;
    --c-caption-bg: #e9e3d5;
    --c-caption-ink: #2a2f3a;
    --c-scene-a: #cfe0e8; --c-scene-b: #e8d9c8; --c-scene-c: #d8e3d0;
    --c-tone: transparent;
    --c-tone-size: 4px;
    --c-actor: saturate(.92);
    --c-font: "Segoe UI", -apple-system, Roboto, sans-serif;
}
[data-theme="dark"][data-comic-style="clair"] {
    --c-paper: #141821;
    --c-ink: #e6eaf2;
    --c-frame: #78829a;
    --c-bubble: #1e2531;
    --c-bubble-ink: #e6eaf2;
    --c-bubble-line: #78829a;
    --c-caption-bg: #2b3341;
    --c-caption-ink: #e6eaf2;
    --c-scene-a: #23374a; --c-scene-b: #3b3325; --c-scene-c: #24382d;
    --c-actor: saturate(.95) brightness(1.06);
}

/* ── Скетч: дрожащая рамка, штриховка, рукописный текст ──────────────────── */
[data-comic-style="sketch"] {
    --c-paper: #f7f4ec;
    --c-ink: #2b2a26;
    --c-frame: #2b2a26;
    --c-frame-w: 2px;
    --c-radius: 4px;
    --c-bubble: #fffdf7;
    --c-bubble-ink: #2b2a26;
    --c-bubble-line: #2b2a26;
    --c-bubble-radius: 22px 18px 24px 20px;
    --c-caption-bg: #eee7d4;
    --c-caption-ink: #2b2a26;
    --c-scene-a: #ece5d5; --c-scene-b: #e3ddca; --c-scene-c: #dad4c1;
    --c-tone: rgba(43,42,38,.3);
    --c-tone-size: 6px;
    --c-actor: grayscale(.6) contrast(1.12);
    --c-font: "Segoe Script", "Comic Sans MS", "Bad Script", cursive;
}
[data-theme="dark"][data-comic-style="sketch"] {
    --c-paper: #16151a;
    --c-ink: #e8e4d8;
    --c-frame: #a5a296;
    --c-bubble: #1f1e26;
    --c-bubble-ink: #e8e4d8;
    --c-bubble-line: #a5a296;
    --c-caption-bg: #2a2833;
    --c-caption-ink: #e8e4d8;
    --c-scene-a: #201f27; --c-scene-b: #282730; --c-scene-c: #302e3a;
    --c-tone: rgba(232,228,216,.16);
    --c-actor: grayscale(.5) contrast(1.06) brightness(1.15);
}
/* ── Русские сказки: тёплая бумага, коричневая тушь, красный рушник ──────── */
/*
   Сказка: реплика — не пузырь, а доска.

   Шрифт с засечками, а не рукописный: так набраны книжные сказки, и
   на пёстрой сцене засечки читаются, а росчерк расплывается. Кайма
   золотая, бумага — пергамент.
*/
[data-comic-style="folk"] {
    --c-paper: #f6ecd8;
    --c-ink: #3b2412;
    --c-frame: #d4a250;
    --c-frame-w: 3px;
    --c-radius: 14px;
    --c-bubble: #fdf1d8;
    --c-bubble-ink: #3b2412;
    --c-bubble-line: #b3872b;
    --c-bubble-radius: 10px;
    --c-caption-bg: #b3372b;
    --c-caption-ink: #fff6e6;
    --c-scene-a: #e8d6b0; --c-scene-b: #d9c08c; --c-scene-c: #c9a870;
    --c-tone: rgba(59,36,18,.24);
    --c-tone-size: 6px;
    --c-actor: none;
    --c-font: "PT Serif", Georgia, "Times New Roman", serif;
}
[data-theme="dark"][data-comic-style="folk"] {
    --c-paper: #1a1411;
    --c-ink: #f0ddbe;
    --c-bubble: #2b1e15;
    --c-bubble-ink: #f8ead2;
    --c-bubble-line: #c08a4a;
    --c-scene-a: #2a211b; --c-scene-b: #33271f; --c-scene-c: #3b2d23;
    --c-tone: rgba(240,221,190,.18);
}

/* ── Наше кино: выцветшая плёнка, прямой кадр ────────────────────────────── */
[data-comic-style="cinema"] {
    --c-paper: #efeae2;
    --c-ink: #1a1a1a;
    --c-frame: #1a1a1a;
    --c-frame-w: 2px;
    --c-radius: 0px;
    --c-bubble: #ffffff;
    --c-bubble-ink: #1a1a1a;
    --c-bubble-line: #1a1a1a;
    --c-bubble-radius: 6px;
    --c-caption-bg: #1a1a1a;
    --c-caption-ink: #efeae2;
    --c-scene-a: #d8d2c6; --c-scene-b: #c8c1b4; --c-scene-c: #b7b0a2;
    --c-tone: rgba(26,26,26,.2);
    --c-tone-size: 5px;
    --c-actor: grayscale(1) contrast(1.15);
    --c-font: inherit;
}
[data-theme="dark"][data-comic-style="cinema"] {
    --c-paper: #0f1013;
    --c-ink: #ededed;
    --c-frame: #8a8a8a;
    --c-bubble: #1a1c20;
    --c-bubble-ink: #f2f2f2;
    --c-bubble-line: #9a9a9a;
    --c-caption-bg: #d9c88a;
    --c-caption-ink: #14151a;
    --c-scene-a: #1e2024; --c-scene-b: #25272c; --c-scene-c: #2c2f35;
    --c-tone: rgba(237,237,237,.14);
}

/* ── Блокнот ─────────────────────────────────────────────────────────────── */
/*
   Переписка здесь не лента, а блокнот: страница на весь экран, страницы
   листаются вверх и вниз. Листание — обычная прокрутка с прилипанием
   (scroll-snap), а не свои жесты: свои сломали бы колесо мыши, клавиатуру
   и привычное поведение полосы прокрутки.
*/
.comic-feed.messages {
    display: block;
    padding: 0;
    background: var(--c-paper);
    color: var(--c-ink);
    font-family: var(--c-font);
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
}

.cslide {
    position: relative;
    height: 100%;
    min-height: 420px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    border-bottom: var(--c-frame-w) solid var(--c-frame);
}

/* Комната лежит под разговором и ничего не перехватывает. */
.croom {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/*
   Своя картинка занимает кадр целиком, а поверх — вуаль цветом бумаги:
   без неё текст читается не на каждом снимке.
*/
.cscene {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.cscene__veil {
    position: absolute; inset: 0;
    background: var(--c-paper);
    opacity: .45;
    pointer-events: none;
}

.cslide__body {
    position: relative;
    z-index: 1;
    /* Явно: поля не должны прибавляться к высоте страницы, иначе ответ
       внизу уезжает за край экрана — а именно он и есть вторая половина
       сцены. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px 16px;
}

.cslide__head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.72rem;
    opacity: .7;
}

.cslide__gap { flex: 1 1 auto; min-height: 16px; }

/*
   Подписи поверх картины — белым с тенью.

   Цвет стиля рассчитан на ровную бумагу страницы. Сцена ровной не
   бывает: на закате она сверху лиловая, а снизу золотая, и тёмная
   подпись тонет в одном краю кадра, светлая — в другом.
*/
.cslide--painted .cslide__head,
.cslide--painted .cvoice__who,
.cslide--painted .cactor__name {
    color: #fff;
    opacity: .94;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

/* ── Голос на странице ───────────────────────────────────────────────────── */
.cvoice {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 92%;
}
.cvoice--right { flex-direction: row-reverse; align-self: flex-end; }

.cvoice__said { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cvoice--right .cvoice__said { align-items: flex-end; }

.cvoice__who { font-size: 0.78rem; font-weight: 700; opacity: .85; }

/*
   Герой в кадре — медаль: кружок с каймой, насечками и мягким
   свечением. Насечки рисует конический градиент, свечение — размытая
   подложка: две строки вместо картинки, которую пришлось бы держать в
   двух темах.
*/
.cmedal {
    position: relative;
    width: 66px; height: 66px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: repeating-conic-gradient(
        var(--c-frame) 0deg 4deg, transparent 4deg 22.5deg
    );
}
.cmedal::before {
    content: "";
    position: absolute; inset: -7px;
    border-radius: 50%;
    background: var(--c-caption-bg);
    opacity: .3;
    filter: blur(7px);
    z-index: 0;
}
.cmedal::after {
    content: "";
    position: absolute; inset: 4px;
    border-radius: 50%;
    border: var(--c-frame-w) solid var(--c-frame);
    pointer-events: none;
    z-index: 2;
}
.cmedal .avatar, .cmedal .cfolk {
    position: relative; z-index: 1;
    width: 52px; height: 52px;
    flex: none;
    border: none;
}
.cmedal .avatar { filter: var(--c-actor); }

/* Панель выбора реакции не должна срезаться краем страницы. */
.cslide:has(.picker-emoji) { overflow: visible; z-index: 5; }
.comic-feed .picker-emoji { z-index: 30; }

/* ── Сказочный персонаж ──────────────────────────────────────────────────── */
.cactor {
    display: flex; flex-direction: column; align-items: center;
    width: 66px; flex: none;
}
.cfolk { width: 54px; height: 54px; }
.cactor__name {
    font-size: 0.56rem;
    line-height: 1.15;
    text-align: center;
    opacity: .8;
}

/* ── Крылатая фраза ──────────────────────────────────────────────────────── */
/*
   Фраза висит в середине страницы — там, где пусто.
   Сверху и снизу разговор: поставленная наверх, она пряталась за первой
   же репликой, и от неё оставалось одно название фильма.
*/
.cquote {
    position: absolute;
    top: 50%; left: 8%; right: 8%;
    transform: translateY(-50%);
    z-index: 1;
    text-align: center;
    pointer-events: none;
}
.cquote__line {
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    opacity: .4;
}
.cquote__film {
    margin-top: 6px;
    font-size: 0.7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .3;
}

/* ── Кадр кино ───────────────────────────────────────────────────────────── */
/*
   Кадры из самих фильмов сюда не попадают и попасть не могут — они
   защищены авторским правом. А вот то, как фильм выглядит на плёнке,
   правом не защищено: чёрные поля сверху и снизу, тёплый отсвет и
   зерно. Этого хватает, чтобы страница читалась кадром.
*/
.cslide--film {
    /*
       Поле кадра — в точках, а не в долях высоты: доля в padding
       считается от ширины, и на телефоне поля разъезжались с полосами.
    */
    --c-bar: 52px;
}
.cslide--film::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            #000 0 var(--c-bar),
            transparent var(--c-bar) calc(100% - var(--c-bar)),
            #000 calc(100% - var(--c-bar)) 100%),
        radial-gradient(ellipse at 50% 45%, rgba(255, 196, 120, .18), transparent 70%);
}
.cslide--film::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .14;
    background-image: repeating-conic-gradient(
        rgba(255, 255, 255, .6) 0% 25%, rgba(0, 0, 0, .6) 0% 50%
    );
    background-size: 3px 3px;
    mix-blend-mode: overlay;
}
/* Поля кадра не должны съедать подпись дня и номер страницы. */
.cslide--film .cslide__body { padding-block: calc(var(--c-bar) + 12px); }

/* ── Писаные сцены: свет и частицы ───────────────────────────────────────── */
/*
   Цвета частиц приходят из палитры сцены (она в comic-scenery.js, и она
   заметно теплее темы) — здесь только движение. Каждой частице свой
   сдвиг задан при отрисовке, иначе они мигали бы в такт.
*/
.scn__ember { animation: cscn-ember 7s linear infinite; }
.scn__star { animation: cscn-star 3.5s ease-in-out infinite; }
.scn__firefly { animation: cscn-firefly 6s ease-in-out infinite; }
.scn__flake { animation: cscn-flake 9s linear infinite; }
.scn__ray { animation: cscn-ray 8s ease-in-out infinite; }
.scn__window { animation: cscn-window 3.2s ease-in-out infinite; }

@keyframes cscn-ember {
    0% { opacity: 0; transform: translate(0, 0) }
    25% { opacity: .8 }
    100% { opacity: 0; transform: translate(24px, -520px) }
}
@keyframes cscn-star { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes cscn-firefly {
    0% { opacity: 0; transform: translate(0, 0) }
    30% { opacity: .9 }
    100% { opacity: 0; transform: translate(18px, -350px) }
}
@keyframes cscn-flake {
    0% { opacity: 0; transform: translate(0, 0) }
    10% { opacity: .75 }
    100% { opacity: .3; transform: translate(-12px, 700px) }
}
@keyframes cscn-ray { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
@keyframes cscn-window { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
    .scn__ember, .scn__star, .scn__firefly,
    .scn__flake, .scn__ray, .scn__window { animation: none; }
    .scn__ember, .scn__firefly { opacity: .45; }
}

/* ── Предметы комнаты ────────────────────────────────────────────────────── */
/*
   Цвета берутся из переменных стиля: та же комната в ночной теме гасит
   свет, а не остаётся дневной заплаткой на тёмном экране.
*/
.room__wall { fill: var(--c-scene-a); }
.room__floor { fill: var(--c-scene-b); }
.room__water { fill: var(--c-scene-c); }
.room__fill { fill: var(--c-scene-c); }
.room__solid { fill: var(--c-ink); }
.room__ink { fill: none; stroke: var(--c-ink); stroke-opacity: .7; stroke-width: 3; }
.room__soft { fill: var(--c-ink); fill-opacity: .16; stroke: var(--c-ink); stroke-opacity: .16; stroke-width: 2; }
.room__glow { fill: var(--c-caption-bg); fill-opacity: .35; }
.room__mouth { fill: var(--c-ink); fill-opacity: .7; }
.room__board { fill: var(--c-ink); fill-opacity: .25; }
.room__chalk { stroke: var(--c-ink); stroke-opacity: .45; stroke-width: 2; }
.room__flag { fill: var(--c-frame); }

/* Заливка + обводка одним элементом: два класса на фигуре. */
.room__fill.room__ink { fill: var(--c-scene-c); }
.room__glow.room__ink { fill: var(--c-caption-bg); fill-opacity: .35; }

/* ── Сказочный персонаж: фигуры ──────────────────────────────────────────── */
/*
   Без этих правил SVG рисуется по умолчанию — чёрной заливкой без
   обводки, и герой превращается в силуэт-кляксу. Цвета те же, что у
   комнаты: персонаж должен выглядеть нарисованным той же рукой.
*/
.folk__fill { fill: var(--c-scene-c); }
.folk__ink { stroke: var(--c-ink); stroke-opacity: .8; stroke-width: 3; }
.folk__fill.folk__ink { fill: var(--c-scene-c); }
.folk__accent { fill: var(--c-frame); }
.folk__accent.folk__ink { fill: var(--c-frame); }
.folk__solid { fill: var(--c-ink); fill-opacity: .75; }
.cfolk line { stroke: var(--c-ink); stroke-opacity: .8; stroke-width: 3; }
.cfolk path:not([class]) { fill: none; }

/* ── Движение ────────────────────────────────────────────────────────────── */
.room__flame { fill: var(--c-caption-bg); fill-opacity: .8; animation: croom-flame 1.6s ease-in-out infinite; transform-origin: center bottom; }
.room__steam { fill: none; stroke: var(--c-ink); stroke-opacity: .2; stroke-width: 2; animation: croom-steam 4s linear infinite; }
.room__firefly { fill: var(--c-caption-bg); animation: croom-firefly 6s linear infinite; }
.room__star { fill: var(--c-ink); fill-opacity: .2; animation: croom-star 3.5s ease-in-out infinite; }
.room__ripple { stroke: var(--c-ink); stroke-opacity: .2; stroke-width: 2; animation: croom-ripple 5s linear infinite; }
.room__snow { fill: var(--c-ink); fill-opacity: .18; animation: croom-snow 9s linear infinite; }
.room__fan { animation: croom-spin 2.4s linear infinite; }
.room__pendulum { animation: croom-swing 4s ease-in-out infinite; }
.room__bird { fill: none; stroke: var(--c-ink); stroke-opacity: .6; stroke-width: 2.5; animation: croom-fly 14s linear infinite; }

@keyframes croom-flame { 0%, 100% { transform: scaleY(.75) } 50% { transform: scaleY(1.15) } }
@keyframes croom-steam { 0% { opacity: 0; transform: translateY(0) } 20% { opacity: .5 } 100% { opacity: 0; transform: translateY(-40px) } }
@keyframes croom-firefly { 0% { opacity: 0; transform: translateY(60px) } 30% { opacity: .9 } 100% { opacity: 0; transform: translateY(-120px) } }
@keyframes croom-star { 0%, 100% { opacity: .25 } 50% { opacity: .9 } }
@keyframes croom-ripple { 0% { opacity: 0; transform: translateX(0) } 30% { opacity: .7 } 100% { opacity: 0; transform: translateX(120px) } }
@keyframes croom-snow { 0% { opacity: 0; transform: translateY(0) } 10% { opacity: .8 } 100% { opacity: .2; transform: translateY(520px) } }
@keyframes croom-spin { to { transform: rotate(360deg) } }
@keyframes croom-swing { 0%, 100% { transform: rotate(-6deg) } 50% { transform: rotate(6deg) } }
@keyframes croom-fly { 0% { transform: translate(20px, 150px) } 100% { transform: translate(380px, 110px) } }

/*
   Человек, попросивший меньше движения, просил не про одно приложение.
   Комната остаётся, но замирает — это украшение, и первое, что должно
   останавливаться.
*/
@media (prefers-reduced-motion: reduce) {
    .room__flame, .room__steam, .room__firefly, .room__star,
    .room__ripple, .room__snow, .room__fan, .room__pendulum, .room__bird {
        animation: none;
    }
    .room__snow, .room__firefly, .room__steam { opacity: .35; }
    .comic-feed.messages { scroll-behavior: auto; }
}

/* ── Сообщение внутри панели ─────────────────────────────────────────────── */
.comic-feed .msg {
    max-width: 94%;
    background: var(--c-bubble);
    color: var(--c-bubble-ink);
    border: var(--c-frame-w) solid var(--c-bubble-line);
    border-radius: var(--c-bubble-radius);
    animation: none;
}
.comic-feed .msg--in { align-self: flex-start; border-bottom-left-radius: var(--c-bubble-radius); }
/*
   Своё сообщение в комиксе не красится основным цветом: кто говорит, видно
   по персонажу в кадре и по стороне, с которой растёт хвост. Цветной пузырь
   рядом с чёрно-белой панелью выглядел бы наклейкой из другого приложения.
*/
.comic-feed .msg--out {
    align-self: flex-end;
    background: var(--c-bubble);
    color: var(--c-bubble-ink);
    border-bottom-right-radius: var(--c-bubble-radius);
}
.comic-feed .msg--tight {
    border-radius: 50% / 44%;
    padding: 12px 24px;
    text-align: center;
}
/*
   У короткой реплики время и галочки идут в строку с текстом, а не под ним:
   отдельной строкой они растягивали овал вдвое, и «Ага» занимало пузырь
   размером с абзац.
*/
.comic-feed .msg--tight .msg__meta {
    display: inline-flex; margin: 0 0 0 8px; vertical-align: baseline;
}
.comic-feed .msg--emph { font-size: 1.2rem; font-weight: 700; }
.comic-feed .msg--long { max-width: 68%; }
.comic-feed .msg--media-only { border: none; background: none; padding: 0; }
.comic-feed .msg--service {
    align-self: center; background: none; border: none;
    color: var(--c-ink); opacity: .7;
}
.comic-feed .msg__author { color: var(--c-bubble-ink); opacity: .55; }
.comic-feed .msg__meta { color: var(--c-bubble-ink); opacity: .45; font-size: 0.62rem; }
.comic-feed .msg--read .msg__tick { color: var(--c-bubble-ink); }

/* Хвост: треугольник цветом контура, поверх — второй, поменьше и повыше,
   цветом заливки. По краям остаётся линия, внутри пузырь. */
.comic-feed .msg__tail {
    position: absolute; bottom: -11px; left: 22%;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 11px solid transparent;
    border-top: 13px solid var(--c-bubble-line);
}
.comic-feed .msg__tail::after {
    content: ""; position: absolute;
    left: -4px; top: calc(-13px - var(--c-frame-w) * 1.4);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--c-bubble);
}
.comic-feed .msg--tight .msg__tail { bottom: -10px; left: 44%; }
.comic-feed .msg--out .msg__tail {
    left: auto; right: 22%;
    border-left-width: 11px; border-right-width: 6px;
}
.comic-feed .msg--out .msg__tail::after { left: -8px; }
.comic-feed .msg--out.msg--tight .msg__tail { left: auto; right: 44%; }
.comic-feed .msg--media-only .msg__tail { display: none; }

/*
   Реакции наклейкой на угол пузыря — как звуковой эффект в кадре.
   В обычном виде они остаются строкой под сообщением.
*/
.comic-feed .msg .reactions {
    position: absolute; top: -19px; right: -8px;
    margin: 0; gap: 2px;
    transform: rotate(-6deg);
    z-index: 4;
}
.comic-feed .msg--out .reactions { right: auto; left: -8px; transform: rotate(6deg); }
.comic-feed .reaction {
    background: var(--c-bubble);
    color: var(--c-bubble-ink);
    border: var(--c-frame-w) solid var(--c-bubble-line);
}
.comic-feed .reaction--mine { border-color: var(--c-bubble-line); }

@media (max-width: 760px) {
    .cslide { min-height: 380px; }
    .cslide__body { padding: 12px; }
    .cvoice { max-width: 96%; }
    .cslide--film { --c-bar: 38px; }
    .cmedal { width: 56px; height: 56px; }
    .cmedal .avatar, .cmedal .cfolk { width: 44px; height: 44px; }
    .cactor { width: 58px; }
    .cquote__line { font-size: 1.2rem; }
    .comic-feed .msg--long { max-width: 92%; }
}