/* =============================================================================
   AI-Wise Navbar Styles
   Extracted from ai-wise.css — loads on every page that includes ai-navbar.blade.php
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HEADER — node 256:9076 (80px × 1440px)
   ----------------------------------------------------------------------------- */
:root {
  --navigation-height: 80px;
}

.ai-header {
  height: 80px;
  width: 100%;
  background: #111111;
  border-bottom: 1px solid #262626;
  display: flex;
  align-items: center;
  padding: 13px 40px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9100;
}


/* Horizontal edge padding for the bar (logo on the LEFT, menu/user icons on
   the RIGHT). Loaded on every page with the navbar, so it is the single source
   of the bar's side inset. 22px on every view and every breakpoint, taken from
   PLP: there the filter toolbar (`.listing__top-bar`) is inset a fixed 22px at
   >=1024px (plp.bundle.css overrides main.css's 3.5rem with
   `padding-left/right: 22px !important` inside the same @media), and the navbar
   has to line up with its buttons. The inner container's `.navigation-fluid*`
   padding (main.css: 1rem, and 3rem/5rem at >=1024px) is zeroed below so it does
   not stack on top of this inset. */
.app-navigation {
  padding-left: 22px;
  padding-right: 22px;
}

/* Home page keeps its wider 32px inset (matches the inlined critical-home.css
   `.app-navigation { padding: 1rem 2rem }`). Keyed on an explicit --home class,
   set from $isHomePage in navbar.blade.php. It used to be keyed on
   `:not(.app-navigation--has-search)`, on the reasoning that home was the only
   page without that flag; when the flag was retired with the wide search pill,
   that selector started matching EVERY page and silently widened the inset from
   22px to 32px everywhere, which pushed the nav pill past the viewport at 320px.
   Two classes, so it outranks the rule above regardless of source order. */
.app-navigation.app-navigation--home {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Keep the total edge inset at exactly the value set above on every breakpoint:
   neutralize the inner container's fluid padding, which otherwise adds 1rem
   (base) or 3rem/5rem (>=1024px) from main.css and stacks with it. Scoped with
   the parent to outrank main.css's `.app-navigation__container.navigation-fluid-md`. */
.app-navigation .app-navigation__container.navigation-fluid,
.app-navigation .app-navigation__container.navigation-fluid-md,
.app-navigation .app-navigation__container.navigation-fluid-lg {
  padding-left: 0;
  padding-right: 0;
}

/* 3-column flex: logo LEFT | pill CENTER | actions RIGHT */
.app-navigation__container {
  justify-content: unset;
}
.app-navigation__left-section {
  flex: 1;
  justify-content: flex-start;
}
.app-navigation__ai-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1027px) {
  .app-navigation__ai-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

.app-navigation__right-section {
  flex: 1;
  justify-content: flex-end;
}

/* 3-section header: logo LEFT | toggle CENTERED | nav RIGHT
   Uses CSS Grid with 3 equal columns so toggle is always viewport-centered */
.ai-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 1720px;
  height: 54px;
  margin: 0 auto;
}

.ai-header__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ai-header__logo {
  width: 110px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.ai-header__logo img {
  width: 110px;
  height: 40px;
  object-fit: contain;
}

/* -----------------------------------------------------------------------------
   HOME NAVBAR — global search box (home page only)
   Rendered by components/site/menu/ai-left.blade.php under @if($isHomePage).
   ----------------------------------------------------------------------------- */
/* "AI wise" pill button — Figma 11370:58967 (green pill, black label) */
.ai-header__ai-wise-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: 20px;
  height: 40px;
  padding: 8px 12px;
  background: #c8d200;                 /* brand/b-500 — VA/CTA Octarine Green */
  border: 1px solid #353800;           /* brand/950 */
  border-radius: 38px;
  box-shadow: 0px 1px 3px 0px rgba(10, 13, 18, 0.1),
              0px 1px 2px -1px rgba(10, 13, 18, 0.1);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ai-header__ai-wise-btn:hover {
  background: #b3bc00;
  border-color: #4e5200;
}
.ai-header__ai-wise-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: brightness(0);               /* recolor stars icon to black on green bg */
}
.ai-header__ai-wise-btn__label {
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #000000;                      /* colors/base/black */
}

/* The AI wise pill has two instances: the desktop one lives in the left cluster
   (ai-left), the mobile one is centred in the toggle slot (ai-navbar). Each is
   shown only at its breakpoint. */
.ai-header__ai-wise-btn--mobile { display: none; }

