/* shared/topbar.css
 * ─────────────────────────────────────────────────────────────────────
 * Pixel-locked sizing for the desktop top-bar Alerts/Messages cluster
 * painted by shared/topbar.js. Required because the dating-site pages
 * load tailwind in TWO different ways:
 *
 *   - notifications.html  → CDN tailwind (https://cdn.tailwindcss.com)
 *                           ships with full preflight (Tailwind's
 *                           normalize.css clone) → buttons inherit
 *                           sane defaults for line-height, font-family.
 *   - all other pages     → self-hosted ./styles/tailwind.built.css
 *                           which is utility-only, NO preflight, NO JIT.
 *                           Button text inherits browser defaults
 *                           (line-height ~normal, often 1.2 in some
 *                           UAs) → vertical padding effectively shrinks
 *                           and the pill renders SQUASHED compared to
 *                           the same markup on the CDN page.
 *
 * User report 2026-05-13 (3 screenshots side-by-side):
 *   - user.html / settings.html / index.html#swipes — squashed pills
 *   - notifications.html — taller, normal pills
 *
 * Fix: pin every visual property explicitly on `.spark-topbar-link`
 * (the marker class topbar.js puts on both <a> elements) so the
 * cluster renders identically across both tailwind bundles. !important
 * because Tailwind utility classes already on the elements would
 * otherwise win on equal specificity.
 *
 * Loaded via <link rel="stylesheet"> on every page that mounts the
 * topbar. Stays small + scoped — no leakage into surrounding styles.
 * ───────────────────────────────────────────────────────────────────── */

.spark-topbar-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  /* Explicit min-height so a missing preflight can't collapse the
     button. 40px = 0.5rem*2 (padding) + 24px (1.5em line-height @ 16px). */
  min-height: 40px !important;
  border-radius: 9999px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  position: relative !important;
  /* Smooth feel-good transition matches the .flat-btn baseline used
     elsewhere on the site. */
  transition:
    transform 0.15s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease !important;
}

/* Icons inside the cluster — ensure consistent 20×20 even if the
   Tailwind w-5/h-5 utilities were shadowed by a missing preflight
   reset on <i>/<svg>. */
.spark-topbar-link i,
.spark-topbar-link svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* Tap-feedback animation matching .flat-btn:active across the site. */
.spark-topbar-link:active {
  transform: scale(0.96) !important;
}

/* 2026-05-14 v6 (user "блять ты все еще не унифицировал нижнюю шапку
   на мобилах, они разные по размеру"): per-page tailwind config /
   inline styles were leaking different colours into the mobile nav
   (text-burgundy resolved to different shades on different pages —
   notifications.html ships its own inline tailwind config that
   overrides the project palette). Force EXACT colours on every
   mobile nav link regardless of any page-level CSS so all four
   pages render byte-identical. Active item gets crimson, idle gets
   burgundy, no in-between. */
/* Wrapper itself — pin EVERY visual property so the canonical mobile
   nav looks identical regardless of which Tailwind bundle the page
   loaded (different bundles resolve `border-blushDark` to slightly
   different shades). User report 2026-05-14: "верхняя линия на шапке
   должна быть как в alerts но везде". */
