/**
 * Navigation UI Styles
 * Extracted from NavigationUI.js for better maintainability
 * Universal navigation bar for all Kabiri interfaces
 */

/* ========================================
   TOP NAVIGATION BAR
======================================== */
.kabiri-topbar-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-topbar-height, 38px);
    background-color: #fff;
    backdrop-filter: none;
    border-bottom: none;
    display: flex;
    align-items: center;
    padding: 0 16px 0 10px;
    gap: 12px;

    /* Above competing UI panels (chat panel sits at 1000, sidebar
       logo anchor at 1001) so the search-bar dropdown - which is a
       descendant of the topbar with its own z-index of 10002 -
       isn't trapped behind them by the topbar's stacking context.
       Stays below the modal layer (10000) so dialogs still overlay
       the topbar as expected. */
    z-index: 1100;
    box-shadow: none;
}

/* Dark mode topbar */
[data-theme='dark'] .kabiri-topbar-nav {
    background-color: #000;
    border: none;
    box-shadow: none;
}

/* Logo */
.kabiri-logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    cursor: pointer;
}

.kabiri-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    cursor: pointer;
    transform: rotate(-90deg) scaleY(-1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kabiri-logo-img:hover {
    transform: rotate(-90deg) scaleY(-1) scale(1.05);
}

/* Logo theme switching */
[data-theme='dark'] .kabiri-logo-light {
    display: none;
}

[data-theme='dark'] .kabiri-logo-dark {
    display: block !important;
}

[data-theme='light'] .kabiri-logo-dark,
:root:not([data-theme]) .kabiri-logo-dark {
    display: none;
}

[data-theme='light'] .kabiri-logo-light,
:root:not([data-theme]) .kabiri-logo-light {
    display: block !important;
}

/* Brand Text */
.kabiri-brand-text {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--text-primary);
    cursor: pointer;
    transition: opacity 0.2s;
    display: none;
}

.kabiri-logo-container:hover .kabiri-brand-text {
    opacity: 0.8;
}

/* ========================================
   SEARCH BAR (Amazon-style)
======================================== */
.kabiri-search-container {
    width: 240px;
    min-width: 180px;
    max-width: 320px;
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: visible;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kabiri-search-container:focus-within {
    border-color: #9ca3af;
    box-shadow: 0 0 0 2px rgb(156 163 175 / 15%);
}

/* Large screens: wider search */
@media (width >= 1400px) {
    .kabiri-search-container {
        width: 300px;
        max-width: 360px;
    }
}

/* Medium screens */
@media (width >= 1024px) and (width <= 1399px) {
    .kabiri-search-container {
        width: 240px;
        max-width: 300px;
    }
}

/* Tablet */
@media (width >= 769px) and (width <= 1023px) {
    .kabiri-search-container {
        width: 200px;
        min-width: 160px;
        max-width: 240px;
    }
}

/* Filter Dropdown Button (Left) */
.kabiri-search-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px 0 10px;
    background: #e5e7eb;
    border: none;
    border-right: 1px solid #d1d5db;
    border-radius: 5px 0 0 5px;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}

.kabiri-search-filter:hover {
    background: #d1d5db;
}

.kabiri-search-filter-text {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kabiri-search-filter-arrow {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Filter Dropdown Menu */
.kabiri-search-filter-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 140px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    z-index: 10003;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s ease-out;
}

.kabiri-search-filter-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kabiri-filter-option {
    padding: 10px 14px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s;
}

.kabiri-filter-option:first-child {
    border-radius: 7px 7px 0 0;
}

.kabiri-filter-option:last-child {
    border-radius: 0 0 7px 7px;
}

.kabiri-filter-option:hover {
    background: #f3f4f6;
}

.kabiri-filter-option.active {
    background: #f3f4f6;
    color: #374151;
    font-weight: 600;
}

/* Search Icon (Left - behind placeholder text) */
.kabiri-search-icon-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #e5e7eb;
    border-right: 1px solid #d1d5db;
    flex-shrink: 0;
    pointer-events: none;
}

.kabiri-search-icon-left .icon {
    width: 16px;
    height: 16px;
    stroke: #6b7280;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Search Input */
.kabiri-search-input {
    flex: 1;
    height: 26px;
    border: none;
    background: transparent;
    padding: 0 10px;
    font-size: 12px;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
    color: #111827;
    outline: none;
    min-width: 0;
    caret-color: transparent;
}

.kabiri-search-input:focus {
    caret-color: #111827;
}

.kabiri-search-input::placeholder {
    color: #9ca3af;
}

/* Search Button (Right - Magnifier) */
.kabiri-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 26px;
    background: #fff;
    border: none;
    border-left: 1px solid #d1d5db;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.kabiri-search-btn:hover {
    background: #f9fafb;
}

.kabiri-search-btn:active {
    background: #f3f4f6;
}

