/* notifications.css — центр уведомлений (порт notifications.html, namespace exn-).
   Двухуровневый: список каналов → лента канала. Десктоп — попап под колокольчиком,
   мобилка (≤720px) — полноэкранная страница с выездом справа. Акцент = --blue сайта. */

.exn-panel{
  --exn-panel:#0A0A0A; --exn-chip:#101010; --exn-surface:#0A0A0A; --exn-border:#101010;
  --exn-border-soft:#0A0A0A; --exn-t2:#8A93A2; --exn-t3:#5C6470;
  --exn-accent:var(--blue,var(--blue)); --exn-badge:var(--blue,var(--blue));
  --exn-mono:var(--mono,ui-monospace,Menlo,Consolas,monospace);

  position:fixed; width:428px;
  max-height:min(640px,calc(100vh - 58px - 24px));
  display:flex; flex-direction:column;
  background:var(--exn-panel); border:1px solid var(--exn-border); border-radius:var(--radius);
  ; overflow:hidden; transform-origin:top right;
  z-index:2000; color:var(--text,#F0F2F6);
  font:14px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.exn-panel[hidden]{display:none}
.exn-panel.exn-enter{animation:exnPop .16s ease-out}
@keyframes exnPop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.exn-panel button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.exn-panel :focus-visible{outline:2px solid var(--exn-accent);outline-offset:2px;border-radius:6px}
.exn-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.exn-trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.exn-head{position:relative;display:flex;align-items:center;gap:6px;height:52px;padding:0 10px;border-bottom:1px solid var(--exn-border-soft)}
.exn-head h2{flex:1;margin:0;font-size:16px;font-weight:600;text-align:center;letter-spacing:-.1px;color:var(--text)}
#exn-close{position:absolute;right:8px;top:50%;transform:translateY(-50%)}   /* X справа, заголовок центрируется по всей ширине */
.exn-icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--exn-t2);flex:0 0 auto}
.exn-icon-btn:hover{background:var(--exn-surface);color:var(--text)}
.exn-icon-btn[hidden]{display:none}

.exn-views{flex:1;position:relative;overflow:hidden}
/* 3-уровневый трек: каналы → лента → страница. Сдвиг по data-level. */
.exn-track{display:flex;width:300%;height:100%;transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.exn-track[data-level="0"]{transform:translateX(0)}
.exn-track[data-level="1"]{transform:translateX(-33.3333%)}
.exn-track[data-level="2"]{transform:translateX(-66.6666%)}
.exn-pane{width:33.3333%;height:100%;overflow-y:auto;overscroll-behavior:contain}
.exn-pane::-webkit-scrollbar{width:8px}
.exn-pane::-webkit-scrollbar-thumb{background:#101010;border-radius:6px;border:2px solid var(--exn-panel)}

/* уровень 3 — страница сообщения */
.exn-detail-wrap{padding:20px 18px 28px}
.exn-detail-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--exn-t3);margin-bottom:12px}
.exn-detail-eyebrow .exn-k{width:22px;height:22px;border-radius:50%;background:var(--exn-chip);display:grid;place-items:center;color:var(--exn-accent);flex:0 0 auto}
.exn-detail-title{font-size:20px;line-height:1.28;font-weight:700;letter-spacing:-.3px;margin:0 0 10px;color:var(--text)}
.exn-detail-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--exn-t3);margin-bottom:16px}
.exn-detail-meta .exn-mt{font-family:var(--mono);font-variant-numeric:tabular-nums}
.exn-detail-meta .exn-dotsep{width:2.5px;height:2.5px;border-radius:50%;background:var(--exn-t3)}
.exn-chip-tag{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;font-family:var(--mono);background:var(--exn-chip);color:var(--exn-t2)}
.exn-chip-tag.up{color:var(--up);background:rgba(40,199,132,.12)}
.exn-chip-tag.down{color:var(--down);background:rgba(240,97,109,.12)}
.exn-detail-hero{margin:0 0 18px;border-radius:10px;overflow:hidden;aspect-ratio:16/9}
.exn-detail-hero.exn-blue{background:linear-gradient(180deg,#1C2A4A,#0A0A0A)}
.exn-detail-hero.exn-silver{background:linear-gradient(180deg,#101010,#0A0A0A)}
.exn-detail-hero.exn-gold{background:linear-gradient(180deg,#5A4620,#101010)}
.exn-detail-hero img{display:block;width:100%;height:100%;object-fit:cover}
.exn-detail-body p{font-size:15px;line-height:1.62;color:var(--text);margin:0 0 14px}
.exn-detail-body p.exn-dim{color:var(--exn-t2)}
.exn-detail-body ul{margin:0 0 14px;padding-left:18px;color:var(--text)}
.exn-detail-body li{font-size:15px;line-height:1.6;margin:0 0 6px}
.exn-detail-cta{margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}
.exn-btn{height:40px;padding:0 18px;border-radius:10px;font:600 13.5px Inter,sans-serif;background:var(--exn-accent);color:#fff;cursor:pointer;border:0}
.exn-btn.exn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--exn-border)}

/* уровень 1 — каналы */
.exn-cat{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;transition:background .16s}
.exn-cat:hover{background:var(--exn-surface)}
.exn-cat-ic{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--exn-chip);display:grid;place-items:center;color:var(--exn-accent)}
.exn-cat-body{flex:1;min-width:0}
.exn-cat-name{font-size:15px;font-weight:600;letter-spacing:-.1px;margin:0 0 3px;color:var(--text)}
.exn-cat-prev{font-size:13px;color:var(--exn-t2);margin:0}
.exn-cat-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:2px}
.exn-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--exn-badge);color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center}
.exn-badge[hidden]{display:none}
.exn-cat-date{font-size:12px;color:var(--exn-t3);font-family:var(--mono)}
.exn-cat.exn-muted .exn-cat-name{color:var(--exn-t2);font-weight:500}
.exn-cat.exn-muted .exn-cat-ic{color:var(--exn-t3)}

/* уровень 2 — лента */
.exn-subtabs{display:flex;gap:22px;padding:12px 16px 0;border-bottom:1px solid var(--exn-border-soft);position:sticky;top:0;background:var(--exn-panel);z-index:2}
.exn-subtab{position:relative;padding:0 0 12px;font-size:14px;font-weight:500;color:var(--exn-t2);transition:color .16s}
.exn-subtab[aria-selected="true"]{color:var(--text);font-weight:600}
.exn-subtab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--exn-accent);border-radius:6px}
.exn-subtab .exn-sd{position:absolute;top:2px;right:-9px;width:5px;height:5px;border-radius:50%;background:var(--exn-badge)}
.exn-subtab .exn-sd[hidden]{display:none}

