/* Карма — общий вид для chats.html (чужая карма + голосование) и settings.html (своя).
   Стекло — классы .lg-glass / .lg-glass-sheet из lg-glass.css. Анимации только transform/opacity
   (видеокарта), длительности короткие; prefers-reduced-motion выключает всё лишнее. */

.karma-card {
    margin: 0 0 20px; padding: 13px 14px 12px; border-radius: 20px;
    overflow: hidden; isolation: isolate;
    animation: karmaIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes karmaIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

/* мягкое цветное свечение за шкалой — цвет уровня кармы */
.karma-card::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    width: 220px; height: 220px; left: -60px; top: -110px; border-radius: 50%;
    background: radial-gradient(closest-side, var(--karma-glow, rgba(120,120,128,0.18)), transparent);
    transition: background 0.8s ease;
}

.karma-head { display: flex; align-items: center; gap: 12px; }
.karma-gauge { position: relative; width: 92px; height: 56px; flex-shrink: 0; }
.karma-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.karma-gauge-track { stroke: rgba(120,120,128,0.16); }
.karma-gauge-fill { transition: stroke-dashoffset 1.15s cubic-bezier(0.22, 1, 0.36, 1); }
.karma-gauge-knob {
    transform-box: view-box; transform-origin: 58px 58px;
    transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.karma-gauge-knob circle { fill: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
.karma-gauge-score {
    position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
    font-size: 20px; font-weight: 800; letter-spacing: -0.5px; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.karma-head-text { flex: 1; min-width: 0; }
.karma-kicker {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--tg-theme-hint-color, #8a8a8e);
}
.karma-level { font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px; margin-top: 2px; transition: color 0.5s; }
.karma-sub { font-size: 12px; color: var(--tg-theme-hint-color, #8a8a8e); margin-top: 2px; line-height: 1.35; }

/* полоса распределения: доли реакций по шкале, вырастают слева направо */
.karma-bar {
    display: flex; gap: 2px; height: 5px; margin: 11px 0 10px; border-radius: 3px; overflow: hidden;
    background: rgba(120,120,128,0.14);
}
.karma-bar span { height: 100%; width: 0; border-radius: 3px; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }

.karma-chips { display: flex; gap: 6px; }
.karma-chip {
    flex: 1; min-width: 0; position: relative;
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 0; border-radius: 13px; border: none;
    background: rgba(120,120,128,0.09); color: inherit;
    animation: karmaChipIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: background 0.3s, box-shadow 0.3s;
}
.karma-chip:nth-child(2) { animation-delay: 0.04s; }
.karma-chip:nth-child(3) { animation-delay: 0.08s; }
.karma-chip:nth-child(4) { animation-delay: 0.12s; }
.karma-chip:nth-child(5) { animation-delay: 0.16s; }
@keyframes karmaChipIn { from { opacity: 0; transform: translateY(8px) scale(0.85); } }
.karma-chip.zero .karma-emoji { opacity: 0.4; filter: grayscale(0.5); }
.karma-chip.zero .karma-chip-count { opacity: 0.45; }
.karma-chip.mine { background: var(--chip-tint); box-shadow: inset 0 0 0 1.5px var(--chip-color); }
.karma-chip.mine::after {
    content: ''; position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%;
    background: var(--chip-color);
}
.karma-chip-count { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.karma-chip.bump { animation: karmaBump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes karmaBump { 30% { transform: scale(1.22); } 60% { transform: scale(0.94); } }

.karma-emoji {
    width: 24px; height: 24px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 19px; line-height: 1;
}
.karma-emoji > svg, .karma-emoji > video, .karma-emoji > img { width: 100% !important; height: 100% !important; display: block; }

.karma-actions { display: flex; gap: 8px; margin-top: 10px; }
.karma-btn {
    flex: 1; min-height: 40px; padding: 0 16px; border-radius: 20px; border: none;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 14.5px; font-weight: 700; color: var(--tg-theme-text-color, #000);
    background: rgba(120,120,128,0.13); cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s;
}
.karma-btn:active { transform: scale(0.97); opacity: 0.85; }
.karma-btn.primary {
    color: #fff; background: var(--accent-gradient, linear-gradient(135deg, #4f97fb, #865cfd));
}
.karma-btn.loading { opacity: 0.55; pointer-events: none; }
.karma-btn .karma-emoji { width: 20px; height: 20px; font-size: 16px; }
.karma-note {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 10px; font-size: 12px; color: var(--tg-theme-hint-color, #8a8a8e); text-align: center;
}

/* ─── Карма: шторки (оценка в chats.html, очистка в settings.html). Шторка — сосед оверлея, а не его потомок
   (backdrop-filter оверлея сделал бы его containing block для fixed),
   top выставляется из JS по window.innerHeight — как у попапов выше. ─── */
.karma-sheet-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10010;
    background: rgba(0,0,0,0.32);
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.karma-sheet-overlay.show { opacity: 1; visibility: visible; }
.karma-sheet {
    position: fixed; z-index: 10011; left: 8px; right: 8px; top: 100%;
    max-width: 464px; margin: 0 auto; box-sizing: border-box;
    border-radius: 34px; padding: 6px 18px 20px;
    transform: translateY(calc(100% + 48px)); visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.32,0.72,0,1), visibility 0s linear 0.5s;
}
.karma-sheet.show {
    transform: none; visibility: visible;
    transition: transform 0.5s cubic-bezier(0.32,0.72,0,1), visibility 0s;
}
.karma-sheet-grip { display: grid; place-items: center; padding: 4px 0 10px; }
.karma-sheet-grip span { width: 36px; height: 5px; border-radius: 3px; background: rgba(120,120,128,0.3); }
.karma-sheet-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; text-align: center; }
.karma-sheet-sub { font-size: 13px; color: var(--tg-theme-hint-color,#8a8a8e); text-align: center; margin-top: 4px; line-height: 1.35; }

.karma-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 18px 0 8px; }
.karma-opt {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
    padding: 12px 0 10px; border-radius: 20px; border: none; color: inherit; cursor: pointer;
    background: rgba(120,120,128,0.1);
    animation: karmaChipIn 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s, background 0.25s, box-shadow 0.3s;
}
.karma-opt:nth-child(2) { animation-delay: 0.04s; }
.karma-opt:nth-child(3) { animation-delay: 0.08s; }
.karma-opt:nth-child(4) { animation-delay: 0.12s; }
.karma-opt:nth-child(5) { animation-delay: 0.16s; }
.karma-opt .karma-emoji { width: 44px; height: 44px; font-size: 34px; }
.karma-opt-label { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; }
.karma-scale.has-pick .karma-opt:not(.picked) { opacity: 0.38; transform: scale(0.9); }
.karma-opt.picked {
    transform: translateY(-5px) scale(1.07);
    background: var(--opt-tint); box-shadow: inset 0 0 0 1.5px var(--opt-color);
}
.karma-opt.current::after {
    content: ''; display: block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--opt-color); margin-top: -2px;
}
.karma-legend {
    display: flex; justify-content: space-between; padding: 0 8px;
    font-size: 11px; font-weight: 600; color: var(--tg-theme-hint-color,#8a8a8e);
}
.karma-legend span:first-child { color: #34c759; }
.karma-legend span:last-child { color: #ff3b30; }

/* Защита от мисклика: голос ставится только УДЕРЖАНИЕМ кнопки — заливка
   бежит слева направо, отпустил раньше — откатилась, ничего не отправлено. */
.karma-hold {
    position: relative; overflow: hidden; width: 100%; height: 54px; margin-top: 18px;
    border: none; border-radius: 27px; cursor: pointer;
    background: rgba(120,120,128,0.16); color: var(--tg-theme-hint-color,#8a8a8e);
    font-size: 15.5px; font-weight: 700;
    -webkit-user-select: none; user-select: none; touch-action: none; -webkit-touch-callout: none;
    transition: background 0.35s, color 0.35s, box-shadow 0.35s, transform 0.2s cubic-bezier(0.32,0.72,0,1);
}
.karma-hold:active { transform: none; }
.karma-hold.armed { background: var(--hold-color); color: #fff; }
.karma-hold.holding { transform: scale(0.97); }
.karma-hold-fill {
    position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
    background: rgba(255,255,255,0.3); transition: transform 0.25s ease-out;
}
.karma-hold.holding .karma-hold-fill { transform: scaleX(1); transition: transform var(--hold-ms, 700ms) linear; }
.karma-hold-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.karma-hold-label .karma-emoji { width: 24px; height: 24px; font-size: 19px; }
.karma-hold.shake { animation: karmaShake 0.35s; }
@keyframes karmaShake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.karma-sheet-link {
    display: block; margin: 12px auto 0; padding: 6px 10px; border: none; background: none;
    font-size: 14px; font-weight: 600; color: var(--tg-theme-hint-color,#8a8a8e); cursor: pointer;
}
.karma-sheet-link.danger { color: #ff3b30; }
.karma-sheet-note { font-size: 12.5px; text-align: center; color: var(--tg-theme-hint-color,#8a8a8e); margin-top: 10px; line-height: 1.4; }

/* Почему нельзя оценить — честно и с прогрессом переписки. */
.karma-locked { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 6px 4px; }
.karma-locked-icon {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 28px;
    background: rgba(120,120,128,0.12); margin-bottom: 12px;
    animation: karmaFloat 3.2s ease-in-out infinite;
}
.karma-locked-text { font-size: 14px; line-height: 1.45; max-width: 300px; }
.karma-progress { width: 100%; max-width: 300px; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.karma-progress-row { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.karma-progress-row > span:first-child { width: 96px; text-align: left; color: var(--tg-theme-hint-color,#8a8a8e); }
.karma-progress-track { flex: 1; height: 8px; border-radius: 4px; background: rgba(120,120,128,0.16); overflow: hidden; }
.karma-progress-fill { height: 100%; width: 0; border-radius: 4px; background: var(--accent-gradient); transition: width 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s; }
.karma-progress-row > span:last-child { width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* «Голос учтён · Отменить» — пока идут 15 минут на исправление мисклика. */
.karma-undo {
    position: fixed; z-index: 10040; left: 50%; bottom: calc(18px + var(--app-safe-bottom, 0px));
    display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 999px;
    font-size: 14.5px; font-weight: 600; white-space: nowrap;
    transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.32,0.72,0,1), opacity 0.3s;
}
.karma-undo.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.karma-undo button {
    border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer;
    background: rgba(120,120,128,0.16); color: var(--accent-start,#4f97fb); font-size: 14px; font-weight: 700;
}

@keyframes karmaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── компактная карточка (своя карма в settings.html) ── */
.karma-card.compact { padding: 11px 12px 4px; }
.karma-card.compact .karma-head { gap: 10px; }
.karma-card.compact .karma-gauge { width: 70px; height: 43px; }
.karma-card.compact .karma-gauge-score { font-size: 15.5px; }
.karma-card.compact .karma-level { font-size: 14.5px; }
.karma-card.compact .karma-sub { font-size: 11.5px; }
.karma-card.compact .karma-bar { height: 4px; margin: 9px 0 8px; }
.karma-card.compact .karma-chip { padding: 4px 0; border-radius: 11px; gap: 3px; }
.karma-card.compact .karma-emoji { width: 19px; height: 19px; font-size: 15px; }
.karma-card.compact .karma-chip-count { font-size: 12px; }

/* пункты-строки внутри карточки, как списки в настройках iOS */
.karma-rows { margin: 8px -12px 0; border-top: 0.5px solid var(--glass-border, rgba(0,0,0,0.09)); }
.karma-row {
    display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
    padding: 10px 14px; border: none; background: none; color: inherit; cursor: pointer;
    font-size: 14.5px; font-weight: 500; letter-spacing: -0.1px; text-align: left;
    transition: background 0.15s;
}
button.karma-row:active { background: rgba(120,120,128,0.1); }
.karma-row + .karma-row { border-top: 0.5px solid var(--glass-border, rgba(0,0,0,0.09)); }
.karma-row-title { flex: 1; min-width: 0; }
.karma-row-end { display: flex; align-items: center; gap: 8px; color: var(--tg-theme-hint-color, #8a8a8e); font-size: 13px; }
.karma-row-chevron {
    width: 7px; height: 7px; flex-shrink: 0;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.karma-row.muted .karma-row-title { color: var(--tg-theme-hint-color, #8a8a8e); }
.karma-free-badge {
    font-size: 11px; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: 999px;
    background: #34c759;
}

/* ── разлёт частиц после голоса ── */
.karma-particle {
    position: fixed; z-index: 10070; width: 7px; height: 7px; border-radius: 50%; pointer-events: none;
    animation: karmaParticle 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes karmaParticle {
    from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}
/* эмодзи «перелетает» из шторки в карточку */
.karma-fly {
    position: fixed; z-index: 10065; pointer-events: none; width: 44px; height: 44px; font-size: 36px;
    transition: transform 0.7s cubic-bezier(0.5, -0.35, 0.3, 1.25), opacity 0.25s ease 0.55s;
}

/* ── заглушки PRIME: «пыль» мерцающих точек поверх скрытого значения (как спойлеры в Сохранённых чатах) ── */
.spoiler-val {
    position: relative; display: inline-block; vertical-align: middle; overflow: hidden;
    min-width: 46px; padding: 1px 4px; text-align: center;
    border-radius: 6px; cursor: pointer; color: var(--tg-theme-hint-color, #8a8a8e);
}
.spoiler-val .spoiler-fake { opacity: 0; }
.spoiler-dots { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.spoiler-dot {
    position: absolute; border-radius: 50%; background: currentColor; opacity: 0;
    animation: spoilerDotTwinkle ease-in-out infinite;
}
@keyframes spoilerDotTwinkle {
    0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
    45% { opacity: 1; transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.6); }
}
.prime-pill {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; color: #fff;
    padding: 3px 8px; border-radius: 999px;
    background: linear-gradient(100deg, #4f97fb 0%, #865cfd 24%, #ff6b9d 42%, #ffffff 50%, #ff6b9d 58%, #865cfd 76%, #4f97fb 100%);
    background-size: 260% 100%;
    animation: primePillShimmer 3.6s ease-in-out infinite;
}
@keyframes primePillShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
    .karma-card, .karma-chip, .karma-chip.bump, .spoiler-dot, .prime-pill { animation: none !important; }
    .karma-gauge-fill, .karma-gauge-knob, .karma-bar span { transition: none !important; }
}