/* ─── Уведомления: колокольчик в шапке, тосты-карточки, центр списком,
   бейджи тап-бара (js/notify.js). Всё анимируемое — transform/opacity (§1);
   squiggle-фильтр только на статике и гаснет под body.light-fx (base.css). ─── */

/* ── правый кластер шапки: счёт · тариф · колокольчик ── */
.hdr-actions{
  display:flex; align-items:center; gap:10px;   /* позиция справа — justify-self:end (сетка шапки) */
  /* единая высота всех трёх карточек (счёт был выше тарифа и колокольчика);
     подложки mountPencil перерисуются под фактический размер сами */
  --hdr-h:38px;
}
.hdr-actions .score,
.hdr-actions .plan-chip,
.hdr-actions .btn-bell{height:var(--hdr-h);}
/* колокольчик — чистая иконка-кнопка без карандашной обводки (перегружала шапку);
   svg по центру, жёлтый бейдж непрочитанных поверх */
.btn-bell{
  position:relative; width:var(--hdr-h, 38px); flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--graphite);
  transition:transform .12s ease;
}
.btn-bell:hover{transform:rotate(-4deg) scale(1.06);}
.btn-bell:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px; border-radius:14px;}
.btn-bell svg{width:20px; height:20px; display:block; position:relative;}

/* жёлтый чип-счётчик — общий для колокольчика и вкладок тап-бара */
.bell-badge, .tab-badge{
  /* колокольчик: бейдж в правом верхнем углу, правым краем к внешнему радиусу
     (там раньше была карандашная обводка); таб-бар переопределяет позицию ниже */
  position:absolute; top:-1px; right:-1px; min-width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  padding:1px 4px 0; box-sizing:border-box;
  font-family:'Caveat',cursive; font-weight:700; font-size:.8rem; line-height:1;
  /* сплошной жёлтый, НЕ полупрозрачный --marker: цифра тонула на фоне
     (в тёмной теме --marker вообще .20) — бейджу нужна читаемость, не хайлайт */
  color:#2C2A26; background:#FFDE59;
  border:1.5px solid #2C2A26; border-radius:7px 9px 8px 7px;
  transform:rotate(6deg); pointer-events:none;
  box-shadow:1.5px 2px 0 rgba(44,42,38,.3);
}
.bell-badge[hidden], .tab-badge[hidden]{display:none;}
.bell-badge.bump, .tab-badge.bump{animation:ntf-bump .3s ease;}
@keyframes ntf-bump{40%{transform:rotate(6deg) scale(1.35);}}

/* бейдж вкладки живёт над иконкой (кнопка .sk-tab — flex-колонка) */
.sk-tab .tab-badge{top:0; right:calc(50% - 24px);}

/* ── тосты ── */
.toasts{
  position:fixed; left:0; right:0; top:10px; z-index:95;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; padding:0 14px;
}
body.in-telegram .toasts{top:calc(10px + var(--safe-top, 0px));}
.toast{
  position:relative; width:100%; max-width:520px; pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px 12px 20px; cursor:pointer;
  background:transparent;                 /* фон рисует skTabbar.mount */
  animation:toast-in .3s ease;
}
.toast.out{animation:toast-out .2s ease forwards;}
@keyframes toast-in{0%{transform:translateY(-14px); opacity:0;}}
@keyframes toast-out{100%{transform:translateY(-10px); opacity:0;}}
/* цветной корешок слева — рукописная полоска; z-index:1 — подложка
   .sk-tabbar-bg (первый ребёнок, absolute) иначе закрашивает её собой */
