/* ==========================================================================
   notifications.css: bell badge, panel, rows, toasts, list and preference pages.

   Self-contained like core/css/sidebar_toybox.css: Toy Box tokens are
   re-declared with a --tb- prefix and scoped to the notification chrome, so
   nothing leaks into the clay/material pages. Loaded by base.html.
   ========================================================================== */

.notif-ui,
.flash-toasts,
.notif-badge{
  --tb-violet:      oklch(58% 0.19 300);
  --tb-violet-deep: oklch(46% 0.17 300);
  --tb-rose:        oklch(64% 0.2 10);
  --tb-tang:        oklch(72% 0.17 55);
  --tb-card:        oklch(99.5% 0.002 300);
  --tb-ink:         oklch(23% 0.03 300);
  --tb-soft:        oklch(45% 0.025 300);
  --tb-hover:       oklch(95% 0.02 300);
  --tb-unread:      oklch(97% 0.025 300);
  --tb-fill-soft:   oklch(93% 0.035 300);
  --tb-border:      oklch(90% 0.025 300);
  --tb-r-md: 18px; --tb-r-sm: 12px;
  --tb-lift: 0 2px 4px rgb(40 20 80 / .06), 0 12px 28px -8px rgb(40 20 80 / .16),
             0 32px 64px -24px rgb(40 20 80 / .22);
  --tb-ring: 0 0 0 3px oklch(58% 0.19 300 / .30);
  --tb-dur: .15s;
}
.dark .notif-ui,
.dark .flash-toasts,
.dark .notif-badge{
  --tb-violet-deep: oklch(80% 0.13 300);
  --tb-card:     oklch(25.5% 0.026 300);
  --tb-ink:      oklch(95% 0.008 300);
  --tb-soft:     oklch(72% 0.02 300);
  --tb-hover:    oklch(31% 0.028 300);
  --tb-unread:   oklch(29% 0.04 300);
  --tb-fill-soft:oklch(34% 0.05 300);
  --tb-border:   oklch(38% 0.02 300);
  --tb-lift: 0 2px 4px rgb(0 0 0 / .35), 0 12px 28px -8px rgb(0 0 0 / .55);
}

/* --- Unread badge (sidebar bell + mobile top-bar bell) ----------------------------- */
.notif-count:empty{display:none}
.notif-badge{
  position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--tb-rose);color:#fff;font-size:11px;font-weight:800;line-height:18px;
  text-align:center;box-shadow:0 0 0 2px var(--tb-card);pointer-events:none;
}

/* --- Panel (fixed beside the sidebar; a sheet on small screens) ----------- */
.notif-panel{
  position:fixed;z-index:60;top:.75rem;inset-inline-start:calc(260px + .75rem);
  width:min(380px,calc(100vw - 1.5rem));max-height:min(560px,calc(100vh - 1.5rem));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--tb-card);color:var(--tb-ink);border:1px solid var(--tb-border);
  border-radius:var(--tb-r-md);box-shadow:var(--tb-lift);
}
.notif-panel.is-collapsed{inset-inline-start:calc(72px + .75rem)}
/* Inserted on open (x-if in shell.html): fade in from its first frame. */
.notif-panel{transition:opacity .15s ease-out}
@starting-style{.notif-panel{opacity:0}}
@media (max-width:1023.98px){
  .notif-panel,.notif-panel.is-collapsed{inset-inline:.75rem;top:4.5rem;width:auto}
}
#notif-panel-body{display:flex;flex-direction:column;min-height:0}
.notif-panel__head,.notif-panel__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.8rem 1rem;flex-shrink:0;
}
.notif-panel__head{border-bottom:1px solid var(--tb-border)}
.notif-panel__head b{font-size:1rem;font-weight:800;margin-inline-end:auto}
.notif-sound{
  display:grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:var(--tb-r-sm);cursor:pointer;
  background:none;color:var(--tb-soft);
}
.notif-sound:hover{background:var(--tb-hover);color:var(--tb-ink)}
.notif-sound:focus-visible{outline:none;box-shadow:var(--tb-ring)}
.notif-sound .material-symbols-outlined{font-size:1.15rem}
.notif-sound .notif-sound__off,.notif-sound[data-telo-sound-state="off"] .notif-sound__on{display:none}
.notif-sound[data-telo-sound-state="off"] .notif-sound__off{display:block}
.notif-panel__foot{border-top:1px solid var(--tb-border)}
.notif-panel__list{overflow-y:auto;min-height:0;padding:.35rem}

.notif-link{
  display:inline-flex;align-items:center;gap:.3em;border:0;background:none;cursor:pointer;padding:.3em .5em;
  border-radius:var(--tb-r-sm);font-size:.85rem;font-weight:700;color:var(--tb-violet-deep);text-decoration:none;
}
.notif-link .material-symbols-outlined{font-size:1.1em}
.notif-link:hover{background:var(--tb-hover)}
.notif-link:focus-visible{outline:none;box-shadow:var(--tb-ring)}