/* Mobile/tablet home navbar (Figma 11344:60531): logo · centred AI wise · burger. */
@media (max-width: 1023px) {
  .app-navigation__left-section .ai-header__ai-wise-btn {
    display: none;
  }

  .ai-header__ai-wise-btn--mobile {
    display: inline-flex;
  }
}

/* -----------------------------------------------------------------------------
   RIGHT NAV PILL — node 256:9084
   ----------------------------------------------------------------------------- */
.ai-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ai-header__advisor-btn {
  width: 168px;
  height: 40px;
  border-radius: 44px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #d9d9d9;               /* gray/300 */
  background: transparent;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.ai-header__advisor-btn:hover {
  color: #e8e8e8;
}

.ai-header__nav-pill {
  background: #1a1a1a;          /* gray/950 */
  border: 1px solid #383838;    /* gray/800 */
  border-radius: 36px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 7px 10px 7px 16px;
  gap: 10px;
}

/* Home page: the collection (folder) icon and divider are removed, so the
   lone burger should sit centered in a symmetric pill instead of being pushed
   off-center by the left-heavy padding meant for the folder+divider layout. */
.ai-header__nav-pill--home {
  padding-left: 10px;
  justify-content: center;
}

.ai-header__nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-header__nav-icon img {
  width: 20px;
  height: 20px;
}

/* Collection chip. The icon alone gave no sign the collection had anything in
   it, and the count badge that answered that was hidden at nought, so an empty
   collection looked exactly like a page that had not painted yet. The chip
   carries the state instead: outlined while empty, brand fill once something is
   in it, and the label says the unit rather than leaving a bare number to mean
   whatever the reader assumes.

   Brand #c8d200 on #1a1a1a text, the same pair as the panel's send button, so
   the one filled thing in the navbar matches the one filled thing in the panel.

   28px inside the 40px pill: tall enough to read as its own surface, short
   enough to leave the pill's own padding visible around it. */
.ai-header__nav-collection {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #c8d200;
  color: #1a1a1a;
  font-family: 'Neue', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.ai-header__nav-collection:hover {
  background: #d4df00;
}

.ai-header__nav-collection svg {
  display: block;
  flex-shrink: 0;
}

/* Empty: an outline, not a fill. A filled chip is the panel's way of saying it
   holds something, so an empty one must not wear it. */
.ai-header__nav-collection--empty {
  background: transparent;
  border-color: #666666;
  color: #d9d9d9;
}

.ai-header__nav-collection--empty:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #808080;
  color: #e8e8e8;
}

.ai-header__nav-collection:focus-visible {
  outline: 2px solid #c8d200;
  outline-offset: 2px;
}

/* The nav pill cannot shrink: every child is flex-shrink:0 and this chip is
   white-space:nowrap, so the pill floors at its min-content width. On the home
   page that made the header wider than the screen on small phones -

     32 (nav padding) + 110 (logo) + 16 (gap) + 222.83 (pill) = 380.83

   a constant, so the document overflowed by 380.83 - viewport: 61px at 320,
   21px at 360, 6px at 375. The chip is the largest term at 118.83px, and 70.83
   of that is this label alone.

   The label is the one part that can go without losing a control. 8681ce658
   deliberately slimmed the home pill in July; 1af3ed060 then turned the folder
   glyph into this labelled chip across every navbar, which is how a control
   three times wider than the one that was removed came back to it.

   Below the width where the header stops fitting, the chip goes icon-only: the
   button, its tap target and its aria-label all stay, and the count is one tap
   away in the panel. The label returns at larger widths where there is room. */
@media (max-width: 479.98px) {
  .ai-header__nav-collection-label {
    display: none;
  }

  /* With the label gone the pill still needs a little of its own whitespace back
     to fit inside .app-navigation__container rather than sitting in its padding. */
  .ai-header__nav-pill {
    gap: 6px;
    padding-right: 8px;
  }

  .ai-header__nav-pill--home {
    padding-left: 8px;
  }
}


/* Lighter than the pill's gray/800 border on purpose. The border reads against
   the black navbar (1.74:1), but the same value as a hairline inside the pill's
   own gray/950 fill is 1.48:1 and invisible in practice. #666 is 3.03:1 against
   the fill, the 3:1 floor for non-text contrast. */
.ai-header__divider {
  width: 1px;
  height: 24px;
  background: #666666;
  flex-shrink: 0;
}

.ai-header__avatar {
  width: 24px;
  height: 24px;
  border-radius: 200px;
  background: #383838;          /* gray/800 */
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-header__avatar img {
  width: 15px;
  height: 15px;
}

/* Pill user avatar — Figma 353:8790 (I353:8790;9268:69780) */
.ai-header__pill-avatar {
  width: 24px;
  height: 24px;
  border-radius: 200px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4f4f4f;
  /* Opens the account dropdown, so it has to look clickable. */
  cursor: pointer;
}

.ai-header__pill-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 200px;
  object-fit: cover;
  display: block;
}

.ai-header__pill-avatar-initials {
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE — navbar overrides only
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ai-header {
    padding: 8px 16px;
  }

  .ai-header__advisor-btn {
    display: none;
  }
}

/*
 * Hide the .global-search-trigger stub. It is not the search trigger: that is
 * the icon button in the nav pill (see components/site/global-search/button).
 * The stub exists only because main.js (mobileMenu.ui) unconditionally moves
 * .global-search-trigger into .app-navigation__left-section or __right-section
 * and errors when it is absent. It must stay "rendered" rather than
 * display:none, because main.js also reads it while initialising the listing
 * filter strategies, so hide it with opacity + absolute positioning.
 * Kept !important: mobile-sort-ui-fix.css and plp.bundle.css both try to
 * display:flex this selector on body.page-venues.
 */
.app-navigation .global-search-trigger,
.app-navigation__left-section .global-search-trigger,
.app-navigation__right-section .global-search-trigger {
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

/*
 * Search icon button in the nav pill. Geometry and colour come from
 * .ai-header__nav-icon; this only strips the <button> defaults so it matches the
 * sibling <span> icons.
 */
.global-search-button {
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  -webkit-appearance: none;
  appearance: none;
}

.global-search-button svg {
  display: block;
}

/* ── Inquiry pages: hide advisor button ── */
body.inq-sc-page .ai-header__advisor-btn,
body.inq-rl-page .ai-header__advisor-btn,
body.inq-ci-page .ai-header__advisor-btn {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   BURGER MENU DROPDOWN — Figma node 351:9118
   ----------------------------------------------------------------------------- */

/* Home nav item only visible in mobile sidebar, hidden in desktop dropdown */
.ai-burger-dropdown__item--mobile-only {
  display: none;
}

/* Mobile-only sidebar elements: hidden on desktop */
.ai-burger-dropdown__mobile-header,
.ai-burger-dropdown__mobile-close,
.ai-burger-dropdown__mobile-spacer {
  display: none;
}

/* Wrapper makes the pill icon the dropdown anchor */
.ai-header__burger-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Dropdown panel */
.ai-burger-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 240px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow:
    0px 12px 16px -4px rgba(10, 13, 18, 0.08),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 2px 2px -1px rgba(10, 13, 18, 0.04);
  /* Override generic .dropdown__box sizing */
  max-height: none !important;
  width: 240px !important;
  z-index: 9200;
  overflow: hidden;
}

/* Header row: avatars + label (desktop) */
.ai-burger-dropdown__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #ebebeb;
  background: transparent;
  border-radius: 0;
  margin: 0;
  text-decoration: none;
}

/* Overlapping avatar stack — reuses app-navigation__advisor-link-avatars/avatar,
   just overrides border colour to white (dropdown has white bg) and increases overlap */
.ai-burger-dropdown__avatars {
  align-items: center;
  flex-shrink: 0;
}

/* Home page: tighter overlap (-8px) */
.ai-burger-dropdown__avatars--home > :not([hidden]) ~ :not([hidden]) {
  margin-left: -8px !important;
}

/* Other pages: more overlap (-16px) */
.ai-burger-dropdown__avatars:not(.ai-burger-dropdown__avatars--home) > :not([hidden]) ~ :not([hidden]) {
  margin-left: -16px !important;
}

.ai-burger-dropdown__avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-color: #ffffff !important;
}

