/* Волна 8 (0.10), часть a. Классы w8-…; общие стили — styles.css.
   §1 двухшаговая проверка (PIN), §2 обложка профиля, §3 код безопасности, §4 архив статусов, §5 коллаж и стикеры. */

/* ================================================================ §2 обложка профиля */

.w8-cover { position: relative; width: 100%; aspect-ratio: 3 / 1; background: var(--bg-3); overflow: hidden; flex: none; }
.w8-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.w8-cover-wait { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-3), var(--bg-2), var(--bg-3)); }

/* данные контакта: обложка во всю ширину карточки, аватар заходит на её нижний край */
.info-card.hero:has(> .w8-cover) { padding-top: 0; }
.info-card.hero > .w8-cover { width: calc(100% + 36px); margin: 0 -18px 4px; }
.info-card.hero > .w8-cover + .big-avatar { margin-top: -60px; box-shadow: 0 0 0 4px var(--bg); }

/* «Вы»: обложка сверху, под ней аватар, имя, а «о себе» — после имени */
.you-hero:has(> .w8-cover) { padding-top: 0; }
.you-hero > .w8-cover { width: calc(100% + 32px); margin: 0 -16px 4px; order: 0; }
.you-hero:has(> .w8-cover) > .avatar { order: 1; margin-top: -66px; box-shadow: 0 0 0 4px var(--bg); position: relative; }
.you-hero:has(> .w8-cover) > h2, .you-hero:has(> .w8-cover) > small { order: 2; }
.you-hero:has(> .w8-cover) > .you-bubble { order: 3; margin: 8px 0 0; }
.you-hero:has(> .w8-cover) > .you-bubble::after { display: none; }

/* профиль: выбор обложки */
.w8-cover-row .w8-cover { border-radius: 12px; max-width: 420px; }
.w8-cover-row small { color: var(--ink-2); }
.w8-cover-preview { display: block; width: 100%; aspect-ratio: 3 / 1; border-radius: 12px; background: var(--bg-3); }

/* кнопки-контуры со значком в наших окнах: значок слева от подписи */
.w8-sec .outline, .w8-cover-row .outline, .w8-forgot .outline, .w8-twostep .outline, .modal .outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ================================================================ §1 двухшаговая проверка (PIN) */

