/* css/screens/inbox.css — Grand Mumtoz Director · ZARHAL · screen "inbox" («Уведомления / Bildirishnomalar»), DESIGN-screen-feed §5.5 + VARIETY-RULES.
 * ENVELOPES, not a list: a serif unread count with the day line, a row of brass SEALS (kind groups with counts = the category filter),
 * envelopes grouped «Сегодня / Вчера / Раньше» with a brass ring icon by kind, a wax dot while unread, a folded flap on unread ones.
 * Also styles the desktop bell popover (.nb--pop) and the inspector detail. Tokens only; transform/opacity motion; reduced motion honoured. */

/* ---------- root ---------- */
.nb { position: relative; }
.nb .error-panel { margin: 12px 0; }
.nb__head { display: flex; flex-direction: column; gap: 8px; }

/* ---------- hero: serif count + day line + «Прочитать все» ---------- */
.nb-hero { display: flex; align-items: flex-start; gap: 12px; padding: 2px 0 4px; }
.nb-hero__count { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.nb-hero__num { font: 600 52px/52px var(--font-display); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; transition: color var(--t-short); }
.nb-hero__num.is-zero { color: var(--text-3); }
.nb-hero__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 6px; }
.nb-hero__label { font: 600 17px/22px var(--font-display); color: var(--text-1); }
.nb-hero__sub { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb__readall { flex-shrink: 0; margin-top: 8px; }
.nb__readall:disabled { color: var(--text-3); }
/* phone: icon-only «Прочитать все» so the day line keeps its room */
@media (max-width: 599px) { .nb-hero .nb__readall { width: 44px; height: 44px; padding: 0; margin-top: 4px; border-radius: 50%; } .nb-hero .nb__readall .btn__label { display: none; } .nb-hero .nb__readall .i { width: 24px; height: 24px; } }

/* ---------- push card ---------- */
.nb-push { display: flex; gap: 12px; align-items: flex-start; border-top-color: var(--line-gold); }
.nb-push__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.nb-push__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nb-push__actions { display: flex; gap: 8px; margin-top: 6px; }

/* ---------- seals: brass circles with counts (the category filter) ---------- */
.nb-seals { display: flex; gap: 4px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.nb-seals::-webkit-scrollbar { display: none; }
.nb-seal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 58px; padding: 4px 4px 2px; border-radius: var(--r-sm); color: var(--text-2); flex-shrink: 0; transition: color var(--t-short); }
.nb-seal__ring { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-gold); background: var(--bg-2); color: var(--accent); box-shadow: inset 0 0 0 3px var(--bg-2), inset 0 0 0 4px var(--line-gold); transition: transform var(--t-micro), background-color var(--t-short), color var(--t-short), box-shadow var(--t-short); }
.nb-seal:active .nb-seal__ring { transform: scale(.94); }
.nb-seal__label { font: 500 11px/14px var(--font-ui); white-space: nowrap; }
.nb-seal__count { position: absolute; top: -4px; right: -6px; }
.nb-seal.is-on { color: var(--accent); }
.nb-seal.is-on .nb-seal__ring { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent-fill), inset 0 0 0 4px var(--accent-ink), 0 0 16px -4px var(--accent); }
.nb-seal.is-on .nb-seal__label { font-weight: 700; }
.nb-seal:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
@media (hover: hover) { .nb-seal:hover .nb-seal__ring { border-color: var(--accent); } }
.nb__toggles { display: flex; gap: 8px; }
.nb__toggles .chip { height: 32px; }
.nb__toggles .chip .i { color: var(--text-3); }
.nb__toggles .chip--selected .i { color: inherit; }

/* ---------- groups ---------- */
.nb__list { display: flex; flex-direction: column; margin-top: 4px; }
.nb-group__head { display: flex; align-items: center; gap: 10px; padding: 12px 0 6px; }
.nb-group__head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-gold), transparent); }
.nb-group__head span { color: var(--accent); }

/* ---------- envelope ---------- */
.nb-env { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-height: 56px; padding: 8px 10px 8px 8px; margin: 0 -8px; border-radius: var(--r-md); cursor: pointer; outline: none; --tone: var(--accent); transition: background-color var(--t-micro), opacity 320ms var(--e-exit); }
.nb-env + .nb-env::before { content: ''; position: absolute; left: 56px; right: 8px; top: -1px; height: 1px; background: var(--line); }
.nb-env:active { background: var(--bg-2); }
@media (hover: hover) { .nb-env:hover { background: var(--bg-2); } }
.nb-env:focus-visible { box-shadow: 0 0 0 2px var(--accent-line); }
.nb-env--success { --tone: var(--success); } .nb-env--danger { --tone: var(--danger); } .nb-env--warning { --tone: var(--warning); } .nb-env--info { --tone: var(--info); } .nb-env--accent { --tone: var(--accent); }
.nb-env__ring { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-gold); background: var(--bg-2); color: var(--tone); flex-shrink: 0; transition: box-shadow var(--t-short); }
.nb-env.is-unread .nb-env__ring { border-color: var(--accent); box-shadow: 0 0 12px -4px var(--accent); }
.nb-env__ring--lg { width: 44px; height: 44px; grid-row: auto; }
.nb-env__body { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nb-env__title { font: 500 14px/20px var(--font-ui); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-short); }
.nb-env.is-unread .nb-env__title, .nb-env.is-seen .nb-env__title { color: var(--text-1); font-weight: 600; }
.nb-env__meta { font: 500 12px/16px var(--font-ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-env__full { margin-top: 6px; font: 400 13px/19px var(--font-ui); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; animation: fadeIn 160ms var(--e-velvet); }
.nb-env.is-expanded .nb-env__title, .nb-env.is-expanded .nb-env__meta { white-space: normal; }
.nb-env.is-expanded .nb-env__meta { display: none; }
.nb-env__right { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; align-self: start; padding-top: 2px; }
.nb-env__time { font: 500 12px/16px var(--font-ui); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the wax dot: gold while unread, fades once seen */
.nb-env__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); opacity: 0; transform: scale(.6); transition: opacity 320ms var(--e-exit), transform 320ms var(--e-exit); }
.nb-env.is-unread .nb-env__dot { opacity: 1; transform: none; }
.nb-env.is-unread.is-touched .nb-env__dot { opacity: .35; }
/* the folded flap of an unread envelope — a brass corner on the top-right */
.nb-env.is-unread::after { content: ''; position: absolute; right: 8px; top: 6px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent var(--line-gold) transparent transparent; opacity: .9; transition: opacity 320ms var(--e-exit); }
.nb-env.is-seen::after, .nb-env.is-readall::after { opacity: 0; }
.nb-env.is-selected { background: var(--accent-soft); }
.nb-env.is-highlight { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-line); }
.nb-env__flags { margin-top: 4px; display: flex; gap: 6px; }
.nb-env__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nb-env__actions .btn--32 { padding: 0 10px; }

