/* Desktop navbar hover/active states + collapsed (<=991px) nav-link spacing.
   Extracted from navbar.html inline styles (formerly lived in mobile.css). */

.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.navbar-brand:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Overflow "More" trigger (nav_overflow_controller). Kept narrower than a full
   nav item (which carries an inline min-width: 90px) so folding a single link
   into it actually frees row space — a same-width trigger would net zero. */
#main-navbar .nav-overflow-more-toggle {
    min-width: 0;
}

@media (max-width: 991px) {
    .navbar-nav .nav-item {
        margin: 0.25rem 0 !important;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        border-radius: 0.5rem !important;
    }
}

/* Constant mobile notification bell — pinned to the banner's top-right.
   Out of flow (adds no layout space) and outside #page-header-zone so the
   skeleton swap never removes it. White icon already comes from .text-white. */
.notification-bell-mobile {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
    right: calc(env(safe-area-inset-right, 0px) + 0.5rem);
    z-index: 1020;
    margin: 0;
}

/* Not-floating preference (Settings > Notifications): pin the bell in the
   banner's top-right and let it scroll away with the page, matching desktop.
   position:absolute anchors to the document, so the same top/right offsets
   place it over the banner instead of tracking the viewport. */
.notification-bell-mobile.is-static {
    position: absolute;
}

/* Solid backing so the bell stays visible after scrolling past the blue banner.
   Same blue as the banner, so over the banner it blends and looks unchanged;
   over the white app it stays visible. */
.notification-bell-mobile .nav-link,
.notification-bell-mobile .nav-link:hover,
.notification-bell-mobile .nav-link:focus,
.notification-bell-mobile .nav-link.show {
    background-color: var(--primary-color) !important;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Tap feedback: darken and press the bell in slightly while held. */
.notification-bell-mobile .nav-link:active {
    background-color: var(--primary-hover, #063f8c) !important;
    transform: scale(0.92);
}

/* Jingle the bell icon when the dropdown opens (Bootstrap adds .show on tap).
   transform-origin at the top makes it swing like a hung bell. Re-runs each
   open because .show is removed on close and re-added on the next tap. */
.notification-bell-mobile .nav-link .bi-bell {
    display: inline-block;
    transform-origin: top center;
}

.notification-bell-mobile .nav-link.show .bi-bell {
    animation: bell-jingle 0.6s ease-in-out;
}

@keyframes bell-jingle {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(16deg); }
    30%  { transform: rotate(-14deg); }
    45%  { transform: rotate(10deg); }
    60%  { transform: rotate(-7deg); }
    75%  { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}

/* Prominent unread count, modelled on PrivCall/element-call's NotificationBell.
   Fixed min-width/height + line-height keep it a solid pill (not collapsed to
   the digit) so single and double digits read consistently. */
.notification-count-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    border-radius: 10px;
}

/* Swipe-to-dismiss rows. touch-action: pan-y keeps native vertical scrolling
   while the controller owns horizontal drags. Transition animates snap-back
   and the dismiss fling; .is-dragging removes it so the finger tracks 1:1. */
.notification-item {
    touch-action: pan-y;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.15s ease;
}

.notification-item.is-dragging {
    transition: none;
}

/* Tap feedback: the controller adds .is-pressed on pointerdown and clears it on
   release/drag (CSS :active is unreliable on touch WebViews). Beats the bg-light
   utility on the read rows. */
.notification-item.is-pressed {
    background-color: var(--bs-gray-200, #e9ecef) !important;
}