/* Совпадения топов: панель в Мониторе, отметка на меню, колокольчики и
   настройки списка во вкладке «Проп». Запрос владельца 23.09.2026. */

/* --- Монитор --- */

.prop-alerts-panel { flex: 0 0 auto; transition: border-color .3s ease, box-shadow .3s ease; }
.prop-alerts-panel[hidden] { display: none; }
.prop-alerts-body[hidden] { display: none; }
/* Свёрнута — это одна строка заголовка; нижняя граница заголовка тогда
   сливалась бы с рамкой панели в двойную линию. */
.prop-alerts-panel.is-collapsed .monitor-panel-head { border-bottom: 0; }
.prop-alerts-heading { flex: 1 1 auto; min-width: 0; margin: 0; }
.prop-alerts-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-width: 0;
  min-height: 1.75rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.prop-alerts-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }
.prop-alerts-chevron {
  flex: 0 0 auto;
  width: .45rem;
  height: .45rem;
  margin-inline: .15rem .1rem;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.prop-alerts-toggle[aria-expanded="true"] .prop-alerts-chevron { transform: rotate(45deg) translate(-.1rem, -.1rem); }
.prop-alerts-toggle:hover .prop-alerts-chevron { border-color: var(--text-primary); }

/* Пометка: совпадение есть, а его ещё не видели. Цвет — стороны последнего. */
.prop-alerts-panel { --unread: var(--warning); --unread-soft: rgba(253, 176, 34, .14); }
.prop-alerts-panel.unread-long { --unread: var(--success); --unread-soft: var(--success-soft); }
.prop-alerts-panel.unread-short { --unread: var(--error); --unread-soft: var(--error-soft); }
.prop-alerts-panel.has-unread { border-color: var(--unread); box-shadow: 0 0 0 1px var(--unread-soft); }
.prop-alerts-panel.has-unread .monitor-panel-head { background: var(--unread-soft); }
.prop-alerts-unread {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  padding: .12rem .55rem;
  overflow: hidden;
  color: var(--unread);
  background: var(--bg-primary);
  border: 1px solid var(--unread);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prop-alerts-unread[hidden] { display: none; }
.prop-alerts-unread::before {
  flex: 0 0 auto;
  width: .45rem;
  height: .45rem;
  content: "";
  background: currentColor;
  border-radius: 50%;
  animation: prop-alert-dot 1.4s ease-in-out infinite;
}
.prop-alerts-head-meta { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.prop-alerts-summary {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prop-alerts-list {
  display: flex;
  gap: .5rem;
  padding: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.prop-alerts-list[hidden] { display: none; }
.prop-alerts-empty { margin: 0; padding: .55rem .75rem; color: var(--text-tertiary); font-size: .8125rem; }
.prop-alerts-empty[hidden] { display: none; }

.prop-alert {
  --accent: var(--success);
  --accent-soft: var(--success-soft);
  position: relative;
  flex: 0 0 auto;
  width: min(22rem, 86vw);
  padding: .5rem .75rem .6rem 1.05rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  transition: border-color .3s ease, background-color .3s ease;
}
.prop-alert::before {
  position: absolute;
  top: .45rem;
  bottom: .45rem;
  left: .4rem;
  width: 3px;
  content: "";
  background: var(--accent);
  border-radius: 2px;
}
.prop-alert.is-short { --accent: var(--error); --accent-soft: var(--error-soft); }
.prop-alert.is-close { --accent: var(--warning); --accent-soft: rgba(253, 176, 34, .14); }

/* Свежее — подсвечено; старше десяти минут — спокойная карточка истории. */
.prop-alert.is-fresh {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.prop-alert.is-fresh .prop-alert-title { color: var(--accent); }
.prop-alert.is-new { animation: prop-alert-in .5s cubic-bezier(.2, .8, .2, 1), prop-alert-glow 1.6s ease-in-out .5s 4; }

@keyframes prop-alert-in {
  from { opacity: 0; transform: translateX(-1rem) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes prop-alert-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--accent-soft); }
  50% { box-shadow: 0 0 0 .35rem var(--accent-soft); }
}

.prop-alert-head { display: flex; align-items: baseline; gap: .45rem; }
.prop-alert-icon { flex: 0 0 auto; color: var(--accent); font-size: .875rem; line-height: 1; }
.prop-alert-title { color: var(--text-primary); font-size: .9375rem; font-weight: 650; }
.prop-alert-time {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.prop-alert-meta { margin: .1rem 0 .45rem; color: var(--text-tertiary); font-size: .75rem; }
.prop-alert-members { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.prop-alert-members li {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  max-width: 100%;
  padding: .12rem .5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 999px;
  font-size: .75rem;
}
.prop-alert-nick {
  max-width: 11rem;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prop-alert-member-time { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.prop-alert-member-side { font-weight: 600; }
.prop-alert-member-side.is-long { color: var(--success); }
.prop-alert-member-side.is-short { color: var(--error); }

/* Отметка на пункте меню: совпадение пришло, пока смотрели другую вкладку. */
#monitor-nav { position: relative; }
#monitor-nav.has-prop-alert::before {
  position: absolute;
  z-index: 1;
  top: .3rem;
  right: .3rem;
  width: .5rem;
  height: .5rem;
  content: "";
  background: var(--warning);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--sidebar);
  animation: prop-alert-dot 1.4s ease-in-out infinite;
}
@keyframes prop-alert-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .7; }
}

/* --- Проп: колокольчик у ника --- */

.prop-nick-cell { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.prop-nick-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Прежний ник под нынешним: Lite не отдаёт постоянного номера, и сменивший
   ник иначе выглядит незнакомцем. */
.prop-nick-names { display: flex; flex-direction: column; min-width: 0; }
.prop-nick-previous {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .75em; line-height: 1.2; color: var(--text-tertiary);
}
.prop-watch-toggle {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  color: var(--text-disabled);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  place-items: center;
}
.prop-watch-toggle[hidden] { display: none; }
.prop-watch-toggle svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.prop-watch-toggle[aria-pressed="true"] { color: var(--warning); }
.prop-watch-toggle[aria-pressed="true"] svg { fill: currentColor; }
.prop-watch-toggle:not(:disabled):hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-secondary); }
.prop-watch-toggle[aria-pressed="true"]:not(:disabled):hover { color: var(--warning); }
.prop-watch-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Не владелец видит отметку, но нажать не может. */
.prop-watch-toggle:disabled { cursor: default; opacity: 1; }
/* Пустой колокольчик у каждой строки шумит; приглушаем, но не прячем совсем:
   на телефоне наведения нет, и спрятанный было бы не найти. */
tr:not(:hover):not(:focus-within) .prop-watch-toggle[aria-pressed="false"]:not(:focus-visible) { opacity: .35; }

/* --- Проп: настройки списка (только владельцу) --- */

.prop-watch-panel { margin-top: .625rem; }
.prop-watch-panel[hidden] { display: none; }
.prop-watch-body { display: grid; gap: .5rem; padding: .55rem .625rem .65rem; }
.prop-watch-hint { margin: 0; color: var(--text-tertiary); font-size: .8125rem; }
.prop-watch-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.prop-watch-controls label { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-secondary); font-size: .8125rem; }
.prop-watch-controls input[type="number"] { width: 4.25rem; font-variant-numeric: tabular-nums; }
.prop-watch-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.prop-watch-chips li {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
  padding: .1rem .15rem .1rem .55rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 999px;
  font-size: .8125rem;
}
.prop-watch-chips li.is-empty { padding: .1rem .55rem; color: var(--text-tertiary); border-style: dashed; }
.prop-watch-chip-nick { max-width: 16rem; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }
.prop-watch-chip-remove {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: .875rem;
  line-height: 1;
  place-items: center;
}
.prop-watch-chip-remove:hover { color: var(--error); background: var(--error-soft); }
.prop-watch-chip-remove:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.prop-watch-status[data-tone="error"] { color: var(--error); }
.prop-watch-status[data-tone="ok"] { color: var(--success); }

@media (max-width: 48rem) {
  /* На телефоне сводка порога уступает место пометке: она важнее. */
  .prop-alerts-panel.has-unread .prop-alerts-summary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .prop-alert.is-new, #monitor-nav.has-prop-alert::before, .prop-alerts-unread::before { animation: none; }
  .prop-alert, .prop-alerts-panel, .prop-alerts-chevron { transition: none; }
}

/* --- Личные уведомления администратора (24.09.2026) --- */

/* Обе карточки владельца рядом, если хватает ширины; одна — во всю строку. */
.prop-admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: .625rem;
  margin-top: .625rem;
  align-items: start;
}
.prop-admin-cards > .prop-watch-panel { margin-top: 0; }
.prop-admin-cards:not(:has(> :not([hidden]))) { display: none; }

.prop-follow-toggle {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  color: var(--text-disabled);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  place-items: center;
}
.prop-follow-toggle[hidden] { display: none; }
.prop-follow-toggle svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.prop-follow-toggle .prop-follow-pupil { fill: none; }
.prop-follow-toggle[aria-pressed="true"] { color: var(--brand-hover); }
.prop-follow-toggle[aria-pressed="true"] .prop-follow-pupil { fill: currentColor; }
.prop-follow-toggle:not(:disabled):hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-secondary); }
.prop-follow-toggle[aria-pressed="true"]:not(:disabled):hover { color: var(--brand-hover); }
.prop-follow-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
tr:not(:hover):not(:focus-within) .prop-follow-toggle[aria-pressed="false"]:not(:focus-visible) { opacity: .35; }