/* «Прочитать все» wave — dots and flaps fade one after another, top to bottom */
.nb.is-readall .nb-env.is-unread .nb-env__dot, .nb.is-readall .nb-env.is-unread::after { animation: nbWax 420ms var(--e-exit) forwards; animation-delay: calc(min(var(--i, 0), 14) * 40ms); }
.nb.is-readall .nb-env.is-unread .nb-env__ring { animation: nbRingOff 420ms var(--e-exit) forwards; animation-delay: calc(min(var(--i, 0), 14) * 40ms); }
@keyframes nbWax { to { opacity: 0; transform: scale(.4); } }
@keyframes nbRingOff { to { box-shadow: 0 0 0 0 transparent; border-color: var(--line-gold); } }

/* ---------- more / byline / skeleton ---------- */
.nb__more { margin-top: 12px; }
.nb__more:empty { display: none; }
.nb__byline { margin-top: 8px; }
.nb__byline:empty { display: none; }
.nb__skel { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.nb__skel-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 48px; }
.nb__skel-ring { width: 36px; height: 36px; border-radius: 50%; }
.nb__skel-line { height: 14px; }
.nb__empty { padding-top: 28px; }

/* ---------- motion signature: envelopes slide out of the stack (stagger), new ones drop in from above ---------- */
.nb__list.enter > .nb-env { animation: nbOut 260ms var(--e-enter) both; animation-delay: calc(min(var(--i, 0), 14) * 24ms); }
.nb__list.enter > .nb-group__head { animation: fadeIn 200ms var(--e-enter) both; animation-delay: calc(min(var(--i, 0), 14) * 24ms); }
.nb-env.is-new { animation: nbDrop 320ms var(--e-enter); }
@keyframes nbOut { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes nbDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
html[data-motion="reduced"] .nb__list.enter > *, html[data-motion="reduced"] .nb-env.is-new, html[data-motion="reduced"] .nb-env__full { animation: fadeIn 120ms both; }
html[data-motion="reduced"] .nb.is-readall .nb-env.is-unread .nb-env__dot, html[data-motion="reduced"] .nb.is-readall .nb-env.is-unread::after, html[data-motion="reduced"] .nb.is-readall .nb-env.is-unread .nb-env__ring { animation: none; opacity: 0; box-shadow: none; }

/* ---------- desktop bell popover (420 × 600, .nb--pop inside .popover__body) ---------- */
.nb--pop { padding: 2px 6px 8px; }
.nb-pop__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; min-height: 32px; }
.nb--pop .nb-seals { margin: 0; padding: 2px 0; gap: 2px; }
.nb--pop .nb-seal { min-width: 50px; padding: 2px; }
.nb--pop .nb-seal__ring { width: 32px; height: 32px; box-shadow: inset 0 0 0 2px var(--bg-2), inset 0 0 0 3px var(--line-gold); }
.nb--pop .nb-seal.is-on .nb-seal__ring { box-shadow: inset 0 0 0 2px var(--accent-fill), inset 0 0 0 3px var(--accent-ink); }
.nb--pop .nb-seal__ring .i { width: 16px; height: 16px; }
.nb--pop .nb-seal__label { font-size: 10px; }
.nb--pop .nb-env { min-height: 48px; padding: 6px 8px; margin: 0; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 0 10px; }
.nb--pop .nb-env + .nb-env::before { left: 48px; }
.nb--pop .nb-env__ring { width: 30px; height: 30px; }
.nb--pop .nb-env__ring .i { width: 16px; height: 16px; }
.nb--pop .nb-env__title { font-size: 13px; line-height: 18px; }
.nb--pop .nb-group__head { padding: 8px 0 4px; }
.nb-pop__all { display: block; width: 100%; padding: 10px 8px 4px; text-align: center; font: 500 13px/18px var(--font-ui); }

/* ---------- desktop page ≥ 900: list at 720 px, detail in the inspector ---------- */
@media (min-width: 900px) and (min-height: 521px) {
  .nb--desk { max-width: 720px; }
  .nb--desk .nb-hero__num { font-size: 44px; line-height: 44px; }
  .nb--desk .nb-seals { margin: 0; padding: 4px 0 2px; overflow: visible; }
  .nb--desk .nb-env { padding: 8px 12px; margin: 0; }
  .nb--desk .nb-env + .nb-env::before { left: 60px; right: 12px; }
  .nb--desk .nb-env.is-unread::after { right: 12px; }
}
.nb-detail__head { display: flex; align-items: center; gap: 12px; }
.nb-detail__text { font: 400 15px/22px var(--font-ui); color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); border-top-left-radius: 4px; }