.toast::before{
  content:""; position:absolute; left:8px; top:11px; bottom:11px; width:5px;
  border-radius:4px; background:var(--ink-blue); filter:url(#squiggle);
  z-index:1;
}
.toast.t-ok::before{background:var(--green);}
.toast.t-error::before{background:var(--red);}
.toast.t-cmt::before{background:var(--ink-blue);}
.toast.t-task::before{background:var(--amber);}
.toast .gi{width:24px; height:24px; flex:none; position:relative;}
.toast .gi svg{width:100%; height:100%; display:block;}
.toast .gi .ava{width:24px; height:24px; font-size:.8rem;}
.toast .tt{
  flex:1; min-width:0; font-size:.95rem; line-height:1.3;
  color:var(--graphite); position:relative;
  display:flex; flex-direction:column;
}
.toast .tt b{
  font-family:'Caveat',cursive; font-size:1.2rem; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.toast .tt span{
  color:var(--graphite-soft);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.toast .act{
  position:relative; z-index:1; flex:none; font-family:inherit; font-size:.9rem;
  color:var(--graphite); background:none; cursor:pointer;
  border:1.6px solid var(--pencil); border-radius:var(--r-pill);
  padding:5px 12px 4px;
}
.toast .act:hover{border-color:var(--graphite);}

/* ── центр уведомлений ── */
.ntf-frame{width:min(440px, 94vw);}
.ntf-readall{
  position:absolute; top:16px; right:52px;
  font-family:inherit; font-size:.85rem; color:var(--pencil);
  background:none; border:1.4px dashed var(--pencil); border-radius:var(--r-pill);
  padding:4px 11px 3px; cursor:pointer;
}
.ntf-readall:hover{color:var(--graphite); border-color:var(--graphite);}
.ntf-list{max-height:60vh; overflow-y:auto; margin-top:10px;}
.ntf-row{
  display:flex; gap:10px; align-items:flex-start; padding:12px 4px;
}
.ntf-row.tap{cursor:pointer;}
.ntf-row + .ntf-row{
  background-image:repeating-linear-gradient(90deg, var(--pencil-faint) 0 7px, transparent 7px 13px);
  background-size:100% 1.5px; background-repeat:no-repeat;
}
.ntf-row .ndot{
  width:8px; height:8px; flex:none; margin-top:8px;
  background:var(--amber); border-radius:50% 46% 54% 50%;
}
.ntf-row.read .ndot{visibility:hidden;}
.ntf-row .gi{width:24px; height:24px; flex:none; margin-top:1px;}
.ntf-row .gi svg{width:100%; height:100%; display:block;}
.ntf-row .gi .ava{width:24px; height:24px; font-size:.8rem;}
.ntf-row .col{flex:1; min-width:0;}
.ntf-row .t1{font-size:.98rem; line-height:1.35; color:var(--graphite); display:block; overflow-wrap:anywhere;}
.ntf-row .t1 b{font-weight:700;}
.ntf-row.read .t1{color:var(--pencil);}
.ntf-row .t2{font-size:.8rem; color:var(--pencil); margin-top:2px; display:block;}
.ntf-empty{padding:26px 8px 16px; color:var(--pencil); text-align:center;}

/* ── дата на доске (шапка «Задачи») ── inline и в line-height подзаголовка,
   иначе строка выше календарной и чипы прыгают при переключении вкладок */
.board-date{
  display:inline-block; height:1em; line-height:1em; overflow:visible;
  vertical-align:baseline; margin-left:10px;
  font-family:'Caveat',cursive; font-size:1.05rem;
  color:var(--pencil);
}

/* карандаш-росчерк ✎ (подзаголовок «Задач», подсказки, пустые состояния) —
   чисто декоративный, но на десктопе читался как кликабельная иконка, поэтому
   прячем ВЕЗДЕ. Спан-разметку оставляем — вернуть легко. */
.board-pen{display:none;}

@media (max-width:639px){
  .hdr-actions{gap:6px; --hdr-h:34px;}
  .btn-bell svg{width:18px; height:18px;}
  .toast .tt b{font-size:1.1rem;}
  /* дату «<день недели>, <число месяц>» прячем на телефоне — шапка «Задач»
     чище (на десктопе остаётся). Для TG-мини-аппа — правило ниже. */
  .board-date{display:none;}
}

/* Telegram-мини-апп (любой размер вьюпорта, включая desktop-клиент) — тоже без
   даты в подзаголовке «Задач». */
body.in-telegram .board-date{display:none;}

@media (prefers-reduced-motion: reduce){
  .toast, .toast.out{animation:none;}
  .bell-badge.bump, .tab-badge.bump{animation:none;}
  .btn-bell{transition:none;}
}

/* ── баннер «вам передали задачи» (js/handoff.js): док над тап-баром,
   въезд/выезд только transform/opacity (§1). Фон рисует mountPencil. ── */
.hf-banner{
  position:fixed; left:12px; right:12px;
  bottom:calc(14px + var(--tabbar-h, 64px) + var(--safe-b, 0px));
  display:flex; justify-content:center;
  z-index:70;                 /* над композером (60), под тостами (95) */
  pointer-events:none;
}
/* на «Задачах» в этой зоне живёт композер-док — баннер встаёт над ним
   (тот же приём, что у маскота, composer.css) */
body[data-view="board"] .hf-banner{
  bottom:calc(124px + var(--tabbar-h, 64px) + var(--safe-b, 0px));
}
/* телефон: композер выше (перенос подсказки) — баннер ещё на этаж выше */
@media (max-width:639px){
  body[data-view="board"] .hf-banner{
    bottom:calc(172px + var(--tabbar-h, 64px) + var(--safe-b, 0px));
  }
}
.hf-in{
  pointer-events:auto; position:relative;
  display:flex; align-items:center; gap:10px;
  width:100%; max-width:520px; padding:10px 12px 10px 14px;
  transform:translateY(150%); opacity:0;
  transition:transform .28s cubic-bezier(.3,1.2,.4,1), opacity .2s ease;
}
.hf-banner.show .hf-in{transform:none; opacity:1;}
.hf-in > *{position:relative;}
.hf-ico{font-size:1.35rem; line-height:1;}
.hf-tx{flex:1; min-width:0; font-size:.98rem; color:var(--graphite);}
.hf-go{
  font-family:'Neucha',cursive; font-size:.95rem; cursor:pointer;
  background:var(--graphite); color:var(--paper);
  border:none; border-radius:var(--r-pill); padding:7px 15px; white-space:nowrap;
}
.hf-later{
  width:32px; height:32px; flex:none; display:grid; place-items:center;
  background:none; border:none; cursor:pointer; font-size:1rem;
  color:var(--graphite-soft);
}
@media (prefers-reduced-motion: reduce){
  .hf-in{transition:none;}
}