/* =============================================================================
   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. Default 16px on inner views. 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: 1rem;
  padding-right: 1rem;
}

/* Home page keeps the wider 32px inset (matches the inlined critical-home.css
   `.app-navigation { padding: 1rem 2rem }`). Home is the only navbar page
   rendered without `.app-navigation--has-search`, so this override targets it
   without affecting the 16px inner views. Higher specificity (two classes) than
   the rule above, so it wins regardless of source order. */
.app-navigation:not(.app-navigation--has-search) {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* PLP (property listing, body.page-venues): line the logo (left) and the
   menu/advisor cluster (right) up with the filter toolbar's green buttons
   below them. The 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), so match
   that exact 22px here. Below 1024px the toolbar drops to 0 inset; the
   navbar keeps its default 16px there. */
@media (min-width: 1024px) {
  body.page-venues .app-navigation {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* Keep the total edge inset at exactly 16px 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 the 16px above. 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;
}

.ai-header__divider {
  width: 1px;
  height: 24px;
  background: #383838;          /* gray/800 */
  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;
}

.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 from the AI navbar UI.
 * main.js (mobileMenu.ui) moves .global-search-trigger into
 * .app-navigation__left-section or __right-section.
 * The trigger must exist in the DOM AND be "rendered" (not display:none)
 * for main.js to initialize the listing filter strategies correctly.
 * We use opacity+absolute positioning so it is invisible but still rendered.
 */
.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;
}

/*
 * Inner-page global search pill.
 * On every non-home page the navbar re-shows the global-search trigger as a
 * pill sitting next to the logo (Figma home-header search, ported to inner
 * pages). main.js (mobileMenu.ui) appends .global-search-trigger to the end of
 * .app-navigation__left-section at >=769px, so it lands right after the logo.
 * We only reveal it at >=1024px (true desktop); on smaller screens main.js
 * moves it into the right section and the base hide rule above keeps it hidden.
 * The .app-navigation--has-search flag is set in ai-navbar.blade.php.
 */
@media (min-width: 1024px) {
  .app-navigation.app-navigation--has-search .global-search-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    width: 340px !important;
    max-width: 100% !important;
    height: 44px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    white-space: nowrap !important;
    margin-left: 20px !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    flex: 0 1 340px !important;
    transition: background 0.15s ease !important;
  }
  .app-navigation.app-navigation--has-search .global-search-trigger:hover {
    background: rgba(255, 255, 255, 0.22) !important;
  }
  .app-navigation.app-navigation--has-search .global-search-trigger__icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    filter: invert(100%);            /* search.svg is a black stroke -> render white */
  }
  .app-navigation.app-navigation--has-search .global-search-trigger__input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    font-family: 'Neue', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #e8e8e8 !important;
    cursor: pointer !important;
    pointer-events: none !important; /* clicks fall through to the pill -> opens modal */
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
  .app-navigation.app-navigation--has-search .global-search-trigger__input::placeholder {
    color: #a8a8a8 !important;
    opacity: 1 !important;
  }
}

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

.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 {
    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 | Create proposal
   ============================================================================= */

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