.w8-pin { text-align: center; letter-spacing: 8px; font-size: 22px; font-variant-numeric: tabular-nums; }
.w8-pin::placeholder { letter-spacing: 6px; font-size: 18px; }
.w8-pin-screen .hint { max-width: 320px; }
.w8-pin-screen .error { max-width: 320px; }
.w8-forgot { width: min(320px, 100%); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; text-align: start; }
.w8-forgot .hint { text-align: start; }
.w8-twostep { max-width: 560px; margin: 0 auto; width: 100%; }
.w8-twostep-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--brand); }
.w8-twostep-hero p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.4; }
.w8-on-row { color: var(--ok); font-weight: 600; background: color-mix(in srgb, var(--ok) 10%, var(--bg)); border-radius: 12px; }
.w8-on-row .ic { color: var(--ok); }
.w8-reset-banner { align-items: center; flex-wrap: wrap; }
.w8-reset-banner .ic { color: var(--danger); }
.danger-btn:hover:not(:disabled) { filter: brightness(1.08); }
.danger-btn:disabled { opacity: .5; }
.primary.danger-btn { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .primary.danger-btn { color: #1a0505; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .primary.danger-btn { color: #1a0505; } }

/* ================================================================ §3 код безопасности */

.w8-sec { max-width: 420px; margin: 0 auto; width: 100%; align-items: stretch; }
.w8-sec-qr { align-self: center; background: #fff; border-radius: 16px; padding: 14px; line-height: 0; box-shadow: 0 1px 6px rgba(16, 32, 56, .14); }
.w8-sec-qr svg { display: block; width: min(220px, 62vw); height: auto; }
.w8-sec-digits { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 19px; letter-spacing: 1px; color: var(--ink); font-variant-numeric: tabular-nums; }
.w8-sec-ok-line { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: 14px; }
.w8-sec-result { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.w8-sec-result.ok { background: color-mix(in srgb, var(--ok) 12%, var(--bg)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.w8-sec-result.bad { background: color-mix(in srgb, var(--danger) 10%, var(--bg)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.w8-sec-result b { font-weight: 700; }
.w8-sec-scan { background: var(--bg-2); border-radius: 14px; padding: 12px; }
.w8-sec-scan .scan-video { max-height: 280px; }
.w8-sec-badge { display: inline-flex; align-items: center; gap: 4px; align-self: center; color: var(--ok); font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--ok) 12%, var(--bg)); border-radius: 999px; padding: 2px 10px; }
.w8-sec-changed { display: flex; align-items: flex-start; gap: 10px; margin: 6px 12px 2px; padding: 10px 12px; border-radius: 12px; font-size: 14px; background: #fff3cd; color: #5c4400; }
.w8-sec-changed .ic { color: #a87400; flex: none; }
:root[data-theme="dark"] .w8-sec-changed { background: #3a3114; color: #f0deb0; }
:root[data-theme="dark"] .w8-sec-changed .ic { color: #e8bb55; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .w8-sec-changed { background: #3a3114; color: #f0deb0; }
  :root:not([data-theme="light"]) .w8-sec-changed .ic { color: #e8bb55; }
}

/* ================================================================ §5 стикеры «Вопрос» и «Добавь своё» */

/* карточка поверх статуса: в просмотре и в окне создания */
.w8-stk-over, .w8-stk-slot { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 104px; z-index: 4; display: flex; justify-content: center; padding: 0 20px; pointer-events: none; }
.w8-stk-over > *, .w8-stk-slot > * { pointer-events: auto; }
.w8-stk-slot { z-index: 3; }
.w8-stk-edit { display: block; max-width: 100%; border-radius: 18px; text-align: start; color: inherit; }
.w8-stk-edit:disabled { cursor: default; }
.w8-stk { width: min(300px, 100%); background: #fff; color: #14181d; border-radius: 18px; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); text-align: start; }
.w8-stk.addyours { background: #fff8e8; }
.w8-stk-head { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #4d5a68; }
.w8-stk-head b { font-weight: 700; }
.w8-stk-text { font-size: 19px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.w8-stk-btn { align-self: stretch; margin-top: 4px; background: #096bb4; color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; text-align: center; }
.w8-stk-btn:hover { filter: brightness(1.08); }
.w8-stk-note { color: #4d5a68 !important; font-size: 12px; }
.w8-answer-q { margin: 0; font-weight: 600; color: var(--ink) !important; overflow-wrap: anywhere; }

/* ответ на «Вопрос» в чате */
.w8-answer { display: flex; flex-direction: column; gap: 4px; min-width: 200px; max-width: 360px; padding: 2px 0; }
.w8-answer-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.w8-answer .w8-answer-q { border-inline-start: 3px solid var(--brand); padding-block: 2px 2px; padding-inline: 8px 0; font-size: 13px; color: var(--ink-2) !important; background: color-mix(in srgb, var(--brand) 7%, transparent); border-start-start-radius: 0; border-start-end-radius: 6px; border-end-end-radius: 6px; border-end-start-radius: 0; }
.w8-answer-a { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ================================================================ §5 коллаж */

.w8-collage { z-index: 72; }
.w8-collage-body { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 4px 14px; align-items: center; justify-content: center; overflow-y: auto; }
.w8-collage-stage { position: relative; height: min(100%, 560px); max-width: 100%; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, .4); }
.w8-cell { position: absolute; overflow: hidden; padding: 0; border-radius: 0; background: #000; outline-offset: -3px; }
.w8-cell img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.w8-cell.on { outline: 3px solid #fff; z-index: 1; }
.w8-collage-side { width: 168px; flex: none; color: #fff; align-items: stretch; }
.w8-collage-side small { color: rgba(255, 255, 255, .8); }
.w8-lay { border: 2px solid rgba(255, 255, 255, .3); border-radius: 8px; padding: 3px; color: rgba(255, 255, 255, .6); display: grid; place-items: center; }
.w8-lay.on { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .12); }
.w8-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); }
.w8-sw.on { border-color: #fff; box-shadow: 0 0 0 2px #0b1520, 0 0 0 4px #fff; }
.w8-collage-hint { font-size: 12px; }
.outline.light { border-color: rgba(255, 255, 255, .5); color: #fff; }
.outline.light:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.outline.light:disabled { opacity: .45; }
@media (max-width: 560px) {
  .w8-collage-body { flex-direction: column; align-items: center; justify-content: flex-start; }
  .w8-collage-stage { height: min(52vh, 440px); }
  .w8-collage-side { width: 100%; max-width: 360px; }
}

/* ================================================================ §4 архив статусов */

.w8-archive { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); }
.w8-archive-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.w8-archive-grid { padding: 0 12px; }
.w8-archive .section-label { padding-inline-start: 4px; }
.w8-arch-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.w8-arch-cell { position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--bg-3); color: #fff; display: grid; place-items: center; }
.w8-arch-cell img, .w8-arch-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w8-arch-cell small { position: absolute; inset-inline-start: 6px; bottom: 4px; font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); z-index: 1; }
.w8-arch-text { padding: 6px; font-size: 12px; font-weight: 600; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow-wrap: break-word; hyphens: auto; }
.w8-arch-play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; background: rgba(0, 0, 0, .18); }
.w8-arch-view { z-index: 75; }
.w8-arch-act { display: inline-flex; align-items: center; gap: 6px; color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .14); flex: none; }
.w8-arch-act:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.w8-arch-act.danger { color: #ffb3b3 !important; }
.w8-arch-act:disabled { opacity: .5; }
.w8-arch-view .w8-stk-over { bottom: 40px; }

/* ================================================================ слои */

/* Окна и подтверждения — выше полноэкранных слоёв статуса (70), коллажа (72) и архива (65–75); сообщение-подсказка — выше окон.
   В основе окна лежали под просмотром статуса (z-index 50 против 70): «Удалить статус» и окна из просмотра были не видны.
   Только пока открыт слой статуса: окно отправки файлов должно оставаться под редактором фото (80), поэтому общий z-index не меняем. */
body:has(.st-viewer, .st-full, .w8-archive, .w8-collage) .modal-bg { z-index: 90; }
body:has(.st-viewer, .st-full, .w8-archive, .w8-collage) .toast { z-index: 95; }