/* Torkzt — уведомления: колокольчик, лента, история поиска, подписка на релиз, настройки.
   Цвета берутся из переменных Bootstrap 5.3 — светлая и тёмная тема подхватываются сами. */

:root {
  --tzn-bg: var(--bs-body-bg, #fff);
  --tzn-fg: var(--bs-body-color, #1c2026);
  --tzn-muted: var(--bs-secondary-color, #6c757d);
  --tzn-line: var(--bs-border-color, #dee2e6);
  --tzn-hover: var(--bs-tertiary-bg, #f3f4f6);
  --tzn-accent: var(--bs-primary, #0d6efd);
  --tzn-unread: rgba(13, 110, 253, .07);
  --tzn-shadow: 0 16px 40px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
}

/* ---------- колокольчик ---------- */
[data-notify-bell] { position: relative; }
[data-notify-count] {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--tzn-bg);
  pointer-events: none;
}
[data-notify-count][hidden] { display: none; }

/* ---------- панель ленты ---------- */
.tzn-panel {
  position: fixed;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-height: min(560px, calc(100vh - 90px));
  border: 1px solid var(--tzn-line);
  border-radius: 14px;
  background: var(--tzn-bg);
  color: var(--tzn-fg);
  box-shadow: var(--tzn-shadow);
  overflow: hidden;
}
.tzn-panel[hidden] { display: none; }
.tzn-panel.is-sheet {
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0;
  width: 100%;
  max-height: 82vh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: 16px 16px 0 0;
  border-bottom: 0;
}

.tzn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 10px 16px;
  border-bottom: 1px solid var(--tzn-line);
}
.tzn-heading { flex: 1; font-size: 1rem; }
.tzn-textbtn {
  border: 0;
  background: none;
  color: var(--tzn-accent);
  font-size: .8125rem;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 8px;
}
.tzn-textbtn:hover, .tzn-iconbtn:hover { background: var(--tzn-hover); }
.tzn-iconbtn {
  width: 32px;
  height: 32px;
  padding: 7px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tzn-muted);
}
.tzn-iconbtn svg, .tzn-kind svg, .tzs-box svg, .tzp-list svg, .tz-relsub svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tzn-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tzn-row { margin: 0; }
.tzn-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
}
.tzn-item:hover { background: var(--tzn-hover); color: inherit; }
.tzn-item.is-unread { background: var(--tzn-unread); }
.tzn-item.is-unread::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tzn-accent);
}
.tzn-kind {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: var(--tzn-hover);
  color: var(--tzn-muted);
}
.tzn-kind--release    { color: #2f9e68; }
.tzn-kind--search     { color: #b7791f; }
.tzn-kind--comment,
.tzn-kind--chat       { color: var(--tzn-accent); }
.tzn-kind--reputation { color: #d6336c; }
.tzn-kind--friend     { color: #0ca678; }
.tzn-kind--moderation { color: #c2410c; }
.tzn-kind--account    { color: var(--tzn-muted); }
.tzn-main { display: flex; flex-direction: column; min-width: 0; padding-right: 14px; }
.tzn-title { font-weight: 600; font-size: .875rem; line-height: 1.3; }
.tzn-body {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--tzn-muted);
  font-size: .8125rem;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tzn-time { margin-top: 3px; color: var(--tzn-muted); font-size: .75rem; }
.tzn-status:empty { display: none; }
.tzn-status { padding: 20px 20px 24px; color: var(--tzn-muted); font-size: .875rem; text-align: center; }
.tzn-foot {
  display: block;
  padding: 11px 16px;
  border-top: 1px solid var(--tzn-line);
  color: var(--tzn-accent);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.tzn-foot:hover { background: var(--tzn-hover); }

/* ---------- история поиска у поля ---------- */
.tzs-box {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1070;
  padding: 6px 0;
  border: 1px solid var(--tzn-line);
  border-radius: 12px;
  background: var(--tzn-bg);
  color: var(--tzn-fg);
  box-shadow: var(--tzn-shadow);
}
.tzs-box[hidden] { display: none; }
.tzs-head {
  display: flex;
  justify-content: space-between;
  padding: 4px 14px 6px;
  color: var(--tzn-muted);
  font-size: .75rem;
}
.tzs-manage { color: var(--tzn-accent); text-decoration: none; }
.tzs-row { display: flex; align-items: center; }
.tzs-row:hover { background: var(--tzn-hover); }
.tzs-pick {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 6px 8px 14px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
}
.tzs-pick > svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--tzn-muted); }
.tzs-q { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tzs-bell, .tzs-del {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tzn-muted);
}
.tzs-bell:hover, .tzs-del:hover { color: var(--tzn-fg); }
.tzs-bell.is-on { color: #b7791f; }

/* ---------- кнопка «Следить» у релиза ---------- */
.tz-relsub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--tzn-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: .875rem;
  transition: background-color .15s ease, border-color .15s ease;
}
.tz-relsub svg { width: 18px; height: 18px; }
.tz-relsub:hover { background: var(--tzn-hover); }
.tz-relsub.is-on { border-color: transparent; background: #2b2f36; color: #fff; }
.tz-relsub .tz-relsub-count { opacity: .7; font-weight: 500; }
.tz-relsub:disabled { opacity: .7; }

/* ---------- страница настроек ---------- */
.tzp-wrap { max-width: 720px; margin: 0 auto; padding: 16px 12px 40px; }
.tzp-title { margin: 8px 0 16px; font-size: 1.5rem; }
.tzp-card {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--tzn-line);
  border-radius: 14px;
  background: var(--tzn-bg);
  scroll-margin-top: 80px;
}
.tzp-h { margin: 0 0 6px; font-size: 1.0625rem; }
.tzp-muted { color: var(--tzn-muted); }
.tzp-small { font-size: .8125rem; }
.tzp-card > .tzp-muted { margin-bottom: 12px; font-size: .875rem; }
.tzp-status { margin: 0 0 12px; }
.tzp-status--on::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #2f9e68; vertical-align: 1px; }
.tzp-status--denied, .tzp-status--ios-install { padding: 10px 12px; border-radius: 10px; background: var(--tzn-hover); font-size: .875rem; }
.tzp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tzp-danger { color: #d93838 !important; }
.tzp-toggle { margin-bottom: 8px; }
.tzp-toggle .form-check-input { cursor: pointer; }
.tzp-toggle.is-locked .form-check-input { cursor: default; opacity: .6; }
.tzp-toggle.is-locked .form-check-label { opacity: 1; }
.tzp-lock {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--tzn-hover);
  color: var(--tzn-muted);
  font-size: .75rem;
  vertical-align: 1px;
}
.tzp-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: .9375rem; }
.tzp-hour { width: auto; min-width: 88px; font-size: 16px; }
.tzp-list { margin: 0 0 4px; padding: 0; list-style: none; }
.tzp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--tzn-line);
}
.tzp-item:first-child { border-top: 0; }
.tzp-item-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.tzp-item-main:hover { color: var(--tzn-accent); }
.tzp-empty { padding: 6px 0; color: var(--tzn-muted); font-size: .875rem; }

@media (max-width: 575.98px) {
  .tzp-card { padding: 16px 14px; }
  .tzp-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-relsub { transition: none; }
}