.exn-msg{position:relative;display:flex;gap:12px;width:100%;text-align:left;padding:14px 16px;transition:background .16s}
.exn-msg:hover{background:var(--exn-surface)}
.exn-msg + .exn-msg{border-top:1px solid var(--exn-border-soft)}
.exn-msg-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--exn-chip);display:grid;place-items:center;color:var(--exn-accent);margin-top:1px}
.exn-msg-body{flex:1;min-width:0}
.exn-msg-title{font-size:14px;font-weight:600;color:var(--text);margin:0 0 4px;letter-spacing:-.1px}
.exn-msg-text{font-size:13px;color:var(--exn-t2);margin:0 0 7px;line-height:1.4}
.exn-msg-time{font-size:12px;color:var(--exn-t3);font-family:var(--mono)}
.exn-msg.exn-read .exn-msg-title{color:var(--exn-t2);font-weight:500}
.exn-msg .exn-udot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--exn-badge);margin-top:6px}
.exn-msg.exn-read .exn-udot{background:transparent}

/* промо-баннер 16:9 — чистый цветной блок с заголовком (картинка из CMS перекрывает) */
.exn-promo{position:relative;margin:9px 0 8px;border-radius:10px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:flex-end;padding:12px}
.exn-promo.exn-blue{background:linear-gradient(180deg,#1C2A4A,#0A0A0A)}
.exn-promo.exn-silver{background:linear-gradient(180deg,#101010,#0A0A0A)}
.exn-promo.exn-gold{background:linear-gradient(180deg,#5A4620,#101010)}
.exn-promo-cap{position:relative;z-index:1;font-size:13px;font-weight:700;color:#fff;line-height:1.25;max-width:80%;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.exn-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

.exn-empty{margin:auto;padding:60px 30px;text-align:center;color:var(--exn-t3)}
.exn-empty svg{opacity:.4;margin-bottom:14px}
.exn-empty p{margin:6px 0 0;font-size:13px;color:var(--exn-t2)}

/* колокольчик-точка сайта — показ через класс */
.hdr-bell-dot{display:none}
.hdr-bell.exn-has-unread .hdr-bell-dot{display:block}

/* мобилка — попап ~40% под хедером (не фуллскрин), появляется от колокола */
@media (max-width:720px){
  .exn-panel{position:fixed;left:8px;right:8px;bottom:auto;
    top:calc(var(--m-header-h,58px) + 8px)!important;left:8px!important;right:8px!important;
    width:auto!important;height:46vh!important;max-height:46vh!important;
    border:1px solid var(--border)!important;border-radius:var(--radius)!important;
    ;background:var(--bg,#040404)!important;
    transform-origin:top right;transform:scale(.9) translateY(-10px);opacity:0;
    transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .2s ease!important}
  .exn-panel.exn-open{transform:none;opacity:1}
  .exn-panel.exn-enter{animation:none}
  .exn-pane,.exn-subtabs,.exn-head{background:var(--bg,#040404)}
  /* тёмный градиент снизу — «дно» не выглядит обрезанным; исчезает у конца скрола */
  .exn-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;pointer-events:none;z-index:5;
    border-radius:0 0 var(--radius) var(--radius);background:linear-gradient(rgba(8,9,12,0),var(--bg,#040404));opacity:1;transition:opacity .22s ease}
  .exn-panel.exn-at-bottom::after{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .exn-panel,.exn-view,.exn-cat,.exn-msg,.exn-subtab{transition:none!important;animation:none!important}
}