/* inbox.css — 5.5: лента «🔔 События» (inbox.js): колокольчик в строке главной, окно со списком, всплывашка сверху */

/* ---------- колокольчик (кнопка как «Задания»; число — .q-badge из quests.css) ---------- */
#main-tab .home-ico--inbox{ color: #ffd35a; position: relative; }
#main-tab .home-ico--inbox svg{ width: 23px; height: 23px; display: block; }
#main-tab .home-ico--inbox.has-new svg{ animation: inb-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes inb-ring{ 0%,70%,100%{ transform: rotate(0); } 75%{ transform: rotate(-14deg); } 82%{ transform: rotate(12deg); } 89%{ transform: rotate(-6deg); } 95%{ transform: rotate(3deg); } }
body.less-motion #main-tab .home-ico--inbox svg{ animation: none; }

/* ---------- окно ---------- */
/* 5.5: высота окна постоянная — при смене вкладки и пустом списке не прыгает, прокручивается только список */
.inb-sheet{ position: fixed; inset: 0; z-index: 2147483300; display: flex; align-items: flex-end; justify-content: center; background: rgba(5,8,20,.6);
  padding: calc(var(--pf-safe-top, 0px) + 40px) 0 0; animation: inb-fade .18s ease; }
@keyframes inb-fade{ from{ opacity: 0; } }
.inb-card{ position: relative; width: 100%; max-width: 480px; height: min(100%, 720px); display: flex; flex-direction: column; border-radius: 24px 24px 0 0; background: #1c243e; color: #fff;
  box-shadow: 0 -10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); animation: inb-up .22s cubic-bezier(.2,.8,.3,1.1); }
@keyframes inb-up{ from{ transform: translateY(40px); opacity: .4; } }
.inb-h{ display: flex; align-items: center; gap: 8px; padding: 14px 12px 8px 16px; }
.inb-h h3{ flex: 1; margin: 0; font-size: 18px; font-weight: 900; }
.inb-read{ border: 0; background: none; color: #93c5fd; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 6px; }
.inb-x{ width: 32px; height: 32px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #cfd3ea; font: inherit; font-weight: 900; cursor: pointer; }
.inb-tabs{ display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; }
.inb-tabs::-webkit-scrollbar{ display: none; }
.inb-tabs button{ flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.07); color: #cfd3ea; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.inb-tabs button.is-on{ background: #fff; color: #1c243e; }
.inb-list{ flex: 1 1 auto; min-height: 120px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 12px calc(16px + var(--pf-safe-bottom, 0px)); }
.inb-grp{ margin: 10px 4px 6px; color: #9aa3c7; font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.inb-empty{ margin: 30px 10px; text-align: center; color: #9aa3c7; font-size: 13px; font-weight: 700; }
.inb-load{ width: 28px; height: 28px; margin: 40px auto; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: #93c5fd; animation: inb-spin .8s linear infinite; }
@keyframes inb-spin{ to{ transform: rotate(360deg); } }

/* ---------- строка события (и во всплывашке) ---------- */
.inb-ev{ position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 7px; border-radius: 16px; background: #232c4b; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.inb-ev.is-new::before{ content: ""; position: absolute; left: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #ef4444; }
.inb-ev.is-alarm{ background: linear-gradient(135deg, rgba(220,38,38,.6), rgba(127,29,29,.6)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.inb-ev.is-gift{ background: linear-gradient(135deg, rgba(234,179,8,.25), rgba(35,44,75,1) 70%); box-shadow: inset 0 0 0 1px rgba(255,211,90,.3); }
.inb-pic{ position: relative; flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: rgba(255,255,255,.08); }
.inb-pic img{ width: 36px; height: 36px; object-fit: contain; }
.inb-pic i{ position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: #0b0f24; box-shadow: 0 0 0 2px #232c4b; }
.inb-tx{ flex: 1; min-width: 0; }
.inb-tx em{ font-style: normal; color: #ffd35a; }
.inb-tx small{ display: block; margin-top: 2px; color: #9aa3c7; font-size: 11.5px; font-weight: 700; }
.inb-ev.is-alarm .inb-tx small{ color: rgba(255,255,255,.85); }
.inb-tm{ display: inline-block; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.3); color: #fde68a; font-variant-numeric: tabular-nums; }
.inb-b{ flex: none; height: 32px; padding: 0 11px; border: 0; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 900; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.inb-b:active{ transform: scale(.96); }
.inb-b:disabled{ opacity: .55; cursor: default; }
.b-red{ background: #ef4444; color: #fff; } .b-pink{ background: #ec4899; color: #fff; } .b-blue{ background: #3b82f6; color: #fff; }
.b-ghost{ background: rgba(255,255,255,.09); color: #cfd3ea; } .b-gold{ background: #ffd35a; color: #3b2a00; } .b-white{ background: #fff; color: #7f1d1d; }

/* ---------- всплывашка ---------- */
.inb-toast{ position: fixed; left: 50%; top: calc(var(--pf-safe-top, 0px) + 10px); z-index: 2147483200; width: min(460px, calc(100% - 20px)); transform: translateX(-50%);
  animation: inb-drop .3s cubic-bezier(.2,.8,.3,1.2); cursor: pointer; }
.inb-toast .inb-ev{ margin: 0; box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
.inb-toast .inb-ev:not(.is-alarm):not(.is-gift){ background: rgba(28,36,62,.97); }
.inb-toast .inb-ev.is-new::before{ display: none; }
.inb-toast.is-out{ transition: transform .25s, opacity .25s; transform: translate(-50%, -30px); opacity: 0; }
@keyframes inb-drop{ from{ transform: translate(-50%, -40px); opacity: 0; } }

/* ---------- 5.5: смахнуть влево → «Удалить» (inbox.js → swipeInit) ---------- */
.inb-sw{ position: relative; margin-bottom: 7px; border-radius: 16px; overflow: hidden; }
.inb-sw > .inb-ev{ margin-bottom: 0; touch-action: pan-y; will-change: transform; }
.inb-sw.is-gone{ transition: height .24s ease, opacity .2s ease; opacity: 0; }
.inb-del{ position: absolute; top: 0; right: 0; bottom: 0; width: 92px; border: 0; border-radius: 16px; background: #ef4444; color: #fff; font: inherit; font-size: 18px; font-weight: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; opacity: 0; transition: width .18s ease, opacity .12s; }
.inb-del span{ font-size: 11.5px; }
.inb-sw.is-open .inb-del, .inb-sw:has(> .inb-ev[style*="translateX"]) .inb-del{ opacity: 1; }
.inb-sw.is-far .inb-del{ width: 100%; }
.inb-clr{ color: #fca5a5; }

/* 5.5: «Настроить защиту» в строке события — ссылкой */
.inb-lnk{ color:#7cc4ff; font-weight:800; text-decoration:none; }