.kabiri-search-btn .icon {
    width: 18px;
    height: 18px;
    stroke: #6b7280;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hide old search icon */
.kabiri-search-icon {
    display: none;
}

/* ========================================
   RESIZE DIVIDER - HIDDEN
   Removed for fixed layout. Search and ticker
   now have fixed/adaptive widths.
======================================== */
.kabiri-resize-divider {
    display: none !important;
}

.kabiri-resize-handle {
    display: none !important;
}

/* ========================================
   SECTION INDICATOR
======================================== */
.kabiri-section-indicator {
    display: none;
}

/* ========================================
   ANIMATED NEWS TICKER
======================================== */
.kabiri-news-ticker {
    flex: 1 1 0;
    min-width: 150px;
    max-width: none;
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 10px 0 6px;
    margin-left: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.011em;
    color: #1a1a1a;
    overflow: hidden;
    position: relative;
    cursor: default;
    transition: background 0.2s ease;
}

/* Large screens: ticker takes remaining space */
@media (width >= 1400px) {
    .kabiri-news-ticker {
        min-width: 400px;
    }
}

/* Medium screens */
@media (width >= 1024px) and (width <= 1399px) {
    .kabiri-news-ticker {
        min-width: 300px;
    }
}

/* Tablet */
@media (width >= 769px) and (width <= 1023px) {
    .kabiri-news-ticker {
        min-width: 200px;
    }
}

/* Dark mode */
[data-theme='dark'] .kabiri-news-ticker {
    color: #fff;
}

/* Ticker content wrapper */
.kabiri-ticker-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Ticker display */
.ticker-display {
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ticker-display.scrolling {
    animation: tickerScroll 30s linear infinite;
}

.ticker-display.paused {
    animation-play-state: paused;
}

.ticker-separator {
    color: #9ca3af;
    font-weight: normal;
    margin: 0 8px;
}

.ticker-time,
.ticker-date {
    color: inherit;
}

.ticker-headlines {
    color: inherit;
}

/* User-toggled "news off" state. The cycle in NavigationService
   keeps running in the background (cheaper than tearing it down
   and rebuilding on every flip), but the headlines and their
   leading separator are visually removed so only the time and
   date remain. Clicking the ticker brings them back - the click
   target is the whole .ticker-display, with cursor and title
   driven by the same state. */
.ticker-display {
    cursor: pointer;
}

.ticker-display.news-disabled .ticker-headlines,
.ticker-display.news-disabled #ticker-separator-2 {
    display: none !important;
}

/* When news is hidden the wrapper must also stop translating, otherwise
   the still-visible time/date keep drifting left with the scroll
   animation and eventually slide out of view. Override both the
   scrolling animation and the keyframe's translateX so the time/date
   stay pinned to the left edge of the ticker. */
.ticker-display.news-disabled {
    animation: none !important;
    transform: translateY(-50%) !important;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0) translateY(-50%);
    }

    100% {
        transform: translateX(-50%) translateY(-50%);
    }
}

/* News Category Popup */
.news-category-popup {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 40px rgb(0 0 0 / 15%);
    z-index: 10001;
    min-width: 320px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-category-popup.visible {
    opacity: 1;
    visibility: visible;
}

[data-theme='dark'] .news-category-popup {
    background: #1f2937;
    border-color: #374151;
}

.news-category-popup h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

[data-theme='dark'] .news-category-popup h3 {
    color: #f9fafb;
}

.news-category-option {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 6px;
    font-size: 14px;
    color: #374151;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-category-option:hover {
    background: #f3f4f6;
}

.news-category-option.active {
    background: #eef2ff;
    color: #6366f1;
    font-weight: 600;
}

[data-theme='dark'] .news-category-option {
    color: #d1d5db;
}

[data-theme='dark'] .news-category-option:hover {
    background: #374151;
}

[data-theme='dark'] .news-category-option.active {
    background: #312e81;
    color: #a5b4fc;
}

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 20%);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Hide ticker on mobile and tablets */
@media (width <= 1200px) {
    .kabiri-news-ticker {
        display: none;
    }
}

/* ========================================
   ACTION BUTTONS
======================================== */
.kabiri-action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;

    /* Fill the full topbar height so the topbar widget wraps (which use
       `align-self: stretch`) reach the bar's bottom edge, letting their
       dropdowns sit flush against the content panel below. The buttons
       inside stay vertically centred via `align-items: center` above. */
    align-self: stretch;
}

.kabiri-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #6b7280;
    position: relative;
}

.kabiri-action-btn .icon {
    width: var(--nav-icon-size, 15px);
    height: var(--nav-icon-size, 15px);
    stroke: currentcolor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Kabiri avatar in topbar (replaces sign-out button). Tracks
   --nav-profile-size so it scales with the navigation-size setting,
   the same variable the sidebar profile avatar uses. */
.kabiri-topbar-avatar-btn {
    width: var(--nav-profile-size, 30px);
    height: var(--nav-profile-size, 30px);
    border-radius: 50%;
    border: 2px solid #2563eb;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kabiri-topbar-kabiri-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kabiri-action-btn:hover {
    background: #f3f4f6;
    color: #4f46e5;
    transform: translateY(-1px);
}

.kabiri-action-btn:active {
    transform: translateY(0);
}

/* Open/active state: while the button's panel is open (the + create
   menu, notifications, or the to-do panel) the icon keeps the hover
   look so it reads as the currently-active control. */
.kabiri-action-btn.active {
    background: #f3f4f6;
    color: #4f46e5;
}

[data-theme='dark'] .kabiri-action-btn.active {
    background: #2a2b38;
    color: #fff;
}

/* Notification Badge — small unread counter in the top-right corner of
   the bell, replacing the older "turn the whole button red" treatment
   which was loud and didn't communicate count. */
.kabiri-notification-btn {
    position: relative;
}

.kabiri-notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 999px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-primary, #fff);
    letter-spacing: -0.02em;
    pointer-events: none;
}

[data-theme='dark'] .kabiri-notification-badge {
    box-shadow: 0 0 0 2px #000;
}