.ai-burger-dropdown__header-label {
  font-family: 'Neue Text', 'Neue', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #212324;
  flex: 1;
}

/* Menu items list */
.ai-burger-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.ai-burger-dropdown__item {
  padding: 0 6px 2px;
}

.ai-burger-dropdown__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.ai-burger-dropdown__link:hover {
  background: rgba(70, 70, 70, 0.06);
}

.ai-burger-dropdown__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* currentColor glyphs, unlike the pre-coloured files in the rows around them, so
   the ink has to be named here. */
.ai-burger-dropdown__icon svg {
  width: 16px;
  height: 16px;
  color: #464646;
}

.ai-burger-dropdown__label {
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #464646;
}

/* Divider between blog and log-in */
.ai-burger-dropdown__divider {
  height: 1px;
  background: #ebebeb;
  margin: 2px 0;
  padding: 0;
}

/* ── Logged-in user header (Figma 353:8792) ── */
.ai-burger-dropdown__header--user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #f2f2f2;
  text-decoration: none;
}

.ai-burger-dropdown__user-avatar-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 200px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
}

.ai-burger-dropdown__user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 200px;
  object-fit: cover;
  display: block;
}

.ai-burger-dropdown__user-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #4f4f4f;
  text-transform: uppercase;
}

.ai-burger-dropdown__user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ai-burger-dropdown__user-name {
  font-family: 'Neue Text', 'Neue', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #383838;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.ai-burger-dropdown__user-email {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #a8a8a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Signin modal border-radius overrides */
#signin-modal .dialog__container,
#signup-modal .dialog__container {
  border-radius: 16px;
}