/* --- Web Push soft ask (dropdown) + device row (preferences); telo-push.js ---- */
.notif-push-ask{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.35rem .7rem;flex-shrink:0;
  margin:.5rem .5rem 0;padding:.7rem .8rem;border-radius:var(--tb-r-sm);background:var(--tb-hover);
}
.notif-push-ask[hidden]{display:none}
.notif-push-ask p{margin:0;font-size:.85rem;font-weight:600;line-height:1.35}
.notif-push-ask__ico{color:var(--tb-violet-deep)}
.notif-push-ask__actions{grid-column:2;display:flex;align-items:center;gap:.35rem}
.notif-push-btn{
  display:inline-flex;align-items:center;gap:.35em;border:0;cursor:pointer;padding:.4em .85em;
  border-radius:999px;background:var(--tb-violet);color:#fff;font:inherit;font-size:.82rem;font-weight:800;
}
.notif-push-btn:hover{filter:brightness(1.08)}
.notif-push-btn:focus-visible{outline:none;box-shadow:var(--tb-ring)}
.notif-push-btn:disabled{opacity:.6;cursor:progress}
/* The same ask, shown by itself after sign-in as the first card in the toast stack. */
.notif-push-float[hidden]{display:none}
.notif-push-float .notif-push-ask__actions{margin-top:.45rem}
.notif-device{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:1rem;margin-bottom:1rem}
.notif-device__text{flex:1 1 16rem;min-width:0}
.notif-device__text b{display:block}
.notif-device__text small{color:var(--tb-soft)}
.notif-device [hidden]{display:none}

/* --- Row (dropdown + list page) -------------------------------------------- */
.notif-row{
  position:relative;display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .75rem;
  border-radius:var(--tb-r-sm);transition:background var(--tb-dur);
}
.notif-row + .notif-row{margin-top:2px}
.notif-row:hover{background:var(--tb-hover)}
.notif-row.is-unread{background:var(--tb-unread)}
.notif-row.is-unread::before{
  content:"";position:absolute;top:1.1rem;inset-inline-start:.3rem;width:6px;height:6px;border-radius:50%;
  background:var(--tb-violet);
}
.notif-row__ico{
  width:2.1rem;height:2.1rem;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;background:var(--tb-fill-soft);color:var(--tb-violet-deep);margin-inline-start:.35rem;
}
.notif-row__art{
  width:3.4rem;height:2.55rem;flex-shrink:0;border-radius:10px;object-fit:cover;object-position:50% 62%;
  margin-inline-start:.35rem;background:var(--tb-fill-soft);box-shadow:0 0 0 1px var(--tb-border);
}
.notif-row__main{display:grid;gap:.12rem;min-width:0;flex:1;color:inherit;text-decoration:none}
.notif-row__main:focus-visible{outline:none;box-shadow:var(--tb-ring);border-radius:var(--tb-r-sm)}
.notif-row__title{font-weight:700;font-size:.92rem;color:var(--tb-ink)}
.notif-row:not(.is-unread) .notif-row__title{font-weight:600}
.notif-row__body{font-size:.85rem;color:var(--tb-soft);overflow-wrap:anywhere}
.notif-row__time{font-size:.75rem;color:var(--tb-soft);opacity:.85}
.notif-row__read{
  width:2rem;height:2rem;flex-shrink:0;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:var(--tb-r-sm);background:transparent;color:var(--tb-soft);
}
.notif-row__read:hover{background:var(--tb-fill-soft);color:var(--tb-violet-deep)}
.notif-row__read:focus-visible{outline:none;box-shadow:var(--tb-ring)}
.notif-row__read .material-symbols-outlined{font-size:1.2rem}

.notif-empty{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:0;padding:2rem 1rem;
  color:var(--tb-soft);font-weight:600;font-size:.9rem;text-align:center;
}
.notif-empty .material-symbols-outlined{font-size:2rem;opacity:.7}
.notif-more{display:grid;place-items:center;padding:1rem;color:var(--tb-soft)}
.notif-more .material-symbols-outlined{animation:notif-spin 1s linear infinite}
@keyframes notif-spin{to{transform:rotate(360deg)}}

