/**
 * 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 only on phones - show it in the top bar from tablet width up. */
@media (width <= 768px) {
    .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;

    /* No overflow:hidden here - the usage badge sits outside the
       circle's top-right edge and must not be clipped. The image keeps
       its own rounded clipping below. */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

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

/* Tiny "% used" badge pinned to the top-right of the assistant button.
   Surfaces how much of the rolling 7-day assistant limit is spent so the
   cap is visible before the user opens the chat panel. Tones mirror the
   chat-panel usage meter: brand-blue under 80%, amber 80-99%, red at 100%. */
.kabiri-assistant-usage-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 14px;
    padding: 0 3px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--brand-primary, #1433d2);
    color: #fff;
    border: 1.5px solid var(--app-topbar-bg, #fff);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.kabiri-assistant-usage-badge[hidden] {
    display: none;
}

.kabiri-assistant-usage-badge.is-warn {
    background: #d97706;
}

.kabiri-assistant-usage-badge.is-over {
    background: #dc2626;
}

.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;
}

/* The Tasks toggle is the one tinted topbar control: the Kabiri blue primary
   at rest, while its panel is open, and on hover, so it reads apart from the
   neutral icons. Higher specificity than the generic action-btn rules wins
   without relying on an inline style; the hex fallback guards against an
   unresolved var. Listing :hover here keeps it blue on hover - the base hover
   colour would otherwise tint it indigo - while the hover background + lift
   still signal the hover. --brand-primary is theme-aware, so the icon stays
   Kabiri blue in both light and dark. */
.kabiri-action-btn[data-nav-action='toggle-todo'],
.kabiri-action-btn[data-nav-action='toggle-todo'].active,
.kabiri-action-btn[data-nav-action='toggle-todo']:hover {
    color: var(--brand-primary, #1433d2);
}

[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);
}

/* Tinted light appearances (Green Tiles, Kabiri Ocean): the top-bar "more
   tools" kebab and the notification bell read in the theme's accent
   (--brand-primary - #0E7A5F for Green Tiles, Kabiri Blue #1433D2 for Kabiri
   Ocean), matching the sidebar's tinted nav chrome. The bell stays tinted even
   with unread notifications; the red unread badge is left untouched.
   AppInterface.setNavColor clears these buttons' inline colour on a light nav,
   so these rules win. Mirrors the toggle-todo tint pattern above. */
html[data-appearance='green-tiles'][data-theme='light'] #tb-more-btn,
html[data-appearance='green-tiles'][data-theme='light'] .kabiri-notification-btn,
html[data-appearance='green-tiles'][data-theme='light']
    .kabiri-notification-btn.has-notifications
    .icon,
html[data-appearance='kabiri-ocean'][data-theme='light'] #tb-more-btn,
html[data-appearance='kabiri-ocean'][data-theme='light'] .kabiri-notification-btn,
html[data-appearance='kabiri-ocean'][data-theme='light']
    .kabiri-notification-btn.has-notifications
    .icon {
    color: var(--brand-primary, #0e7a5f);
}

html[data-appearance='green-tiles'][data-theme='light'] #tb-more-btn:hover,
html[data-appearance='green-tiles'][data-theme='light'] .kabiri-notification-btn:hover,
html[data-appearance='kabiri-ocean'][data-theme='light'] #tb-more-btn:hover,
html[data-appearance='kabiri-ocean'][data-theme='light'] .kabiri-notification-btn:hover {
    color: var(--brand-primary, #0e7a5f);
}

.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;
}

/* The kebab launcher ("...") that gathers the mini widgets + Fullscreen. Its
   "..." menu and tool panels both anchor to this button, which sits near the
   right edge of the bar, so right-align them (like the event-pill panel)
   instead of centring on the icon - a wide panel centred here would spill off
   the viewport. */
.kabiri-tb-more-wrap .kabiri-topbar-widget-dropdown {
    left: auto;
    right: 0;
    transform: none;
}

/* The "..." options menu shares the flat tool-panel surface
   (.kabiri-topbar-widget-dropdown) with the Calculator / Bookmarks / Timezone
   dropdowns, so every topbar dropdown hangs off the bar as one family. Only the
   width and the trailing keyboard hint below are bespoke. */
.kabiri-tb-more-menu {
    width: 200px;
}

/* Keyboard-shortcut hint trailing a menu row (e.g. F11 on Fullscreen). Pushed
   to the right edge; the bordered chip echoes the old F11 button and tints
   with the row on hover via currentColor. */
.kabiri-tb-more-menu .kabiri-dropdown-hint {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    padding: 2px 5px;
    border: 1.5px solid currentcolor;
    border-radius: 4px;
    opacity: 0.55;
}

/* ========================================
   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-radius: 8px;

    /* Match the email tab's List/Split/Chat view toggle: a white (elevated)
       button with a soft aqua fill "inside" and darker aqua text. The fill is
       drawn by the ::before layer so the elevated background shows as a thin
       white frame around it, exactly like the toggle's active segment. */
    background: var(--bg-elevated, #fff);

    /* --border-light is a full `1px solid <color>` shorthand, so use it directly
       - wrapping it as `1px solid var(--border-light)` expands to an invalid
       `1px solid 1px solid ...` and the border is dropped, which left the pill
       frameless on the pure-black dark topbar. */
    border: var(--border-light, 1px solid #e5e7eb);
    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
    color: var(--brand-accent, #2596be);
    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 fill / flash layers sit inside
       the pill, behind the label, and follow the rounded shape. */
    position: relative;
    overflow: hidden;
    z-index: 0;
}

/* The aqua "inside" fill (14% accent over the white button), inset so the
   button's own background reads as a white frame. */
.kabiri-event-pill::before {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 6px;
    background: rgba(var(--brand-accent-rgb, 37, 150, 190), 0.14);
    pointer-events: none;
    transition: background 0.2s ease;
}

.kabiri-event-pill:hover {
    transform: translateY(-1px);
}

.kabiri-event-pill:hover::before,
.kabiri-event-pill.active::before {
    background: rgba(var(--brand-accent-rgb, 37, 150, 190), 0.2);
}

.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 aqua wash fades in and out over the
   pill's fill, 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: rgba(var(--brand-accent-rgb, 37, 150, 190), 0.28);
    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;
}

/* No dark-theme override needed: the pill is built from --bg-elevated,
   --border-light and --brand-accent, which already carry their dark values, so
   it stays a white-on-dark elevated button with the same aqua fill + text. */

/* 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;

    /* Wider than the old single-event card: it now holds the day-grouped list
       of upcoming events (time + title per row). */
    width: 320px;
}

/* Scrollable list of upcoming events grouped by day; the "Open calendar"
   footer stays pinned below it. */
.evp-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 420px;
    overflow: hidden auto;
}