#signin-modal .auth-form__input-group,
#signup-modal .auth-form__input-group {
  border-radius: 8px;
  overflow: hidden;
}

#signin-modal .auth-modal--content__form--submit-btn,
#signup-modal .auth-modal--content__form--submit-btn,
#signin-modal .auth-modal--content--google-btn,
#signup-modal .auth-modal--content--google-btn {
  border-radius: 8px;
}

/* Position dropdown correctly relative to the pill container */
.ai-header__nav-pill {
  position: relative;
}

/* =============================================================================
   MOBILE BURGER SIDEBAR (Figma 366:19323 — "Sidebar navigation")
   Full-height dark sidebar, slides in from the left on mobile (≤1027px).
   Desktop dropdown behaviour is preserved — these rules only apply ≤1027px.
   ============================================================================= */

@media (max-width: 1027px) {

  /* ── Overlay backdrop ── */
  .ai-burger-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* Figma 366:19325 — Background overlay fill */
    background: rgba(17, 17, 17, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10100;
  }

  .ai-burger-sidebar-overlay--open {
    display: block;
  }

  /* ── Sidebar panel (Figma 366:19326 "Content", width:311, height:812, bg #111111) ── */
  .ai-burger-dropdown {
    border: none !important;
    /* Override desktop absolute dropdown */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 311px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #111111 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 10200 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: none;
    flex-direction: column;
    padding: 0;
    transform: translateX(-100%);
    transition: transform 0.26s ease, opacity 0.26s ease;
    opacity: 0;
  }

  /* Open state — JS toggles .hidden / .visible classes via createDropdown() */
  .ai-burger-dropdown:not(.hidden) {
    display: flex;
  }

  .ai-burger-dropdown.visible {
    transform: translateX(0);
    opacity: 1;
  }

  /* Show mobile-only elements inside sidebar */
  .ai-burger-dropdown__mobile-header,
  .ai-burger-dropdown__mobile-close {
    display: flex;
  }

  /* ── Header row (Figma 366:19327 — height:64, logo at y:24, x:16) ── */
  .ai-burger-dropdown__mobile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 12px 0 16px;
    height: 64px;
    flex-shrink: 0;
  }

  .ai-burger-dropdown__mobile-logo {
    display: flex;
    align-items: center;
  }

  .ai-burger-dropdown__mobile-logo img {
    height: 26px;
    width: auto;
  }

  /* Close button (Figma 366:19380 — x:327 in 375 frame, y:12, 36×36)
     Panel is 311px wide → close btn starts at 327px from left edge of viewport,
     which is 16px to the right of the panel edge */
  .ai-burger-dropdown__mobile-close {
    position: fixed;
    top: 12px;
    left: 327px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10201;
    flex-shrink: 0;
  }

  .ai-burger-dropdown__mobile-close svg path {
    stroke: #ffffff;
  }

  /* ── Nav items list (Figma 366:19331 — x:0, y:88, width:311) ── */

  /* Home item only shows on mobile (desktop dropdown doesn't have it) */
  .ai-burger-dropdown__item--mobile-only {
    display: list-item;
  }

  /* Use flex order to push the advisor card to the bottom:
     mobile-header=1, list=3, user-card=4, spacer=5, advisor-card=6 */
  .ai-burger-dropdown__mobile-header    { order: 1; }
  .ai-burger-dropdown__list             { order: 3; flex-shrink: 0; }
  .ai-burger-dropdown__header--user     { order: 4; }
  .ai-burger-dropdown__mobile-spacer    { order: 5; }

  /* Guest/logged-in advisor card always at bottom */
  a.ai-burger-dropdown__header          { order: 6; }

  .ai-burger-dropdown__list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* Each item wrapper (Figma 366:19339 — x:8, width:295, height:44) */
  .ai-burger-dropdown__item {
    padding: 0 8px 0;
  }

  /* Link row (Figma 366:19341 Content — height:40, text+icon at x:12,y:8) */
  .ai-burger-dropdown__link {
    display: flex;
    align-items: center;
    gap: 8px;
    /* x:12 from item left = 12px padding-left (item has x:8 in panel, content x:12 in item) */
    padding: 8px 12px;
    height: 44px;
    border-radius: 8px;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    font: inherit;
    text-align: left;
    transition: background 0.15s ease;
  }

  .ai-burger-dropdown__link:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  /* Icon (Figma 366:19343 — width:20, height:20) */
  .ai-burger-dropdown__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ai-burger-dropdown__icon img {
    filter: none;
    width: 19.2px;
    height: 19.2px;
  }

  /* Inline SVGs using currentColor */
  .ai-burger-dropdown__icon svg {
    width: 19.2px;
    height: 19.2px;
    color: #D9D9D9;
  }

  .ai-burger-dropdown__icon svg path {
    stroke: #D9D9D9;
  }

  /* Label (Figma 366:19344 text — height:24, color white) */
  .ai-burger-dropdown__label {
    font-family: 'Neue Text', 'Neue', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #D9D9D9;
  }

  /* Divider */
  .ai-burger-dropdown__divider {
    height: 1px;
    background: #262626;
    margin: 4px 8px;
    padding: 0;
  }

  /* Spacer — pushes footer card to bottom */
  .ai-burger-dropdown__mobile-spacer {
    display: block;
    flex: 1;
    min-height: 12px;
  }

  /* ── Footer cards (Figma 366:19374/19375 — advisor + user card at bottom) ── */
  a.ai-burger-dropdown__header,
  .ai-burger-dropdown__header.ai-burger-dropdown__header--user {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* Figma 366:19376 — avatar group x:12, y:16 within 295×64 card */
    padding: 12px 12px;
    /* Card bg: #262626 (Gray/900), border-radius: 12px, margin: 0 8px → width 295px */
    background: #262626;
    border-radius: 12px;
    margin: 12px 8px 8px;
    border-bottom: none !important;
    text-decoration: none;
    flex-shrink: 0;
  }

  .ai-burger-dropdown__header-label {
    /* Figma 366:19379 text — x:112 (112-12=100 from card left, which is avatar 104px) */
    font-family: 'Neue Text', 'Neue', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
  }

  /* Avatar stack in the footer card — same size 32×32 as Figma 366:19377 */
  .ai-burger-dropdown__avatars {
    margin-left: 12px;
  }

  .ai-burger-dropdown__avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-color: #262626 !important;
  }

  /* Logged-in user avatar */
  .ai-burger-dropdown__user-avatar-wrap {
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  .ai-burger-dropdown__user-avatar-fallback {
    background: #383838;
    color: #ffffff;
  }

  .ai-burger-dropdown__user-name {
    color: #ffffff;
  }

  .ai-burger-dropdown__user-email {
    color: #757575;
  }

  /* Body scroll lock when sidebar is open */
  body.ai-burger-sidebar--open {
    overflow: hidden !important;
  }

  /* ── Close button (Figma 366:19380 — x:327, y:12, 36×36px) ──
     Injected into <body> by JS so position:fixed is viewport-relative */
  #ai-burger-sidebar-close {
    display: none;
    position: fixed;
    /* x:327 in 375px frame */
    left: 327px;
    /* y:12 */
    top: 12px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10201;
  }

  #ai-burger-sidebar-close.ai-burger-sidebar-close--open {
    display: flex;
  }


} /* end @media (max-width: 1027px) */

/* =============================================================================
   AI-WISE NAV TAB BAR  (navMode='tabs')
   Figma node 418:17166 — My collection | Inquiries
   ============================================================================= */

/* Container: flex row, gap 8px, aligns to full height */
.ai-navbar-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  
}

/* Tab base
   Figma _Dropdown header navigation button (418:17170 / 418:17173):
   h 40px, px 6px, py 4px, overflow hidden
   font: Neue Plak Regular, 16px, line-height 24px
   inactive color: #757575 (#757575 = --colors/gray-(light-mode)/500)
   no bottom border when inactive */
.ai-navbar-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 4px 6px;
  overflow: hidden;
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #757575;
  text-decoration: none;
  white-space: nowrap;
  /* button reset */
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Active tab (Figma 418:17167):
   color: white (#ffffff = --colors/base/white)
   border-bottom: 1px solid white */
.ai-navbar-tab--active {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

.ai-navbar-tab:hover:not(.ai-navbar-tab--active) {
  color: #a8a8a8;
  text-decoration: none;
}

@media (max-width: 1027px) {
  .ai-navbar-tabs {
    gap: 4px;
  }

  .ai-navbar-tab {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .ai-navbar-tabs {
    display: none;
  }
}