.dream-comic [hidden] { display: none; }
.dream-comic-link { display: block; line-height: 0; background: #05090d; }
.dream-comic-link[data-image-loading="true"] { position: relative; cursor: wait; }
.dream-comic-link[data-image-failed="true"] { cursor: default; }
.dream-comic-link[data-image-loading="true"] > .comic-redraw-placeholder { position: absolute; inset: 0; height: 100%; min-height: 0; aspect-ratio: auto; }
.dream-comic-link:focus-visible { outline: 3px solid #41b4e5; outline-offset: -3px; }
.dream-comic-image { display: block; width: 100%; height: auto; }
/* Дорисованный слайд проявляется поверх раскадровки, по которой его рисовали */
.dream-comic-link[data-revealing="true"] > .dream-comic-image { position: relative; z-index: 1; animation: comic-sketch-reveal 1.8s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes comic-sketch-reveal { from { opacity: 0; filter: blur(6px) brightness(1.25); } 60% { filter: blur(0) brightness(1.05); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .dream-comic-link[data-revealing="true"] > .dream-comic-image { animation-duration: .01s; } }
.dream-comic-video { object-fit: contain; background: #05090d; }
.dream-comic-link[data-video-slide] { display: flex; align-items: center; }
.dream-comic-state { padding: 26px 28px; border-bottom: 1px solid #22303c; background: linear-gradient(125deg, #102332, #0c131d); }
.dream-comic-label { margin: 0; color: #c9d8e5; font-size: 14px; }
.comic-loading { display: inline-flex; align-items: center; gap: 3px; margin-right: 9px; vertical-align: middle; color: #64c7ed; }
.comic-loading > span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: comic-loading-dot 1s ease-in-out infinite; }
.comic-loading > span:nth-child(2) { animation-delay: .16s; }
.comic-loading > span:nth-child(3) { animation-delay: .32s; }
@keyframes comic-loading-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .comic-loading > span { animation: none; } }
.dream-comic-notice { margin: 8px 0 0; color: #92a7b9; font-size: 13px; line-height: 1.6; }
.dream-comic-notice:empty { display: none; }
.dream-comic-button, .dream-comic-consent { display: inline-block; margin-top: 12px; padding: 8px 14px; border: 1px solid #345366; border-radius: 8px; background: #122a39; color: #a8def4; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.dream-comic-button:focus-visible, .dream-comic-consent:focus-visible { outline: 2px solid #41b4e5; outline-offset: 3px; }
.dream-comic-button:disabled { opacity: .6; cursor: wait; }
.dream-comic-detail { width: 100%; max-width: 540px; overflow: hidden; border-radius: 16px; margin: 0 auto 28px; }
.dream-comic-detail + .dream-detail-likes { max-width: 540px; margin-inline: auto; }
@media (max-width: 600px) {
  .dream-comic-state { padding: 22px 20px; }
  .dream-comic-detail { width: calc(100% + 40px); max-width: none; margin-inline: -20px; border-radius: 0; }
}

.comic-carousel { width: 100%; min-width: 0; }
.comic-carousel-viewport { position: relative; overflow: hidden; }
.comic-carousel-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.comic-carousel-track::-webkit-scrollbar { display: none; }
.comic-carousel-track .dream-comic-link { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.comic-carousel-track:focus-visible { outline: 2px solid #64c7ed; outline-offset: -2px; }
.comic-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 50%; background: #ffffff94; color: #26303b; box-shadow: 0 1px 7px #0002; cursor: pointer; transition: background .15s; }
.comic-carousel-arrow:hover { background: #ffffffc7; }
.comic-carousel-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.comic-carousel-prev { left: 12px; }
.comic-carousel-next { right: 12px; }
.comic-carousel-counter { position: absolute; top: 12px; right: 12px; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 20px; background: #10151ab3; color: #fff; font: 12px/1.4 system-ui, sans-serif; pointer-events: auto; }
.comic-star { position: absolute; top: 12px; left: 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 28px; height: 28px; padding: 5px; border: 0; border-radius: 999px; background: #10151ab3; color: #fff; cursor: pointer; }
.comic-star::before { content: ''; position: absolute; inset: -8px; }
.comic-star svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.comic-star[aria-pressed="true"] { color: #f2d28b; }
.comic-star[aria-pressed="true"] svg { fill: currentColor; }
.comic-star:focus-visible, .comic-carousel-counter:focus-visible { outline: 2px solid #64c7ed; outline-offset: 3px; }
.comic-star:disabled { opacity: .65; }
.comic-star-tooltip { position: absolute; top: 36px; left: 0; z-index: 2; padding: 7px 10px; border: 1px solid #ffffff1a; border-radius: 7px; background: #10151aeb; color: #fff; font: 12px/1.4 system-ui, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
.comic-star:hover .comic-star-tooltip, .comic-star:focus-visible .comic-star-tooltip { opacity: 1; visibility: visible; }
.comic-style-tooltip { left: auto; right: 0; }
.comic-carousel-counter:hover .comic-style-tooltip, .comic-carousel-counter:focus-visible .comic-style-tooltip { opacity: 1; visibility: visible; }
.comic-captions:hover .comic-star-tooltip, .comic-captions:focus-visible .comic-star-tooltip { opacity: 1; visibility: visible; }
.comic-star-status { position: absolute; top: 48px; left: 12px; right: 12px; z-index: 3; width: fit-content; padding: 7px 10px; border-radius: 7px; background: #10151aeb; color: #ffb5aa; font: 12px/1.4 system-ui, sans-serif; }
.comic-carousel-dots { display: flex; justify-content: center; align-items: center; gap: 0; padding: 6px 0 2px; }
.comic-carousel-dot { display: grid; place-items: center; width: 20px; height: 26px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.comic-carousel-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #596775; transition: background .15s, transform .15s; }
.comic-carousel-dot[aria-current="true"]::after { background: #55bafa; transform: scale(1.15); }
.comic-carousel-dot:focus-visible, .comic-carousel-arrow:focus-visible { outline: 2px solid #64c7ed; outline-offset: 2px; }
@media (hover: none) and (pointer: coarse) { .dream-comic .comic-carousel-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .comic-carousel-dot::after, .comic-carousel-arrow { transition: none; } }

.comic-carousel-dot:disabled { cursor: default; }
.comic-carousel-dot:disabled::after { background: transparent; border: 1px solid #596775; }
/* Слайд ещё не нарисован: кружок пустой, но кликабельный — к заглушке можно перейти; текущий — пустой голубой */
.comic-carousel-dot[data-pending]::after { box-sizing: border-box; background: transparent; border: 1px solid #596775; }
.comic-carousel-dot[data-pending][aria-current="true"]::after { border-color: #55bafa; }

.comic-viewer-page { margin: 0; background: #000; }
.comic-viewer-open { overflow: hidden; }
.comic-lightbox { position: fixed; inset: 0; box-sizing: border-box; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; padding: 0; border: 0; margin: 0; background: #000; }
.comic-lightbox::backdrop { background: #000; }
.comic-fullscreen { position: relative; display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; height: 100vh; height: 100dvh; padding: 0; border: 0; background: #000; color: #fff; text-decoration: none; cursor: zoom-out; }
.comic-fullscreen img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.comic-fullscreen:focus-visible { outline: 2px solid #64c7ed; outline-offset: -3px; }
.comic-viewer-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #18212bbd; font: 28px/1 system-ui, sans-serif; }

.comic-star-count { padding-right: 4px; font: 12px/1.4 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.comic-redraw-placeholder { display: flex; width: 100%; aspect-ratio: 2 / 3; align-items: flex-start; justify-content: center; padding: clamp(80px, 25vh, 240px) 32px 32px; box-sizing: border-box; color: #d7edf9; background: linear-gradient(145deg, #071723, #102b3c); text-align: center; font-size: 17px; line-height: 1.5; }
.dream-comic-link[data-redrawing="true"] { cursor: default; text-decoration: none; }
.comic-fullscreen .comic-redraw-placeholder { height: 100%; aspect-ratio: auto; align-items: center; padding: 32px; }

/* Титры по кнопке: слайд без титров подгружается по запросу и плавно ложится поверх; см. docs/COMIC_CAPTIONS.md */
.comic-carousel-track .dream-comic-link:has(> .comic-clean-image) { position: relative; }
.comic-clean-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); }
.comic-clean-image.is-visible { opacity: 1; }
/* Кнопка — правее плашки с названием стиля; плашка сдвигается влево, когда кнопка видна */
.comic-carousel:has(.comic-captions:not([hidden])) .comic-carousel-counter { right: 48px; max-width: calc(100% - 60px); }
.comic-captions { position: absolute; top: 12px; right: 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 5px; border: 0; border-radius: 999px; background: #10151ab3; color: #fff; cursor: pointer; transition: color .3s, background-color .3s; }
.comic-captions::before { content: ''; position: absolute; inset: -8px; }
.comic-captions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.comic-captions[aria-pressed="true"] { color: #7dd3fc; }
.comic-captions[aria-pressed="true"] svg path { opacity: .35; }
.comic-captions[data-loading] { cursor: progress; }
.comic-captions[data-loading]::after { content: ''; position: absolute; inset: -2px; border: 2px solid #ffffff33; border-top-color: #fff; border-radius: 999px; animation: comic-captions-spin .8s linear infinite; }
.comic-captions[data-loading] svg { animation: comic-captions-pulse 1s ease-in-out infinite; }
.comic-captions[data-failed] { animation: comic-captions-shake .4s; color: #fca5a5; }
.comic-captions:focus-visible { outline: 2px solid var(--dream-accent, #41b4e5); outline-offset: 3px; }
@keyframes comic-captions-spin { to { transform: rotate(360deg); } }
@keyframes comic-captions-pulse { 50% { opacity: .4; } }
@keyframes comic-captions-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .comic-clean-image { transition: none; }
  .comic-captions[data-loading]::after, .comic-captions[data-loading] svg, .comic-captions[data-failed] { animation: none; }
}

/* «Добавить слайд»: окно с карточками стилей того же размера, что на «Новом сне»; уже имеющиеся — серые, с галочкой. См. docs/COMIC_ADD_SLIDE.md */
/* .feed-dialog из feed.css подключается позже и задаёт 390 px — нужна большая специфичность */
.feed-dialog.add-slide-dialog { width: min(800px, calc(100% - 24px)); padding: 24px; border-color: #ffffff1f; border-radius: 24px; background: #0b1220f2; font-family: Manrope, system-ui, sans-serif; }
.add-slide-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.add-slide-dialog .add-slide-dialog__head h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; }
/* Общие правила кнопок .feed-dialog растягивают кнопки — здесь свои размеры */
.add-slide-dialog .add-slide-dialog__close { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #ffffff14; color: #fff; cursor: pointer; }
.add-slide-dialog__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.add-slide-dialog p.add-slide-dialog__cost { margin: 0 0 8px; color: #ffffffcc; font-size: 16px; line-height: 24px; }
.add-slide-dialog__cost::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 4px; vertical-align: -3px; background: url("crystal.png") center / contain no-repeat; }
.add-slide-dialog p.add-slide-dialog__hint { margin: 0 0 8px; color: #ffffff99; font-size: 14px; line-height: 22px; }
.add-slide-dialog__group { min-width: 0; margin-top: 24px; }
.add-slide-dialog .add-slide-dialog__group h3 { margin: 0 0 12px; color: #ffffffcc; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: .02em; }
.add-slide-dialog__group h3 small { margin-left: 6px; color: #ffffff66; font-size: 13px; }
.add-slide-dialog__styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.add-slide-dialog .add-slide-style { position: relative; display: block; flex: none; margin: 0; padding: 0; border: 1px solid #ffffff1a; border-radius: 16px; background: #ffffff08; color: #fff; font: inherit; cursor: pointer; transition: border-color .3s, transform .3s; }
.add-slide-dialog .add-slide-style:disabled { cursor: default; }
.add-slide-style img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 15px; }
.add-slide-style span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 6px; border-radius: 0 0 15px 15px; background: #000000a6; font-size: 14px; line-height: 18px; font-weight: 600; text-align: center; text-wrap: balance; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Плашка «Новый» заходит за край картинки, поэтому у карточки нет overflow: hidden */
.add-slide-style .style-new-badge { position: absolute; z-index: 1; top: -9px; left: 10px; padding: 3px 8px; border-radius: 9999px; background: #fff; color: #0b1020; font-size: 12px; line-height: 16px; font-weight: 700; box-shadow: 0 2px 8px #00000040; pointer-events: none; }
.add-slide-style:hover:not(:disabled) { border-color: #7dd3fc; transform: translateY(-1px); }
.add-slide-style:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.add-slide-style:disabled:not(.is-taken) { opacity: .45; }
.add-slide-style.is-taken { border-color: #7dd3fc80; box-shadow: 0 0 0 1px #7dd3fc80; }
.add-slide-style.is-taken img { filter: grayscale(1) brightness(.6); }
.add-slide-style.is-taken::after { content: ""; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 999px; background: #0ea5e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.add-slide-style[data-busy] { animation: add-slide-pulse 1s ease-in-out infinite; }
@keyframes add-slide-pulse { 50% { opacity: .55; } }
@media (max-width: 640px) {
  .feed-dialog.add-slide-dialog { width: calc(100% - 16px); padding: 20px 16px; border-radius: 20px; }
  /* Как на «Новом сне»: каждая группа — лента карточек по 148 px, листается вбок */
  .add-slide-dialog__styles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 148px; gap: 10px; margin: -8px -16px 0; padding: 10px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .add-slide-dialog__styles::-webkit-scrollbar { display: none; }
  .add-slide-dialog .add-slide-style { scroll-snap-align: start; }
  .add-slide-style span { padding: 6px 4px; font-size: 13px; line-height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .add-slide-style, .add-slide-style[data-busy] { transition: none; animation: none; } }

/* Заглушка стиля, который ещё рисуется: «Рисуем «Кино»» и бегущее троеточие; см. docs/COMIC_PENDING_SLIDES.md */
/* Заголовок сжат по тексту и отцентрирован, точки висят справа вне потока — строка не сдвигается, пока они растут */
.comic-redraw-placeholder[data-pending-dots="true"] .redraw-title { position: relative; width: fit-content; margin-inline: auto; }
.comic-redraw-placeholder[data-pending-dots="true"] .redraw-title::after { content: "..."; position: absolute; left: 100%; bottom: 0; width: 0; overflow: hidden; white-space: nowrap; animation: comic-pending-dots 1.4s steps(4, jump-none) infinite; }
@keyframes comic-pending-dots { to { width: .9em; } }
@media (prefers-reduced-motion: reduce) { .comic-redraw-placeholder[data-pending-dots="true"] .redraw-title::after { width: auto; animation: none; } }

/* Слайд не нарисован (генерация остановлена): вместо сменяющихся картинок — круг с красным свечением и красный крест */
.comic-redraw-placeholder[data-failed-art="true"] .redraw-art { display: none !important; }
.comic-redraw-placeholder[data-failed-art="true"] .redraw-visual::before { content: ""; position: absolute; top: 50%; left: 50%; width: 156px; height: 156px; translate: -50% -50%; border: 1.5px solid #f8717180; border-radius: 50%; background: radial-gradient(circle, #ef444426 0, #ef44440d 55%, transparent 72%); box-shadow: 0 0 48px #ef444440, inset 0 0 28px #ef444433; }
.comic-redraw-placeholder[data-failed-art="true"] .redraw-visual::after { content: ""; position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; translate: -50% -50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f87171' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M18 18 82 82M82 18 18 82'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 10px #ef4444b3); }
.comic-redraw-placeholder[data-failed-art="true"] .redraw-kicker { color: #fca5a5; }
.comic-redraw-placeholder .redraw-retry.redraw-delete { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 28px; padding: 12px 22px 12px 18px; border-color: #f8717166; background: #3b151a99; color: #fecaca; }
.comic-redraw-placeholder .redraw-delete svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.comic-redraw-placeholder .redraw-retry.redraw-delete[hidden] { display: none; }
.comic-redraw-placeholder .redraw-retry.redraw-delete:hover { border-color: #f87171; background: #4c1d22; }
.comic-redraw-placeholder .redraw-retry.redraw-delete:disabled { opacity: .5; cursor: default; }
.comic-redraw-placeholder .redraw-retry.redraw-delete:focus-visible { outline-color: #f87171; }
.comic-redraw-placeholder .redraw-retry.redraw-delete[aria-busy="true"] { cursor: progress; }