/* Day header (Today / Tomorrow / weekday) - sticky so it stays put while its
   events scroll under it. Background matches the panel (the bar colour). */
.evp-day {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 2px 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-tertiary, #9ca3af);
    background: var(--nav-current-color, #fff);
}

.evp-day:first-child {
    padding-top: 1px;
}

/* An event row: a colour bar, the start time, then the title. */
.evp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text-primary);
}

.evp-row:hover {
    background: rgb(0 0 0 / 5%);
}

.evp-row.is-active {
    background: rgb(0 0 0 / 7%);
}

.evp-row-bar {
    flex: 0 0 auto;
    width: 3px;
    align-self: stretch;
    min-height: 16px;
    border-radius: 2px;
}

.evp-row-time {
    flex: 0 0 auto;
    width: 64px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #6b7280);
}

.evp-row-title {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evp-row.is-active .evp-row-title {
    font-weight: 700;
}

/* Inline detail expanded under the active row (arrows / attendees / actions). */
.evp-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 1px 2px 5px;
    padding: 6px 8px 8px;
    border-radius: 8px;
    background: rgb(0 0 0 / 4%);
}

.evp-more-note {
    padding: 7px 4px 0;
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
}

/* "Open calendar" footer - the escape hatch to the full Calendar tab. */
.evp-openall {
    margin-top: 8px;
    width: 100%;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: rgb(0 0 0 / 6%);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
}

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

[data-theme='dark'] .evp-row:hover {
    background: rgb(255 255 255 / 8%);
}

[data-theme='dark'] .evp-row.is-active {
    background: rgb(255 255 255 / 12%);
}

[data-theme='dark'] .evp-detail {
    background: rgb(255 255 255 / 6%);
}

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

.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);

    /* Keep the event name to a single line; a long title is clipped with
       an ellipsis rather than wrapping and pushing the panel taller. The
       flex: 1 / min-width: 0 on .evp-head .evp-title lets it shrink so the
       ellipsis actually engages next to the back/next arrows. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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). The cut-out
   collapse toggle goes with them - on mobile the action cluster sits in the
   classic top bar, so there's no cut-out to slide away. */
@media (width <= 768px) {
    .kabiri-topbar-widget-wrap,
    .kabiri-cutout-toggle {
        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%));

    /* Hang straight off the top bar like the "..." more-tools panel: square
       top corners (it joins the bar), rounded bottom, and a soft shadow
       instead of a floating-popup glow. The flush positioning (no gap) is set
       in NotificationController.positionDropdown. */
    border-radius: 0 0 14px 14px;
    box-shadow: 0 10px 24px rgb(0 0 0 / 10%);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    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;
}

/* ── Condensed bell-dropdown row ──
   Headline + time on one line, the notification body beneath - no source
   icon, colour stripe, source label, or action buttons. Collapses the
   4-column grid down to a single content column. */
.kn-item--compact {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 9px 12px;
}

.kn-item--compact .kn-item-body {
    grid-column: 1;
}

.kn-item--compact .kn-item-row1 {
    text-transform: none;
    letter-spacing: 0;
    gap: 8px;
    align-items: baseline;
}

.kn-item--compact .kn-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.3;

    /* One line when collapsed; the row expands on click (below). */
    display: block;
    white-space: nowrap;
    -webkit-line-clamp: unset;
}

.kn-item--compact.is-unread .kn-item-title {
    font-weight: 700;
}

.kn-item--compact .kn-item-time {
    flex: 0 0 auto;
    font-size: 11px;
}

.kn-item--compact .kn-item-message {
    margin-top: 2px;
}

/* Subtle unread cue without a stripe/icon: a faint brand tint. */
.kn-item--compact.is-unread {
    background: color-mix(in srgb, var(--brand-primary, #1433d2) 5%, transparent);
}

.kn-item--compact.is-unread:hover {
    background: color-mix(in srgb, var(--brand-primary, #1433d2) 9%, transparent);
}

/* Click-to-expand restores full wrapping for the condensed row's title. */
.kn-item--compact.is-expanded .kn-item-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.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);
}