/* Карточка «новые песни — узнавай раньше всех» на экране песни (public/push-ask.js, 23.10.2026).
   Мягкая карточка внизу, не окно поверх всего: экран за ней живёт, клип играет, строки видны.
   Материал — как у приглашения в конце клипа (.ls-end-cta в learn.html): та же бумага и кромка.
   Кнопки — одной строкой во всю ширину под текстом, Сухён мелко: карточка не съедает пол-экрана на 320 px. */
.pa-card{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:61;
  box-sizing:border-box;width:min(460px,calc(100vw - 24px));
  display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,222,200,.95));
  border:1px solid rgba(194,134,90,.5);
  box-shadow:inset 0 1px 0 #fff,0 10px 28px rgba(23,32,56,.22);
  color:var(--ink,#171B26);
  opacity:0;transform:translate(-50%,16px);pointer-events:none;
  transition:opacity var(--d-base,220ms) var(--ease,ease),transform var(--d-base,220ms) var(--ease,ease)}
.pa-card.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pa-top{display:flex;align-items:flex-start;gap:10px}
.pa-ic{flex:0 0 auto;width:40px;height:40px;object-fit:contain}
.pa-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.pa-txt b{font-size:14px;line-height:1.3;font-weight:700;overflow-wrap:anywhere}
.pa-txt span{font-size:13px;line-height:1.35;color:var(--mut,#4E5766)}
.pa-msg{font-size:12.5px;line-height:1.35;color:var(--mut,#4E5766)}
.pa-msg:empty{display:none}
.pa-ok .pa-msg{color:#1F7A4D;font-weight:600}
.pa-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pa-acts button{min-height:44px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.pa-on{flex:1 1 auto;padding:0 14px;border:0;background:linear-gradient(180deg,#F3D9AC,#E3A492);color:#171018}
.pa-on:disabled{opacity:.6;cursor:default}
/* «Не сейчас» — тихая кнопка без рамки: действие второго ряда важности, но палец попадает (44 px). */
.pa-no{flex:0 0 auto;padding:0 10px;border:0;background:transparent;color:var(--mut,#4E5766);font-weight:600}
.pa-acts button:active{transform:scale(.97)}
.pa-acts button:focus-visible{outline:2px solid #6C46D8;outline-offset:2px}
html[data-theme="dark"] .pa-card{border-color:rgba(243,217,172,.40);
  background:linear-gradient(180deg,rgba(48,36,66,.98),rgba(30,22,41,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 28px rgba(0,0,0,.55)}
html[data-theme="dark"] .pa-txt span,html[data-theme="dark"] .pa-msg,html[data-theme="dark"] .pa-no{color:var(--mut,#B9B2C8)}
html[data-theme="dark"] .pa-ok .pa-msg{color:#7FD9A8}
/* 320–360 px: колокольчик убираем, чтобы «Включить уведомления» и «Не сейчас» встали в одну строку. */
@media (max-width:360px){.pa-acts button{font-size:13px}.pa-on{padding:0 10px}.pa-no{padding:0 8px}.pa-bell{display:none}}
@media (prefers-reduced-motion:reduce){.pa-card{transition:opacity var(--d-base,220ms) linear;transform:translate(-50%,0)}}