.kabiri-notification-btn.has-notifications .icon {
    color: var(--text-primary, #111827);
}

.kabiri-notification-btn.notification-flash {
    animation: kabiri-bell-pulse 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes kabiri-bell-pulse {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.15) rotate(-8deg);
    }

    50% {
        transform: scale(1.1) rotate(6deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Sign Out Button - Red styling */
.kabiri-signout-btn {
    color: #ef4444;
}

.kabiri-signout-btn:hover {
    background: rgb(239 68 68 / 10%);
    color: #dc2626;
}

.kabiri-signout-btn .icon {
    stroke: currentcolor;
}

[data-theme='dark'] .kabiri-signout-btn {
    color: #f87171;
}

[data-theme='dark'] .kabiri-signout-btn:hover {
    background: rgb(239 68 68 / 15%);
    color: #fca5a5;
}

/* User Account Dropdown */
.kabiri-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 200px;
    background: rgb(255 255 255 / 98%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgb(229 231 235 / 80%);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    padding: 8px;
    z-index: 10001;
    animation: slideDown 0.2s ease-out;
}

[data-theme='dark'] .kabiri-user-dropdown {
    background: rgb(26 27 35 / 98%);
    border: 1px solid rgb(42 43 56 / 80%);
    box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
}

.kabiri-dropdown-divider {
    height: 1px;
    background: rgb(229 231 235 / 60%);
    margin: 4px 0;
}

[data-theme='dark'] .kabiri-dropdown-divider {
    background: rgb(42 43 56 / 80%);
}

.kabiri-dropdown-item-danger {
    color: #ef4444;
}

.kabiri-dropdown-item-danger:hover {
    background: rgb(239 68 68 / 10%) !important;
    color: #dc2626 !important;
}

[data-theme='dark'] .kabiri-dropdown-item-danger {
    color: #f87171;
}

[data-theme='dark'] .kabiri-dropdown-item-danger:hover {
    background: rgb(239 68 68 / 15%) !important;
    color: #fca5a5 !important;
}

/* Theme Dropdown Container */
.kabiri-theme-dropdown-container {
    position: relative;
}

/* Theme Dropdown Menu */
.kabiri-theme-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgb(255 255 255 / 95%);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 1px solid rgb(229 231 235 / 80%);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    padding: 6px;
    z-index: 10001;
    min-width: auto;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-theme='dark'] .kabiri-theme-dropdown {
    background: rgb(26 27 35 / 95%);
    border-color: rgb(42 43 56 / 80%);
}

/* Theme Option (Icon Only) */
.kabiri-theme-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #374151; /* Dark gray for better visibility in light mode */
}

.kabiri-theme-option svg {
    width: 20px;
    height: 20px;
    stroke: currentcolor;
    fill: none;
    stroke-width: 2;
}

.kabiri-theme-option .icon {
    width: 20px;
    height: 20px;
    stroke: currentcolor;
    fill: none;
    stroke-width: 2;
}

.kabiri-theme-option:hover {
    background: var(--bg-hover);
    color: var(--brand-primary);
}

.kabiri-theme-option:active {
    background: var(--bg-active);
}

/* Dark mode - keep icons visible */
[data-theme='dark'] .kabiri-theme-option {
    color: #d1d5db;
}

/* Theme Toggle - Disabled/Faded State */
.kabiri-theme-toggle.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.kabiri-theme-toggle.disabled::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: #1f2937;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: all;
    cursor: help;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
    z-index: 10000;
}

.kabiri-theme-toggle.disabled::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    border: 6px solid transparent;
    border-bottom-color: #1f2937;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10001;
}

.kabiri-theme-toggle.disabled:hover::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    pointer-events: all;
}

.kabiri-theme-toggle.disabled:hover::before {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* Hide/Show Elements */
.kabiri-hide-desktop {
    display: none;
}

.kabiri-hide-desktop {
    display: none !important;
}

.kabiri-show-mobile-only {
    display: none !important;
}

/* Profile Avatar Button Styles */
.kabiri-profile-avatar-btn {
    padding: 0 !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mobile Avatar Button (between logo and search) */
.kabiri-mobile-avatar-btn {
    padding: 0 !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0 4px 0 0;
}

.kabiri-topbar-avatar {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kabiri-topbar-avatar svg {
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}

/* ========================================
   NEW ITEM DROPDOWN
======================================== */
.kabiri-new-item-dropdown {
    /* Matches the sidebar's Settings popup and Profile dropdown so
       the three top-level chrome menus read as one surface family.
       Container settings are kept in sync with .settings-popup and
       .app-profile-dropdown (radius, padding, glass background,
       layered shadow); item rows mirror .settings-accordion-header
       so a row in any of the three menus looks the same. */
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 220px;
    background: linear-gradient(
        135deg,
        rgb(255 255 255 / 82%) 0%,
        rgb(255 255 255 / 65%) 50%,
        rgb(255 255 255 / 75%) 100%
    );
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: var(--radius-xl);
    box-shadow:
        0 4px 16px rgb(0 0 0 / 6%),
        0 1px 3px rgb(0 0 0 / 4%),
        inset 0 1px 0 rgb(255 255 255 / 70%);
    padding: 14px;
    z-index: 10001;
}

.kabiri-new-item-dropdown-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding: 0 4px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.kabiri-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    user-select: none;
}

.kabiri-dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--brand-primary);
}

.kabiri-dropdown-item .icon,
.kabiri-dropdown-item svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

[data-theme='dark'] .kabiri-new-item-dropdown {
    background: linear-gradient(
        135deg,
        rgb(255 255 255 / 8%) 0%,
        rgb(255 255 255 / 3%) 50%,
        rgb(255 255 255 / 6%) 100%
    );
    border: 1.5px solid rgb(255 255 255 / 10%);
    box-shadow:
        0 4px 16px rgb(0 0 0 / 25%),
        0 1px 3px rgb(0 0 0 / 15%),
        inset 0 1px 0 rgb(255 255 255 / 8%),
        inset 1px 0 0 rgb(255 255 255 / 5%),
        inset 0 -1px 0 rgb(0 0 0 / 15%),
        inset -1px 0 0 rgb(0 0 0 / 8%);
}

