/* Notifications: /notifications (Figma 484:122, 485:1654, 485:2247), TopBar bell panel (265:3370 / 266:4317),
   user bot linking, Settings → اعلان‌ها و بات‌ها (471:6064). */

/* ---------- tabs (page + panel) ---------- */
.ntf-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--color-border); margin-block-end: 24px; }
.ntf-tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; color: var(--color-text-secondary); font: var(--text-body);
  text-decoration: none; border: 0; border-bottom: 2px solid transparent; margin-block-end: -1px; background: none; cursor: pointer; }
.ntf-tab:hover { color: var(--color-text-primary); text-decoration: none; }
.ntf-tab.is-active { color: var(--color-text-brand); font: var(--text-body-strong); border-bottom-color: var(--color-brand-amber); }
.ntf-tab__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); color: var(--color-text-secondary);
  font: var(--text-caption); display: inline-grid; place-items: center; }
.ntf-tab.is-active .ntf-tab__count { background: var(--color-gray-100); color: var(--color-text-primary); }

/* ---------- page ---------- */
.ntf-page .ntf-head { align-items: flex-start; margin-block-end: 28px; }
.ntf-page .ntf-head .page-header__title { font: var(--text-h1); }
.ntf-group { margin-block-end: 24px; }
.ntf-group__label { font: var(--text-small); color: var(--color-text-muted); margin-block-end: 8px; }
.ntf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ntf-item { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px 14px 16px; padding-inline-start: 36px;
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); min-height: 100px; }
.ntf-item.is-unread { background: var(--color-gray-100); }
.ntf-item__dot { position: absolute; inset-inline-start: 16px; top: 28px; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.ntf-item.is-unread .ntf-item__dot { background: var(--color-brand-amber); }
.ntf-item__icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--color-gray-50);
  color: var(--color-text-primary); }
.ntf-item.is-unread .ntf-item__icon { background: var(--color-surface-card); }
.ntf-item__icon .icon { width: 18px; height: 18px; }
.ntf-item__main { flex: 1; min-width: 0; }
.ntf-item__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: var(--text-body-strong); color: var(--color-text-primary); }
.ntf-item__title a { color: inherit; text-decoration: none; }
.ntf-item__title a:hover { text-decoration: underline; }
.ntf-item__body { font: var(--text-small); color: var(--color-text-secondary); margin-top: 4px; }
.ntf-item__meta { font: var(--text-small); color: var(--color-text-muted); margin-top: 4px; }
.ntf-item__action { flex: none; align-self: flex-start; }
.ntf-more { padding: 8px 0 16px; }
.ntf-more .btn { font: var(--text-body-strong); }
.ntf-empty { padding: 72px 24px; }
.ntf-empty .empty__icon { width: 96px; height: 96px; background: var(--color-gray-100); }