/* --- Toasts ----------------------------------------------------------------- */
.notif-toasts{
  position:fixed;z-index:70;inset-block-end:1.2rem;inset-inline-end:1.2rem;
  display:grid;gap:.7rem;width:min(360px,calc(100vw - 2.4rem));pointer-events:none;
}
.notif-toast{
  pointer-events:auto;overflow:hidden;
  background:var(--tb-card);color:var(--tb-ink);border:1px solid var(--tb-border);
  border-radius:var(--tb-r-md);box-shadow:var(--tb-lift);animation:notif-in .24s cubic-bezier(.23,1,.32,1);
}
/* Needs action (a failed payment, a security change): stays until dismissed, marked in rose. */
.notif-toast--alert{border-color:var(--tb-rose);box-shadow:var(--tb-lift), inset 3px 0 0 var(--tb-rose)}
.notif-toast--alert .notif-toast__ico{background:var(--tb-rose)}
.notif-toast__row{display:flex;align-items:flex-start;gap:.8rem;padding:.85rem .9rem .85rem 1rem}
.notif-toast__art{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 62%}
.notif-toast--art{border-color:oklch(84% 0.08 300)}
.notif-toast__ico{
  width:2.1rem;height:2.1rem;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;background:var(--tb-violet);color:#fff;
}
.notif-toast__body{display:grid;gap:.15rem;min-width:0;flex:1;font-size:.87rem}
.notif-toast__body b{font-weight:800;font-size:.92rem}
.notif-toast__body span{color:var(--tb-soft);overflow-wrap:anywhere}
.notif-toast__body a{justify-self:start;margin-top:.2rem;font-weight:700;color:var(--tb-violet-deep);text-decoration:none}
.notif-toast__body a:hover{text-decoration:underline}
.notif-toast__x{
  width:1.8rem;height:1.8rem;flex-shrink:0;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:var(--tb-r-sm);background:transparent;color:var(--tb-soft);
}
.notif-toast__x:hover{background:var(--tb-hover);color:var(--tb-ink)}
.notif-toast__x .material-symbols-outlined{font-size:1.1rem}
/* Flash messages (core/partials/flash_toasts.html) reuse the toast, pinned to the top. */
.flash-toasts{inset-block-start:1.2rem;inset-block-end:auto;z-index:71}
.flash-toast .notif-toast__body span.flash-toast__text{color:var(--tb-ink);font-weight:700}
.flash-toast--success .notif-toast__ico{background:var(--tb-violet)}
.flash-toast--warning .notif-toast__ico{background:var(--tb-tang)}
.flash-toast--error{border-color:var(--tb-rose)}
.flash-toast--error .notif-toast__ico{background:var(--tb-rose)}
@keyframes notif-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .notif-toast,.notif-more .material-symbols-outlined{animation:none}
}

/* The celebration dialog and spotlight live in core/css/telo-motion.css (core/js/telo-feedback.js). */

/* --- List + preferences pages ---------------------------------------------- */
.notif-page__head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.2rem}
.notif-page__sub{margin:.25rem 0 0;color:var(--tb-soft);font-weight:600}
.notif-page__actions{display:flex;flex-wrap:wrap;gap:.5rem}
.notif-page__actions .chip-btn{display:inline-flex;align-items:center;gap:.35em;border:0;cursor:pointer}
.notif-page__list{padding:.5rem}

.notif-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1rem}
.notif-filters a{
  display:inline-flex;align-items:center;gap:.3em;padding:.42em .95em;border-radius:999px;
  font-size:.84rem;font-weight:700;color:var(--tb-soft);text-decoration:none;background:var(--tb-fill-soft);
  transition:background var(--tb-dur),color var(--tb-dur);
}
.notif-filters a .material-symbols-outlined{font-size:1.05em}
.notif-filters a:hover{color:var(--tb-ink)}
.notif-filters a[aria-current="true"]{background:var(--tb-violet);color:#fff}
.notif-filters__sep{width:1px;height:1.4rem;background:var(--tb-border);margin:0 .2rem}

.notif-prefs{padding:.5rem 1rem}
.notif-prefs__row{
  display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--notif-cols,2),minmax(3.5rem,6.5rem));align-items:center;gap:.5rem;
  padding:.75rem 0;
}
.notif-prefs__row + .notif-prefs__row{border-top:1px solid var(--tb-border)}
.notif-prefs__row--head{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tb-soft)}
.notif-prefs__row > :not(:first-child){justify-self:center;text-align:center}
.notif-prefs__cat{display:flex;align-items:center;gap:.6rem;min-width:0}
.notif-prefs__cat .notif-row__ico{margin:0}
.notif-pref-cell{display:grid;place-items:center}
.notif-pref-na{color:var(--tb-soft)}
.notif-pref-locked{display:inline-flex;align-items:center;gap:.25em;font-size:.78rem;font-weight:700;color:var(--tb-soft)}
.notif-pref-locked .material-symbols-outlined{font-size:1rem}

.notif-switch{position:relative;display:inline-flex;cursor:pointer}
.notif-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.notif-switch__track{
  width:2.6rem;height:1.5rem;border-radius:999px;background:var(--tb-border);position:relative;
  transition:background var(--tb-dur);
}
.notif-switch__track::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;width:calc(1.5rem - 6px);height:calc(1.5rem - 6px);
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .2);transition:transform var(--tb-dur);
}
.notif-switch input:checked + .notif-switch__track{background:var(--tb-violet)}
.notif-switch input:checked + .notif-switch__track::after{transform:translateX(1.1rem)}
[dir="rtl"] .notif-switch input:checked + .notif-switch__track::after{transform:translateX(-1.1rem)}
.notif-switch input:focus-visible + .notif-switch__track{box-shadow:var(--tb-ring)}
.notif-switch input.htmx-request + .notif-switch__track{opacity:.6}