/* ========================================
   TOPBAR MINI WIDGET DROPDOWNS (Desktop)
   Calculator / Bookmarks / Timezone surfaced in the topbar, left of F11.
   These hang off the top bar, so they render as the SAME flat surface as
   the top and left side bars: their background tracks --nav-current-color,
   the variable AppInterface.setNavColor() drives from the Appearance
   colour picker (the one that recolours the topbar, sidebar and app shell).
======================================== */
.kabiri-topbar-widget-dropdown {
    position: absolute;

    /* Flush with the content panel's top edge (the topbar's bottom),
       so the panel reads as hanging straight off the top bar. Centred
       horizontally on the icon rather than aligned to its right edge. */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;

    /* Match the bars: same colour, no glass/blur. Falls back to the
       default light bar colour before setNavColor has run. */
    background: var(--nav-current-color, #fff);

    /* Plain hairline for definition against the content area - just an
       edge, no frosted-glass border or elevation glow. */
    border: 1px solid rgb(0 0 0 / 12%);

    /* The top edge matches the bar's colour so the seam between the bar
       and the panel disappears whatever colour the user picks. */
    border-top: 1px solid var(--nav-current-color, #fff);

    /* Square top corners (it joins the bar); keep the bottom corners
       rounded. */
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: none;
    padding: 10px;
    z-index: 10001;
    max-height: min(560px, calc(100vh - var(--nav-topbar-height, 38px) - 8px));
    overflow: auto;
}

.kabiri-tb-calculator {
    width: 260px;
}

.kabiri-tb-bookmarks {
    width: 300px;
}

/* Compact the bookmarks for the dropdown: smaller tiles/icons so ~5 fit
   per row (instead of 2), and trim the top spacing so the grid starts
   higher. The dashboard widget keeps its larger, roomier tiles. */
.kabiri-tb-bookmarks .widget-header {
    margin-bottom: 4px;
}

.kabiri-tb-bookmarks .bookmarks-widget .bookmarks-content {
    padding: 2px 8px 10px;
}

.kabiri-tb-bookmarks .bookmarks-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
}

.kabiri-tb-bookmarks .bookmark-item {
    gap: 4px;
    padding: 6px 2px;
}

.kabiri-tb-bookmarks .bookmark-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 15px;
}

.kabiri-tb-bookmarks .bookmark-name {
    font-size: 10px;
}

.kabiri-tb-timezone {
    width: 320px;
}

/* The timezone dropdown drops the manage (gear) toggle: its only powers
   are reordering and deleting, and both already work directly here - drag
   a card to reorder, hover a card and hit x to remove. (The mobile
   dashboard keeps the gear, since drag/hover aren't available on touch.) */
.kabiri-tb-timezone .tz-manage-btn {
    display: none;
}

/* ========================================
   NEXT-EVENT PILL (desktop, calendar-connected)
======================================== */
.kabiri-event-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    max-width: 220px;
    padding: 0 11px;
    border: none;
    border-radius: 8px;
    background: rgb(0 0 0 / 5%);
    color: var(--text-primary, #374151);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Establish a stacking context + clip so the flash wash (::after) sits
       inside the pill, behind the label, and follows the rounded shape. */
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.kabiri-event-pill:hover {
    background: rgb(0 0 0 / 9%);
    transform: translateY(-1px);
}

.kabiri-event-pill.active {
    background: rgb(0 0 0 / 9%);
}

.kabiri-event-pill.is-empty {
    font-weight: 500;
    opacity: 0.75;
}

/* Lightly flashes the INSIDE of the pill through the final minute before an
   event to grab attention: a translucent green wash fades in and out over
   the pill's surface, behind the label and clipped to its rounded shape.
   Hovering the pill removes this class (silenced for that event). */
.kabiri-event-pill.is-flashing::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgb(22 163 74 / 30%);
    pointer-events: none;
    animation: kabiri-event-pill-flash 1.2s ease-in-out infinite;
}

@keyframes kabiri-event-pill-flash {
    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.kabiri-event-pill-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.kabiri-event-pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme='dark'] .kabiri-event-pill {
    background: rgb(255 255 255 / 9%);
    color: #fff;
}

[data-theme='dark'] .kabiri-event-pill:hover,
[data-theme='dark'] .kabiri-event-pill.active {
    background: rgb(255 255 255 / 16%);
}

/* The pill menu is right-aligned to the pill so its right edge - and the
   next/back arrows that live there - stay in a fixed spot regardless of how
   long the event title is. */
.kabiri-tb-event-pill {
    /* The event pill panel stays right-aligned (not centred like the
       calculator / bookmarks / timezone panels), so cancel the base
       centring transform. */
    right: 0;
    left: auto;
    transform: none;
    width: 240px;
}

.evp-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Title and arrows share the top row: the title takes the space and the
   next/back arrows sit to its right, vertically centred against the subject
   (so they line up with its middle even when the title wraps to two lines). */
.evp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.evp-head .evp-title {
    flex: 1;
    min-width: 0;
}

/* Back / next arrows that step the panel (and the pill) through upcoming
   events. A disabled arrow (e.g. back while showing the next event, since
   earlier events are in the past) fades out. */
.evp-nav {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
}

.evp-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgb(0 0 0 / 6%);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition:
        background 0.15s ease,
        opacity 0.15s ease;
}

.evp-nav-btn:hover:not(:disabled) {
    background: rgb(0 0 0 / 12%);
    color: var(--text-primary);
}

.evp-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.evp-nav-btn svg {
    width: 13px;
    height: 13px;
}

[data-theme='dark'] .evp-nav-btn {
    background: rgb(255 255 255 / 10%);
    color: #d1d5db;
}

[data-theme='dark'] .evp-nav-btn:hover:not(:disabled) {
    background: rgb(255 255 255 / 18%);
    color: #fff;
}

.evp-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.evp-time {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}