.prop-follow-events label, .prop-follow-sound label { gap: .35rem; }
.prop-follow-panel input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--brand);
}
.prop-follow-sound .toolbar-button {
  padding: .2rem .65rem;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.prop-follow-sound .toolbar-button:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.prop-follow-events input[type="number"] { width: 3.75rem; }
.prop-follow-sound input[type="range"] { width: 7rem; }
.prop-follow-today summary { color: var(--text-secondary); font-size: .8125rem; cursor: pointer; }
.prop-follow-log { display: grid; gap: .2rem; max-height: 14rem; margin: .4rem 0 0; padding: 0; overflow-y: auto; list-style: none; }
.prop-follow-log li { display: grid; grid-template-columns: 3rem minmax(0, 11rem) minmax(0, 1fr); gap: .5rem; font-size: .8125rem; }
.prop-follow-log li.is-empty { display: block; color: var(--text-tertiary); }
.prop-follow-log time { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.prop-follow-log strong { overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }
.prop-follow-log .is-long span, .prop-follow-log .is-size-up span { color: var(--success); }
.prop-follow-log .is-short span, .prop-follow-log .is-size-down span { color: var(--error); }
.prop-follow-log .is-close span { color: var(--warning); }

/* Всплывающие: справа снизу, над всем, на любой вкладке. */
.prop-follow-toasts {
  position: fixed;
  z-index: 60;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  width: min(23rem, calc(100vw - 2rem));
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.prop-follow-toast {
  --accent: var(--brand-hover);
  position: relative;
  padding: .55rem .7rem .6rem 1rem;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .35);
  pointer-events: auto;
  animation: prop-follow-in .35s cubic-bezier(.2, .8, .2, 1);
}
.prop-follow-toast::before {
  position: absolute;
  top: .45rem;
  bottom: .45rem;
  left: .4rem;
  width: 3px;
  content: "";
  background: var(--accent);
  border-radius: 2px;
}
.prop-follow-toast.is-long, .prop-follow-toast.is-size-up { --accent: var(--success); }
.prop-follow-toast.is-short, .prop-follow-toast.is-size-down { --accent: var(--error); }
.prop-follow-toast.is-close { --accent: var(--warning); }
.prop-follow-toast.is-leaving { opacity: 0; transform: translateX(1rem); transition: opacity .25s ease, transform .25s ease; }
.prop-follow-toast-head { display: flex; align-items: baseline; gap: .5rem; }
.prop-follow-toast-head strong { min-width: 0; overflow: hidden; color: var(--text-primary); font-size: .9375rem; text-overflow: ellipsis; white-space: nowrap; }
.prop-follow-toast-head time { margin-left: auto; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.prop-follow-toast p { margin: .15rem 0 0; color: var(--accent); font-size: .875rem; font-weight: 600; }
.prop-follow-toast-close {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.prop-follow-toast-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.prop-follow-toast-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@keyframes prop-follow-in {
  from { opacity: 0; transform: translateY(.75rem) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 48rem) {
  /* На телефоне снизу меню — поднимаемся над ним. */
  .prop-follow-toasts { right: .5rem; bottom: calc(4.5rem + env(safe-area-inset-bottom)); width: calc(100vw - 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .prop-follow-toast { animation: none; }
  .prop-follow-toast.is-leaving { transition: none; }
}