nav[data-spark-mobilenav],
div[data-spark-mobilenav] {
  background-color: var(--c-blush, #FFF0F5) !important;
  border-top: 2px solid var(--c-blush-dark, #F2DDE4) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

[data-spark-mobilenav] a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
  color: var(--c-burgundy, #5C0923) !important;
  text-decoration: none !important;
  font-family: 'Nunito', sans-serif !important;
  position: relative !important;
  flex: 1 !important;
  min-width: 0 !important;
}
[data-spark-mobilenav] a.text-crimson {
  color: var(--c-crimson, #D91A4D) !important;
}
[data-spark-mobilenav] a > span:not(.msg-counter):not([id^="notif-"]):not([id^="msg-"]) {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
[data-spark-mobilenav] a > i,
[data-spark-mobilenav] a > svg {
  width: 20px !important;
  height: 20px !important;
  color: inherit !important;
  stroke: currentColor !important;
}
/* The Spark/Swipes star icon is `<svg fill="currentColor">` so the
   gateClass-injected text-crimson cascades through to the fill too. */
[data-spark-mobilenav] a > svg path {
  fill: currentColor !important;
}
/* Badges inside mobile nav links — same canonical 20×20 dot used on
   the desktop cluster. */
[data-spark-mobilenav] a > #notif-badge-mobile,
[data-spark-mobilenav] a > #msg-counter-mobile,
[data-spark-mobilenav] a > .msg-counter {
  position: absolute !important;
  top: -2px !important;
  right: calc(50% - 24px) !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 9999px !important;
  background: var(--c-crimson, #D91A4D) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 2px var(--c-blush, #FFF0F5) !important;
}

/* 2026-05-13 v4 (user "Bell без надписи + Profile без надписи"):
   icon-only square button used for Bell + Profile in the desktop
   cluster. Same colour scheme + hover behaviour as the pill, but
   40×40 square (matches the height of the text pill so the row
   stays visually aligned). Marker class layered ON TOP of
   `.spark-topbar-link` so it can override only the geometry.

   2026-05-14 (user "убери обводку для колокольчика и профиля"):
   no fill background on the IDLE state — just an icon floating on
   the header bg. Active state (current page = profile or
   notifications) keeps the crimson fill so "you're here" stays
   obvious. Hover lights up the icon colour without painting a pill. */
.spark-topbar-link.spark-topbar-icon-btn,
.spark-topbar-icon-btn {
  /* Geometry — perfect 40×40 circle, matches text-pill height so the
     row stays aligned. */
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  font-size: 0 !important;
  /* CHROME — fully transparent idle. No fill, no border, no shadow.
     Just a coloured icon floating on the header bg. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Idle icon colour = burgundy text colour (matches the .text-burgundy
     used elsewhere on the site). */
  color: var(--c-burgundy, #5C0923) !important;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
/* Hover — icon ярчает + faint accent halo so the click target is
   obvious without the resting "pill outline" look the user complained
   about ("убери обводку для колокольчика и профиля"). */
.spark-topbar-link.spark-topbar-icon-btn:hover,
.spark-topbar-icon-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--c-crimson, #D91A4D) !important;
}
/* Active state — current page (page === 'notifications' for Bell, or
   page === 'user' for Profile). Icon colour locked crimson, no fill
   so it stays consistent with the no-outline policy at rest. */
.spark-topbar-link.spark-topbar-icon-btn.spark-topbar-icon-active,
.spark-topbar-icon-btn.spark-topbar-icon-active {
  color: var(--c-crimson, #D91A4D) !important;
}
.spark-topbar-link.spark-topbar-icon-btn i,
.spark-topbar-link.spark-topbar-icon-btn svg,
.spark-topbar-icon-btn i,
.spark-topbar-icon-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Unread-counter badges (red "6" bubbles in the top-right corner of
 * Alerts/Messages buttons). User report 2026-05-13:
 *   "алерты (кружочки выше кнопок с кол-вом алертов) все разные"
 *
 * Same root cause as the buttons: `notifications.html` had `.msg-counter`
 * defined INLINE in its <style> block; user.html / profile.html /
 * settings.html / index.html / chat.html had NO inline definition →
 * they inherited whatever (or nothing) the page-scoped CSS modules
 * happened to ship → the badges rendered with different sizes /
 * positions / fonts depending on the page.
 *
 * Pin the bubble shape here so every page draws it identically.
 * Targeting both the IDs (set by topbar.js) and the .msg-counter class
 * so any other markup using the same convention also normalizes.
 * ───────────────────────────────────────────────────────────────────── */
/* 2026-05-14 (user "0 уведомлений на секунду появляется но потом
   пропадает"): badges are explicitly hidden when their textContent
   is empty. _paint(0) in chat-badge.js / notif-badge.js will be
   patched to set text='' on zero (not just display:none) so this
   rule kicks in, AND topbar.js no longer injects the initial '0'
   filler — badge starts empty → invisible until a real count > 0
   lands. Belt-and-suspenders against any flash. */
[id^="notif-badge-"]:empty,
[id^="msg-counter-"]:empty,
.msg-counter:empty {
  display: none !important;
}

.spark-topbar-link #notif-badge-desktop,
.spark-topbar-link #msg-counter-desktop,
.spark-topbar-link .msg-counter {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  /* 2026-05-13 v3: kill any inherited border. discover/styles/main.css
     sets `.msg-counter { border-style: solid }` without a width — the
     browser default of `medium` (≈3px) then puffed the badge out to
     ~26×20 ONLY on index.html (the swipes screen) where that file is
     loaded. User: "сплюснутые в swipes а в остальных норм". */
  border: 0 !important;
  border-radius: 9999px !important;
  background: var(--c-crimson, #D91A4D) !important;
  color: #ffffff !important;
  /* 2026-05-14 (user "если 0 уведомлений и 0 сообщений то не показывать
     кружочек, а щас написано 0"): display WITHOUT !important so the
     inline `style="display:none"` set by chat-badge.js / notif-badge.js
     `_paint(total === 0)` actually wins. Stylesheet w/o !important
     loses to inline → badge hides at zero count. align-items + justify-
     content stay !important since they're irrelevant when display:none
     and beneficial when display=flex. */
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  /* z-index above the button background so the bubble doesn't get
     hidden behind any sibling decoration. */
  z-index: 2 !important;
  /* Subtle ring matches the look on notifications.html — gives the
     bubble a clean separation from the host button rim. */
  box-shadow: 0 0 0 2px var(--c-blush, #FFF0F5) !important;
}