.evp-loc {
    font-size: 11.5px;
    color: var(--text-tertiary, #9ca3af);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Time on the left, "See more / See less" attendee toggle on the right. */
.evp-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.evp-seemore {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-primary, #1433d2);
    cursor: pointer;
}

.evp-seemore:hover {
    text-decoration: underline;
}

/* Attendee list, revealed between the time row and the View / Join actions. */
.evp-attendees {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
    max-height: 140px;
    overflow-y: auto;
}

.evp-attendee {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 11.5px;
    color: var(--text-secondary, #6b7280);
}

.evp-att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evp-att-org {
    color: var(--text-tertiary, #9ca3af);
    font-weight: 600;
}

.evp-att-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-tertiary, #9ca3af);
}

.evp-att-yes {
    background: #16a34a;
}

.evp-att-no {
    background: #dc2626;
}

.evp-att-maybe {
    background: #d97706;
}

.evp-att-none {
    background: var(--border-light, #d1d5db);
}

.evp-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.evp-btn {
    flex: 1;
    height: 30px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.evp-btn:hover {
    filter: brightness(0.96);
}

.evp-view {
    background: rgb(0 0 0 / 6%);
    color: var(--text-primary);
}

/* Join is green so it reads as the "go" action next to View. */
.evp-join {
    background: #16a34a;
    color: #fff;
}

[data-theme='dark'] .evp-join {
    background: #22c55e;
    color: #04130a;
}

[data-theme='dark'] .evp-view {
    background: rgb(255 255 255 / 12%);
    color: #fff;
}

.evp-empty {
    padding: 6px 2px;
    font-size: 12px;
    color: var(--text-tertiary, #9ca3af);
    text-align: center;
}

[data-theme='dark'] .kabiri-topbar-widget-dropdown {
    /* Plain solid panel - same flat colour as the dark bars (it joins the
       bar seamlessly since both are the nav colour). No frosted-glass
       edge highlight and no drop shadow: in dark mode that translucent
       white border read as a glass card, which we don't want here. */
    background: var(--nav-current-color, #000);
    border: none;
    box-shadow: none;
}

/* The dropdown panel already provides the surface, so the embedded
   widget card renders transparent, borderless and compact - the full-size
   dashboard/mobile rendering is untouched (these overrides are scoped to the
   dropdown). */

/* Strip ALL card chrome inside the topbar dropdown - the dropdown panel
   is the surface, so the embedded widget must be fully transparent: no
   glass background, border, shadow, or the specular ::before / ::after
   highlights. The dark-mode .dashboard-card rules ship in an injected
   \3c style> that would win on source order at equal specificity, so the
   dark variants here carry the extra ancestor to out-specify them. */
.kabiri-topbar-widget-dropdown .dashboard-card,
[data-theme='dark'] .kabiri-topbar-widget-dropdown .dashboard-card {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 4px;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

.kabiri-topbar-widget-dropdown .dashboard-card::before,
.kabiri-topbar-widget-dropdown .dashboard-card::after,
[data-theme='dark'] .kabiri-topbar-widget-dropdown .dashboard-card::before,
[data-theme='dark'] .kabiri-topbar-widget-dropdown .dashboard-card::after {
    display: none;
}

/* ...and keep it stripped on hover. The widget's default .dashboard-card:hover
   re-introduces a lifted, rounded, shadowed card - which read as a separate
   container floating on the panel. The panel IS the surface, so the embedded
   widget stays flat and flush on hover too: no shadow, lift, or border. */
.kabiri-topbar-widget-dropdown .dashboard-card:hover,
[data-theme='dark'] .kabiri-topbar-widget-dropdown .dashboard-card:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

/* The topbar mini-widget panels drop the widget chrome - no header icon
   and no title/name. (The dashboard/mobile renderings keep theirs.) */
.kabiri-topbar-widget-dropdown .widget-icon,
.kabiri-topbar-widget-dropdown .widget-title {
    display: none;
}

/* The calculator's icon + title are hidden in the dropdown; its header
   carries only the (always-visible) History toggle on the right, so
   collapse the empty left side and keep a small gap below it. */
.kabiri-tb-calculator .widget-header {
    margin-bottom: 8px;
}

.kabiri-tb-calculator .widget-header-left {
    display: none;
}

/* Stretch the wrap to the full topbar height so the dropdown's
   `top: 100%` lands exactly on the content panel's top edge (the topbar's
   bottom), while the button stays vertically centred inside it. */
.kabiri-topbar-widget-wrap {
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* Topbar mini widgets are desktop-only; hide their buttons on mobile/tablet
   (matches the isDesktop() > 768px gate used by the JS side). */
@media (width <= 768px) {
    .kabiri-topbar-widget-wrap {
        display: none;
    }
}

/* ========================================
   HAMBURGER DROPDOWN MENU
======================================== */
.kabiri-hamburger-menu {
    position: fixed;
    top: 38px;
    right: 0;
    width: 320px;
    max-height: 70vh;
    background: rgb(255 255 255 / 95%);
    backdrop-filter: blur(20px) saturate(180%);
    border-left: 1px solid rgb(229 231 235 / 80%);
    border-bottom: 1px solid rgb(229 231 235 / 80%);
    border-bottom-left-radius: 16px;
    box-shadow: -2px 4px 12px rgb(0 0 0 / 8%);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.kabiri-hamburger-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kabiri-menu-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(70vh - 24px);
    overflow: hidden auto;
}

.kabiri-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #374151;
    font-size: 15px;
    font-weight: 500;
}

.kabiri-menu-item .icon {
    width: 20px;
    height: 20px;
    stroke: currentcolor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.kabiri-menu-item:hover {
    background: #f3f4f6;
    color: #4f46e5;
    transform: translateX(-2px);
}

.kabiri-menu-item:active {
    transform: translateX(-1px);
    background: #e5e7eb;
}

/* Locked menu item state */
.kabiri-menu-item.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.kabiri-menu-item.locked:hover {
    background: transparent;
    color: #374151;
    transform: none;
}

.kabiri-menu-item.locked:active {
    transform: none;
    background: transparent;
}

/* Menu divider */
.kabiri-menu-divider {
    height: 1px;
    background: rgb(229 231 235 / 80%);
    margin: 6px 12px;
}

/* Theme toggle in menu */
.kabiri-theme-menu-item .kabiri-theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kabiri-theme-menu-item .kabiri-theme-icon .icon {
    width: 20px;
    height: 20px;
}

/* ========================================
   PROFILE DROPDOWN (MOBILE)
======================================== */
.kabiri-profile-dropdown-mobile {
    position: fixed;
    top: 38px;
    left: 16px;
    background: rgb(255 255 255 / 98%);
    backdrop-filter: blur(20px);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
    min-width: 200px;
    overflow: hidden;
    z-index: 9999;
    animation: slideDownFadeIn 0.2s ease-out;
}

@keyframes slideDownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-theme='dark'] .kabiri-profile-dropdown-mobile {
    background: rgb(26 27 35 / 98%);
    border: 1px solid rgb(42 43 56 / 80%);
    box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

.profile-dropdown-item:hover {
    background: var(--bg-hover);
}

.profile-dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

.profile-dropdown-item.danger {
    color: #ef4444;
}

.profile-dropdown-item.danger:hover {
    background: rgb(239 68 68 / 10%);
}

/* ========================================
   NOTIFICATION DROPDOWN (rebuild 2026-05)
   New class prefix: `.kn-*`. The legacy `.notification-*` classes have
   been retired alongside NotificationTemplates.js v2.
======================================== */
.notification-dropdown {
    position: fixed;
    width: 400px;
    max-height: min(600px, calc(100vh - 72px));
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-light, rgb(0 0 0 / 8%));
    border-radius: 14px;
    box-shadow:
        0 12px 32px rgb(0 0 0 / 12%),
        0 2px 6px rgb(0 0 0 / 6%);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.18s ease,
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notification-dropdown.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[data-theme='dark'] .notification-dropdown {
    background: #15161f;
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 12px 32px rgb(0 0 0 / 60%);
}

.kn-dropdown-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

/* ── Header ── */
.kn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    flex-shrink: 0;
}

.kn-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kn-header-title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary, #111827);
}

.kn-unread-pill {
    background: var(--brand-primary, #4a66e6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1.4;
}

.kn-header-actions {
    display: flex;
    gap: 4px;
}

.kn-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    border-radius: 8px;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.kn-icon-btn:hover {
    background: var(--bg-hover, rgb(0 0 0 / 5%));
    color: var(--text-primary, #111827);
}

/* ── Filter chips ── */
.kn-filters {
    display: flex;
    gap: 4px;
    padding: 0 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}

.kn-filters::-webkit-scrollbar {
    display: none;
}

.kn-filter {
    flex-shrink: 0;
    padding: 5px 11px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    font-weight: 500;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.kn-filter:hover {
    background: var(--bg-hover, rgb(0 0 0 / 4%));
    color: var(--text-primary, #111827);
}

.kn-filter.is-active {
    background: var(--text-primary, #111827);
    color: var(--bg-primary, #fff);
    font-weight: 600;
}

[data-theme='dark'] .kn-filter.is-active {
    background: #fff;
    color: #15161f;
}

/* ── List ── */
.kn-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px;
    min-height: 0;
}

.kn-list::-webkit-scrollbar {
    width: 6px;
}

.kn-list::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 12%);
    border-radius: 3px;
}

/* ── Row ── */
.kn-item {
    position: relative;
    display: grid;
    grid-template-columns: 4px 32px 1fr auto;
    column-gap: 10px;
    align-items: start;
    padding: 12px 12px 12px 8px;
    border-radius: 10px;
    margin: 2px 0;
    cursor: pointer;
    transition: background 0.15s;
}

.kn-item:hover {
    background: var(--bg-hover, rgb(0 0 0 / 4%));
}

.kn-item.is-unread {
    background: color-mix(in srgb, var(--source-color) 6%, transparent);
}

.kn-item.is-unread:hover {
    background: color-mix(in srgb, var(--source-color) 10%, transparent);
}

.kn-item-stripe {
    grid-column: 1;
    align-self: stretch;
    width: 3px;
    border-radius: 2px;
    background: var(--source-color, transparent);
    opacity: 0;
    transition: opacity 0.15s;
}

.kn-item.is-unread .kn-item-stripe {
    opacity: 1;
}

.kn-item-icon {
    grid-column: 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--source-color) 12%, transparent);
    color: var(--source-color, currentColor);
    flex-shrink: 0;
}

.kn-item-body {
    grid-column: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kn-item-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kn-item-source {
    color: var(--source-color, currentColor);
    font-weight: 600;
}

.kn-item-count {
    background: var(--source-color, #6b7280);
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.kn-item-time {
    margin-left: auto;
    color: var(--text-tertiary, #9ca3af);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.kn-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kn-item-message {
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Click-to-expand: the bell dropdown keeps a 2-line preview for scanning,
   but clicking a row opens it in place so long titles/messages are fully
   readable without leaving the dropdown. */
.kn-item.is-expanded .kn-item-title,
.kn-item.is-expanded .kn-item-message {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    text-overflow: clip;
}

.kn-item.is-expanded .kn-item-message {
    white-space: pre-wrap;
}

/* Hint that a dropdown row body is interactive (expandable). */
#notification-dropdown .kn-item-body {
    cursor: pointer;
}

.kn-item-actions {
    grid-column: 4;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    align-self: center;
}

.kn-item:hover .kn-item-actions,
.kn-item:focus-within .kn-item-actions {
    opacity: 1;
}

.kn-item-action {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #9ca3af);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.kn-item-action:hover {
    background: rgb(0 0 0 / 6%);
    color: var(--text-primary, #111827);
}

[data-notification-action='toggle-read'] {
    color: var(--source-color, #9ca3af);
}

.kn-item:not(.is-unread) [data-notification-action='toggle-read'] {
    color: var(--text-tertiary, #d1d5db);
}

/* ── Empty state ── */
.kn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
    text-align: center;
    color: var(--text-tertiary, #9ca3af);
}

.kn-empty-icon {
    margin-bottom: 12px;
    opacity: 0.5;
}

.kn-empty-text {
    font-size: 13.5px;
    color: var(--text-secondary, #6b7280);
}

/* ── Footer ── */
.kn-footer {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--border-light, rgb(0 0 0 / 6%));
    text-align: center;
    flex-shrink: 0;
}

.kn-footer-link {
    background: transparent;
    border: none;
    color: var(--brand-primary, #4a66e6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: inherit;
    transition: background 0.15s;
}

.kn-footer-link:hover {
    background: color-mix(in srgb, var(--brand-primary, #4a66e6) 10%, transparent);
}

/* ── Settings panel ── */
.kn-settings-panel {
    position: absolute;
    inset: 0;
    background: var(--bg-primary, #fff);
    display: flex;
    flex-direction: column;
    z-index: 2;
    border-radius: 14px;
    overflow: hidden;
    animation: kn-slide-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* `display: flex` above wins over the user-agent `[hidden] { display: none }`
   rule because class selectors outrank the attribute presence in the cascade,
   so without this override the panel renders on top of the notification list
   as soon as the dropdown opens - exactly what toggle-settings is meant to do
   later. Re-assert the hidden state with equal specificity so the bell opens
   on the list view and the settings button drives the toggle. */
.kn-settings-panel[hidden] {
    display: none;
}

[data-theme='dark'] .kn-settings-panel {
    background: #15161f;
}

@keyframes kn-slide-in {
    from {
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.kn-settings-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light, rgb(0 0 0 / 6%));
    flex-shrink: 0;
}

.kn-settings-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.kn-settings-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.kn-settings-section {
    padding: 12px 16px;
    flex-shrink: 0;
}

.kn-settings-section:not(:last-child) {
    border-bottom: 1px solid var(--border-light, rgb(0 0 0 / 6%));
}

.kn-settings-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

/* Collapsible section header (Team activity). Reuses the section-title
   typography but turns the row into a full-width clickable button with a
   chevron, since the Team activity section carries 13 toggles and ships
   collapsed to keep the panel scannable. */
.kn-settings-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 2px 0;
    margin-bottom: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kn-settings-accordion-header:hover {
    color: var(--text-secondary, #6b7280);
}

.kn-settings-accordion-chevron {
    flex-shrink: 0;
    color: currentcolor;
    transition: transform 0.2s ease;
}

.kn-settings-accordion-header.open .kn-settings-accordion-chevron {
    transform: rotate(180deg);
}

.kn-settings-accordion-body {
    margin-top: 6px;
}

.kn-settings-accordion-body[hidden] {
    display: none;
}

.kn-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.kn-setting-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary, #111827);
}

.kn-setting-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

.kn-setting-subgroup {
    margin: 4px 0 0 14px;
    padding-left: 12px;
    border-left: 2px solid var(--border-light, rgb(0 0 0 / 8%));
    transition: opacity 0.15s;
}

.kn-setting-subgroup.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.kn-setting-subgroup-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 0 2px;
}

.kn-setting-subitem {
    padding: 5px 0;
}

.kn-setting-subitem span {
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
}

.kn-setting-subitem .kn-toggle {
    width: 30px;
    height: 17px;
}

.kn-setting-subitem .kn-toggle-thumb {
    width: 13px;
    height: 13px;
}

.kn-setting-subitem .kn-toggle.is-on .kn-toggle-thumb {
    transform: translateX(13px);
}

/* ── Toggle ── */
.kn-toggle {
    width: 36px;
    height: 20px;
    background: #d1d5db;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    position: relative;
    transition: background 0.18s;
    padding: 0;
    flex-shrink: 0;
}

.kn-toggle.is-on {
    background: var(--brand-primary, #4a66e6);
}

.kn-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}

.kn-toggle.is-on .kn-toggle-thumb {
    transform: translateX(16px);
}

[data-theme='dark'] .kn-toggle {
    background: #33343f;
}

/* ── Mobile ── */
@media (width <= 768px) {
    .notification-dropdown {
        width: calc(100vw - 16px);
        max-width: 420px;
        max-height: calc(100vh - 80px);
    }

    .kn-item {
        padding: 12px 8px;
    }

    .kn-item-actions {
        opacity: 1; /* always show on touch */
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .notification-dropdown,
    .kn-settings-panel,
    .kn-toggle-thumb {
        transition: none;
        animation: none;
    }
}

/* ========================================
   DARK MODE
======================================== */
[data-theme='dark'] .kabiri-topbar-nav {
    background: #000;
    border-bottom: none;
}

[data-theme='dark'] .kabiri-section-indicator {
    display: none;
}

[data-theme='dark'] .kabiri-hamburger-menu {
    background: rgb(26 27 35 / 95%);
    border-left: 1px solid rgb(42 43 56 / 80%);
    border-bottom: 1px solid rgb(42 43 56 / 80%);
}

[data-theme='dark'] .kabiri-menu-divider {
    background: rgb(42 43 56 / 80%);
}

[data-theme='dark'] .kabiri-search-input {
    background: #2a2b38;
    border-color: #33343f;
    color: #e8e9f0;
}

[data-theme='dark'] .kabiri-search-input:focus {
    background: #222330;
    border-color: #6366f1;
}

[data-theme='dark'] .kabiri-action-btn {
    color: #e8eaf0;
}

[data-theme='dark'] .kabiri-action-btn:hover {
    background: #2a2b38;
    color: #fff;
}

[data-theme='dark'] .kabiri-menu-item {
    color: #d4d6e0;
}

[data-theme='dark'] .kabiri-menu-item:hover {
    background: #2a2b38;
    color: #fff;
}

[data-theme='dark'] .kabiri-menu-item:active {
    background: #33343f;
}

[data-theme='dark'] .kabiri-menu-item.locked:hover {
    background: transparent;
    color: #d4d6e0;
}

[data-theme='dark'] .kabiri-menu-item.locked:active {
    background: transparent;
}

/* ========================================
   SEARCH DROPDOWN (Amazon-style)
======================================== */

/* Flashing cursor - REMOVED (hidden) */
.kabiri-search-cursor {
    display: none;
}

/* Search container when dropdown is open */
.kabiri-search-container.dropdown-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #9ca3af;
}

.kabiri-search-container.dropdown-open .kabiri-search-btn {
    border-radius: 0;
}

.kabiri-search-container.dropdown-open .kabiri-search-filter {
    border-radius: 6px 0 0;
}

/* Search dropdown */
.kabiri-search-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: -2px;
    right: -2px;
    background: var(--bg-primary, white);
    border: 2px solid #d1d5db;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    max-height: 400px;
    overflow: hidden auto;
    z-index: 10002;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s ease-out;
}

.kabiri-search-dropdown.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kabiri-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.kabiri-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.kabiri-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-light, #e5e7eb);
    border-radius: 3px;
}

/* Section headers */
.search-dropdown-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 4px;
    background: var(--bg-secondary, #f9fafb);
    position: sticky;
    top: 0;
    z-index: 1;
}

.search-dropdown-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-dropdown-count {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, #9ca3af);
    background: var(--bg-hover, #f3f4f6);
    padding: 1px 6px;
    border-radius: 100px;
}

/* Dropdown items */
.search-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s;
    position: relative;
}

.search-dropdown-item:hover,
.search-dropdown-item.selected {
    background: var(--bg-hover, #f3f4f6);
}

.search-dropdown-item.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--brand-primary, #4f46e5);
}

.search-dropdown-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-tertiary, #9ca3af);
    flex-shrink: 0;
}

/* Result type colors */
.search-dropdown-icon.type-clients {
    background: rgb(59 130 246 / 10%);
    color: #3b82f6;
}

.search-dropdown-icon.type-companies {
    background: rgb(139 92 246 / 10%);
    color: #8b5cf6;
}

.search-dropdown-icon.type-files {
    background: rgb(34 197 94 / 10%);
    color: #22c55e;
}

.search-dropdown-icon.type-notes {
    background: rgb(249 115 22 / 10%);
    color: #f97316;
}

.search-dropdown-icon.type-emails {
    background: rgb(236 72 153 / 10%);
    color: #ec4899;
}

.search-dropdown-icon.type-calendar {
    background: rgb(14 165 233 / 10%);
    color: #0ea5e9;
}

.search-dropdown-icon.type-projects {
    background: rgb(168 85 247 / 10%);
    color: #a855f7;
}

.search-dropdown-icon.type-team {
    background: rgb(20 184 166 / 10%);
    color: #14b8a6;
}

.search-dropdown-icon.type-bookmarks {
    background: rgb(107 114 128 / 10%);
    color: #6b7280;
}

.search-dropdown-icon.type-invoices {
    background: rgb(16 185 129 / 10%);
    color: #10b981;
}

.search-dropdown-icon.type-business {
    background: rgb(99 102 241 / 10%);
    color: #6366f1;
}

.search-dropdown-icon.type-preferences {
    background: rgb(107 114 128 / 10%);
    color: #6b7280;
}

.search-dropdown-text {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-dropdown-hint {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    white-space: nowrap;
}

.search-dropdown-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-dropdown-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-dropdown-subtitle {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Remove button for recent searches */
.search-dropdown-remove {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: all 0.1s;
}

.search-dropdown-item:hover .search-dropdown-remove {
    opacity: 1;
}

.search-dropdown-remove:hover {
    background: var(--bg-active, #e5e7eb);
    color: var(--text-primary, #111827);
}

/* Empty state */
.search-dropdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    text-align: center;
    gap: 8px;
}

.search-empty-icon {
    font-size: 24px;
    opacity: 0.5;
}

.search-dropdown-empty span {
    font-size: 13px;
    color: var(--text-tertiary, #9ca3af);
}

/* Footer */
.search-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--border-light, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    gap: 8px;
}

.search-hint-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.search-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--bg-primary, white);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    font-family: inherit;
}

.search-result-count {
    font-weight: 500;
}

/* Dark mode - Search Container */
[data-theme='dark'] .kabiri-search-container {
    background: #2a2b38;
    border-color: #33343f;
}

[data-theme='dark'] .kabiri-search-container:focus-within {
    border-color: #6b7280;
}

[data-theme='dark'] .kabiri-search-filter {
    background: #33343f;
    border-right-color: #444550;
    color: #d4d6e0;
}

[data-theme='dark'] .kabiri-search-filter:hover {
    background: #444550;
}

[data-theme='dark'] .kabiri-search-filter-menu {
    background: #2a2b38;
    border-color: #33343f;
}

[data-theme='dark'] .kabiri-filter-option {
    color: #d4d6e0;
}

[data-theme='dark'] .kabiri-filter-option:hover {
    background: #33343f;
}

[data-theme='dark'] .kabiri-filter-option.active {
    background: #444550;
    color: #e8e9f0;
}

[data-theme='dark'] .kabiri-search-icon-left {
    background: #33343f;
    border-right-color: #444550;
}

[data-theme='dark'] .kabiri-search-icon-left .icon {
    stroke: #9ca3af;
}

[data-theme='dark'] .kabiri-search-input {
    color: #e8e9f0;
}

[data-theme='dark'] .kabiri-search-input:focus {
    caret-color: #e8e9f0;
}

[data-theme='dark'] .kabiri-search-input::placeholder {
    color: #6b7280;
}

/* Dark mode - Search Dropdown */
[data-theme='dark'] .kabiri-search-dropdown {
    background: var(--bg-primary, #1a1b23);
    border-color: #444550;
    border-top-color: #33343f;
    box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
}

[data-theme='dark'] .kabiri-search-container.dropdown-open {
    border-color: #6b7280;
}

[data-theme='dark'] .search-dropdown-section {
    background: var(--bg-secondary, #222330);
}

[data-theme='dark'] .search-dropdown-item:hover,
[data-theme='dark'] .search-dropdown-item.selected {
    background: var(--bg-hover, #2a2b38);
}

[data-theme='dark'] .search-dropdown-icon {
    background: var(--bg-secondary, #222330);
}

[data-theme='dark'] .search-dropdown-footer {
    background: var(--bg-secondary, #222330);
    border-top-color: var(--border-light, #33343f);
}

[data-theme='dark'] .search-kbd {
    background: var(--bg-primary, #1a1b23);
    border-color: var(--border-light, #33343f);
}