/* ---------- bell + panel ---------- */
.ntf-bell { position: relative; }
.ntf-panel { position: absolute; top: calc(100% + 11px); left: -14px; z-index: 60; width: 400px; background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.ntf-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.ntf-panel__head strong { font: var(--text-body-strong); color: var(--color-text-primary); }
.ntf-panel__readall { font: var(--text-small); color: var(--color-text-primary); }
.ntf-panel__readall[disabled] { color: var(--color-text-muted); cursor: default; }
.ntf-panel__tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--color-border); }
.ntf-panel__tabs .ntf-tab { height: 40px; font-size: 13px; }
.ntf-panel__tabs .ntf-tab__count { background: var(--color-gray-100); }
.ntf-panel__list { list-style: none; margin: 0; padding: 6px; max-height: 460px; overflow-y: auto; display: grid; gap: 2px; }
.ntf-pitem a { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.ntf-pitem a:hover { background: var(--color-gray-50); }
.ntf-pitem.is-unread a { background: var(--color-gray-100); }
.ntf-pitem__icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-gray-100); color: var(--color-text-primary); }
.ntf-pitem.is-unread .ntf-pitem__icon { background: var(--color-surface-card); }
.ntf-pitem__icon .icon { width: 16px; height: 16px; }
.ntf-pitem__main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ntf-pitem__title { font: 500 14px/24px var(--font-family); color: var(--color-text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ntf-pitem__meta { font: var(--text-small); color: var(--color-text-muted); }
.ntf-pitem__dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; }
.ntf-pitem.is-unread .ntf-pitem__dot { background: var(--color-brand-amber); }
.ntf-panel__empty { padding: 32px 16px; text-align: center; color: var(--color-text-secondary); font: var(--text-small); }
.ntf-panel__all { display: block; padding: 12px; text-align: center; border-top: 1px solid var(--color-border); font: var(--text-body-strong); color: var(--color-text-brand); text-decoration: none; }
.ntf-panel__all:hover { background: var(--color-gray-50); text-decoration: none; }
.pshell__actions .ntf-panel { left: 0; }

/* ---------- my bot links ---------- */
.ntf-bots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; }
.ntf-bot { padding: 20px; display: grid; gap: 12px; align-content: start; }
.ntf-bot__head { display: flex; align-items: center; gap: 12px; }
.ntf-bot__head h2 { font: var(--text-h3); margin: 0; }
.ntf-bot__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-gray-100); color: var(--color-text-primary); }
.ntf-bot__sub { font: var(--text-small); color: var(--color-text-muted); }
.ntf-bot__head .badge { margin-inline-start: auto; }
.ntf-code { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed var(--color-gray-300); border-radius: var(--radius-md); background: var(--color-gray-50); }
.ntf-code__value { font: 700 22px/32px var(--font-family); letter-spacing: 2px; color: var(--color-text-brand); }
.ntf-bot p { margin: 0; font: var(--text-small); color: var(--color-text-secondary); }

/* ---------- Settings → اعلان‌ها و بات‌ها ---------- */
.nset .nset-bots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block-end: 20px; }
.nset .nset-bot { padding: 20px; display: grid; gap: 12px; align-content: start; }
.nset .nset-bot__head { display: flex; align-items: flex-start; gap: 12px; }
.nset .nset-bot__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-gray-100); color: var(--color-text-primary); flex: none; }
.nset .nset-bot__name { font: var(--text-h3); color: var(--color-text-primary); }
.nset .nset-bot__user { font: var(--text-small); color: var(--color-text-muted); }
.nset .nset-bot__head .badge { margin-inline-start: auto; }
.nset .nset-bot__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nset .nset-bot__last { font: var(--text-small); color: var(--color-text-muted); }
.nset .nset-bot .field { margin: 0; }
.nset .nset-webhook { display: grid; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--color-border); }
.nset .nset-webhook__title { font: var(--text-body); color: var(--color-text-primary); }
.nset .nset-webhook__warn { margin: 0; font: var(--text-small); }
.nset .nset-card { margin-block-end: 20px; }
.nset .nset-card .card-head { padding: 20px 20px 12px; }
.nset .nset-group { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--color-border); }
.nset .nset-group__icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-primary); flex: none; }
.nset .nset-group__main { flex: 1; min-width: 0; }
.nset .nset-group__title { font: var(--text-body-strong); }
.nset .nset-group__sub { font: var(--text-small); color: var(--color-text-muted); }
.nset .nset-group form { margin: 0; }
.nset .nset-matrix th, .nset .nset-matrix td { vertical-align: middle; }
.nset .nset-matrix .nset-col { width: 110px; text-align: center; }
.nset .nset-matrix td.nset-col input { width: 18px; height: 18px; accent-color: var(--color-brand-navy); }
.nset .nset-matrix .nset-event { font: var(--text-body-strong); }
.nset .nset-matrix .nset-recipient { font: var(--text-small); color: var(--color-text-muted); }
.nset .nset-actions { display: flex; gap: 8px; margin-block: 4px 24px; }
.ntf-nowrap { white-space: nowrap; }
