/* Art — chat + embedded doc
   Scope: only elements the assistant renders.
   Uses your existing tokens (brand gold) if defined.
*/
/* Copy of Apothecary module styles — built to align with Pixel + pixel-overrides.css */
/* Uses brand tokens already defined in pixel-overrides.css (e.g., --brand-gold) */

/* --- Layout: left (content) + right (rail) --- */

/* 0) Tokens */
:root{
  /* fonts/colors already used by your theme — keep/add as needed */
  --bs-body-font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --bs-primary:#b08a48;
  --bs-primary-rgb:176,138,72;
  /* keep link colors inherited from global theme */

  /* Ensure body text is not gray */
  --color-bg: #fff;
 
  --color-accent: var(--brand-gold, #b08a48);
  
  --bs-body-color:#000;        /* <— main text color */
  --bs-heading-color:#000;     /* <— headings */
  --bs-body-bg:#fff;           /* <— page background (optional but recommended) */

  /* brand gold used for borders + scrollbar */
  --brand-gold:#b08a48;
}


#mainContainer.apoth-main{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 992px){
  #mainContainer.apoth-main{
    grid-template-columns: 1fr 1fr; /* 50/50 split on lg+ */
  }
}
#leftColumn,
#rightColumn{ min-width: 0; }






/* (The 1400px 3-up override is no longer needed and is removed.) */

 /* Keep non-rail hub-btn styling only */
#privateColumns .hub-btn,
#privateColumns .hub-btn.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 30px;
  padding: 0.18rem 0.48rem;
  font-size: 0.84rem;
  line-height: 1.2;
  color: #000;
  background-color: #fff;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: center;
  break-inside: avoid;
}

/* Default pill behavior in right column (non-masonry contexts) */
#rightColumn .hub-btn,
#rightColumn .hub-btn.btn {
  display: inline-flex;
  max-width: 100%;
}

/* Masonry context: make pills full-width bricks inside columns */
#apothecaryButtons .hub-btn,
#apothecaryButtons .hub-btn.btn {
  display: inline-block !important;
  width: 100% !important;
  margin: 0 0 0.75rem 0 !important;
  break-inside: avoid !important;
}

/* moved: right-rail button width/nowrap now lives in aromarecipecard.css */

/* moved: right-rail UL/LI grid now lives in aromarecipecard.css */

/* moved: right-rail item span rules now live in aromarecipecard.css */


/* Stop any right-rail buttons/links from stretching full width */
/* moved: right-rail anti-stretch rules now live in aromarecipecard.css */



/* Top module nav (Apothecary) — responsive layout WITHOUT forcing full-width */
#hubNav{
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  grid-auto-rows: minmax(116px, 1fr) !important;
  gap: 10px !important;
}

/* Mobile-first: ensure tiles, never a stacked column */
@media (max-width: 991.98px){
  #hubNav{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    grid-auto-rows: minmax(116px, 1fr) !important;
    gap: 10px !important;
  }
  /* Tiles fill their grid cells (match hub mobile sizing) */
  #hubNav .hub-btn,
  #hubNav .btn,
  #hubNav button{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--bs-body-color, #000) !important;
    box-sizing: border-box !important;
  }
}

/* Desktop keeps your pill row */
@media (min-width: 992px){
  #hubNav{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.18rem 0.48rem !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
    min-height: 30px !important;
    gap: 0.75rem !important;
    border-radius: 0.5rem !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
}

/* Pills inside #hubNav fill their grid cell on mobile/tablet */
#hubNav .hub-btn{
  width: 100%;
}

/* On desktop, compact row with wrapping and auto-width pills */
@media (min-width: 992px){
  /* Desktop: identical to Pixel secondary-nav */
 #hubNav{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
 padding: 0.18rem 0.48rem !important;     /* small pill */
  font-size: 0.84rem !important;
  line-height: 1.2 !important;
  min-height: 30px !important;
  gap: 0.75rem !important; 
  border-radius: 0.5rem !important;                  /* match Pixel’s airy desktop gap */
 
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}



  /* Pills: same size as Pixel overrides (small) */
  #hubNav .hub-btn,
  #hubNav .btn,
  #hubNav .nav-link.btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.18rem 0.48rem !important;     /* Pixel small pill */
    font-size: 0.84rem !important;           /* Pixel small text */
    line-height: 1.2 !important;
    gap: 0.75rem !important; 
    width: auto !important;
    white-space: nowrap !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    color: #000 !important;
  }
}

/* States: hover/focus/active/aria (non-rail only) */
#privateColumns .hub-btn:hover,
#hubNav .hub-btn:hover,
#privateColumns .hub-btn:focus,
#hubNav .hub-btn:focus,
#privateColumns .hub-btn:focus-visible,
#hubNav .hub-btn:focus-visible,
#privateColumns .hub-btn:active,
#hubNav .hub-btn:active,
#privateColumns .hub-btn[aria-pressed="true"],
#hubNav .hub-btn[aria-pressed="true"]{
  outline: none;
  border-color: var(--brand-gold, #b08a48);
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2);
  background-color: #fff;
  color: #000;
}

/* Disabled */
#privateColumns .hub-btn:disabled,
#hubNav .hub-btn:disabled,
#apothecaryButtons .hub-btn:disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* Fallback for plain buttons in non-rail container */
#hubNav button:not(.btn):not(.hub-btn){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 30px;
  padding: 0.18rem 0.48rem;
  font: inherit;
  line-height: 1.2;
  color: #000;
  background-color: #fff;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  cursor: pointer;
}

/* Keep brand look in dark mode (non-rail only) */
@media (prefers-color-scheme: dark){
  #privateColumns .hub-btn,
  #hubNav .hub-btn,
  #hubNav button:not(.btn){
    background-color: #fff;
    color: #000;
    border-color: var(--brand-gold, #b08a48);
  }
}

/* --- Top module nav (buttons you placed inside #hubNav) --- */
/* removed duplicate overrides: margins/width are already defined above; 
   this block forced width:auto on mobile and caused spacing mismatch */

/* --- Generic sections / messages used by loader --- */
/* Block gold box on right rail column and buttons container */
/* Scope the gold box ONLY to left column sections */
#leftColumn .apoth-section{
  background: #fff;
  border: 1px solid #b08a48;
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  max-height: none;   /* explicit */
  height: auto;       /* ensure it shrinks to content */
}


.apoth-hint{
  color: #555;
  font-size: 0.95rem;
}
.apoth-error{
  color: #a10000;
}

/* --- Chat UI used by Aromatherapy assistant --- */
.rc-wrap{
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.5rem;
}
.apoth-tabs{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.apoth-tab{
  display: inline-block;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-weight: 600;
}

.rc-title{
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.rc-title--msg{ font-size: 0.95rem; color: #333; }

.chat-scroll{
  border: 1px solid rgba(0,0,0,.075);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.75rem;
  max-height: 50vh;
  overflow: auto;
}

.action-row{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.composer__input{
  flex: 1 1 auto;
  min-height: 38px;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  line-height: 1.2;
  resize: vertical;
}
/* Credit action pill — apply in header, NAVBAR, and within Apothecary UI */
.site-header .credit-button,
header .credit-button,
.navbar .credit-button,
.rc-wrap .credit-button,
.apoth-rail .credit-button,
#rightColumn .credit-button{

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 38px !important;
  padding: 0.35rem 0.6rem !important;
  border: 1px solid var(--brand-gold, #b08a48) !important; /* brand gold outline */
  border-radius: 0.5rem !important;
  background: #fff !important;
  color: var(--brand-gold, #b08a48) !important;  /* gold text */
  box-sizing: border-box !important;
  cursor: pointer;
}

.credit-button:hover,
.credit-button:focus,
.site-header .credit-button:hover,
.site-header .credit-button:focus,
header .credit-button:hover,
header .credit-button:focus,
.navbar .credit-button:hover,
.navbar .credit-button:focus,
.rc-wrap .credit-button:hover,
.rc-wrap .credit-button:focus,
.apoth-rail .credit-button:hover,
.apoth-rail .credit-button:focus,
#rightColumn .credit-button:hover,
#rightColumn .credit-button:focus{
  outline: none !important;
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2) !important;
  background: #fff !important;
  color: var(--brand-gold, #b08a48) !important; /* keep gold on hover/focus */
}

/* Navbar outline buttons — normalize to BRAND GOLD across all common variants */
.site-header .navbar .btn-outline-dark,
.site-header .navbar .btn-outline-black,
.site-header .navbar .btn-outline-gray,
.site-header .navbar .btn-outline-primary,
.site-header .navbar .btn-outline-secondary,
.site-header .navbar .btn-outline-light,
.navbar .btn-outline-dark,
.navbar .btn-outline-black,
.navbar .btn-outline-gray,
.navbar .btn-outline-primary,
.navbar .btn-outline-secondary,
.navbar .btn-outline-light,
.site-header .navbar .nav-link.btn.btn-outline-dark,
.site-header .navbar .nav-link.btn.btn-outline-black,
.site-header .navbar .nav-link.btn.btn-outline-gray,
.site-header .navbar .nav-link.btn.btn-outline-primary,
.site-header .navbar .nav-link.btn.btn-outline-secondary,
.site-header .navbar .nav-link.btn.btn-outline-light,
.navbar .nav-link.btn.btn-outline-dark,
.navbar .nav-link.btn.btn-outline-black,
.navbar .nav-link.btn.btn-outline-gray,
.navbar .nav-link.btn.btn-outline-primary,
.navbar .nav-link.btn.btn-outline-secondary,
.navbar .nav-link.btn.btn-outline-light{
  background: #fff !important;
  color: var(--brand-gold, #b08a48) !important; /* gold text */
  border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0.5rem !important;
  box-sizing: border-box !important;
}

.site-header .navbar .btn-outline-dark:hover,
.site-header .navbar .btn-outline-black:hover,
.site-header .navbar .btn-outline-gray:hover,
.site-header .navbar .btn-outline-primary:hover,
.site-header .navbar .btn-outline-secondary:hover,
.site-header .navbar .btn-outline-light:hover,
.site-header .navbar .btn-outline-dark:focus,
.site-header .navbar .btn-outline-black:focus,
.site-header .navbar .btn-outline-gray:focus,
.site-header .navbar .btn-outline-primary:focus,
.site-header .navbar .btn-outline-secondary:focus,
.site-header .navbar .btn-outline-light:focus,
.navbar .btn-outline-dark:hover,
.navbar .btn-outline-black:hover,
.navbar .btn-outline-gray:hover,
.navbar .btn-outline-primary:hover,
.navbar .btn-outline-secondary:hover,
.navbar .btn-outline-light:hover,
.navbar .btn-outline-dark:focus,
.navbar .btn-outline-black:focus,
.navbar .btn-outline-gray:focus,
.navbar .btn-outline-primary:focus,
.navbar .btn-outline-secondary:focus,
.navbar .btn-outline-light:focus,
.site-header .navbar .nav-link.btn.btn-outline-dark:hover,
.site-header .navbar .nav-link.btn.btn-outline-black:hover,
.site-header .navbar .nav-link.btn.btn-outline-gray:hover,
.site-header .navbar .nav-link.btn.btn-outline-primary:hover,
.site-header .navbar .nav-link.btn.btn-outline-secondary:hover,
.site-header .navbar .nav-link.btn.btn-outline-light:hover,
.site-header .navbar .nav-link.btn.btn-outline-dark:focus,
.site-header .navbar .nav-link.btn.btn-outline-black:focus,
.site-header .navbar .nav-link.btn.btn-outline-gray:focus,
.site-header .navbar .nav-link.btn.btn-outline-primary:focus,
.site-header .navbar .nav-link.btn.btn-outline-secondary:focus,
.site-header .navbar .nav-link.btn.btn-outline-light:focus,
.navbar .nav-link.btn.btn-outline-dark:hover,
.navbar .nav-link.btn.btn-outline-black:hover,
.navbar .nav-link.btn.btn-outline-gray:hover,
.navbar .nav-link.btn.btn-outline-primary:hover,
.navbar .nav-link.btn.btn-outline-secondary:hover,
.navbar .nav-link.btn.btn-outline-light:hover,
.navbar .nav-link.btn.btn-outline-dark:focus,
.navbar .nav-link.btn.btn-outline-black:focus,
.navbar .nav-link.btn.btn-outline-gray:focus,
.navbar .nav-link.btn.btn-outline-primary:focus,
.navbar .nav-link.btn.btn-outline-secondary:focus,
.navbar .nav-link.btn.btn-outline-light:focus{
  background: #fff !important;
  color: #000 !important;
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2) !important;
}

/* Ensure Credits stays gold even if combined with Bootstrap outline variants */
.navbar .credit-button,
.site-header .navbar .credit-button{
  color: var(--brand-gold, #b08a48) !important;
}
.navbar .credit-button:hover,
.navbar .credit-button:focus,
.site-header .navbar .credit-button:hover,
.site-header .navbar .credit-button:focus{
  color: var(--brand-gold, #b08a48) !important;
}
/* Hard-lock Credits pill to gold in header/nav regardless of outline or nav-link utilities */
.site-header .navbar .nav-link.btn.credit-button,
.site-header .navbar .btn.credit-button,
.navbar .nav-link.btn.credit-button,
.navbar .btn.credit-button,
.site-header .navbar .nav-link.btn[class*="btn-outline-"].credit-button,
.navbar .nav-link.btn[class*="btn-outline-"].credit-button{
  color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  background: #fff !important;
}

.site-header .navbar .nav-link.btn.credit-button:hover,
.site-header .navbar .nav-link.btn.credit-button:focus,
.navbar .nav-link.btn.credit-button:hover,
.navbar .nav-link.btn.credit-button:focus{
  color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  background: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2) !important;
}

/* Final specificity lock so Credits text never flips to black in any header/nav variant */
body .navbar .credit-button,
body .site-header .credit-button{
  color: var(--brand-gold, #b08a48) !important;
}

/* removed duplicate #hubNav block — rules already defined earlier.
   Keeping a single source of truth prevents order/specificity conflicts. */

/* moved: right-rail recipe item width now lives in aromarecipecard.css */
/* Guard against generic composer width rules leaking in */
#artistChatForm .composer__input { width: 100% !important; max-width: 100% !important; }

/* ===== Divider between top nav and assistant links (wins over Pixel hr rules) ===== */
.artist-divider,
hr.artist-divider{
  display: block !important;
  width: 100% !important;
  height: 1px !important;                      /* override hr:not([size]) */
  background: var(--brand-gold, #b08a48) !important;
  border: 0 !important;
  opacity: 1 !important;                       /* override hr default opacity */
  margin: .75rem 0 !important;                 /* even spacing above/below */
}
.secondary-nav + .artist-divider,
.secondary-nav + hr.artist-divider{ margin-top: .75rem !important; }
.artist-divider + #assistantNav,
hr.artist-divider + #assistantNav{ margin-top: .75rem !important; }

/* ===== Assistant links: remove default underline entirely here ===== */
#assistantNav .nav-link{
  text-decoration: none !important;            /* kill grey UA underline */
}

/* Active/selected assistant: GOLD underline (border-bottom wins over Pixel/Bootstrap) */
#privateSecondaryNav #assistantNav .nav-link.active,
#privateSecondaryNav #assistantNav .nav-link[aria-current="page"],
#privateSecondaryNav #assistantNav .nav-link[aria-selected="true"]{
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 2px solid var(--brand-gold, #b08a48) !important;
}


/* Hover state: subtle gold cue (not grey) */
#assistantNav .nav-link:hover{
  text-decoration: none !important;
  box-shadow: inset 0 -1px 0 0 var(--brand-gold, #b08a48) !important;
}

/* ===== Assistant links: kill Pixel/Bootstrap focus rings just for this row ===== */
#assistantNav .nav-link,
#assistantNav .btn{
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;   /* no square border on focus/active */
}

/* Hover/active cue: GOLD underline via border-bottom (no UA underline, no box) */
#privateSecondaryNav #assistantNav .nav-link:hover,
#privateSecondaryNav #assistantNav .nav-link.active{
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;  /* prevent grey UA underline */
  border-bottom: 2px solid var(--brand-gold, #b08a48) !important;
}

/* Balance spacing above/below the divider regardless of prior hubNav margins */
#privateSecondaryNav #hubNav {
  margin-top: .75rem !important;
  margin-bottom: .75rem !important;
}

/* ===== Mobile lock: force the TOP NAV back into a grid ===== */
@media (max-width: 991.98px){
  /* #hubNav itself becomes the grid */
  #privateSecondaryNav .secondary-nav > #hubNav {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    grid-auto-rows: minmax(116px, 1fr) !important;
    align-content: start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
  }
  /* Flatten wrappers so items fill cells */
  #privateSecondaryNav #hubNav .nav-item { display: contents !important; }
  #privateSecondaryNav #hubNav .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--bs-body-color, #000) !important;
    box-sizing: border-box !important;
  }
}

/* ===== Assistant links: FORCED SINGLE LINE (Horizontal Scroll) ===== */
/* This overrides grid/wrap behaviors from other files to keep buttons in one row */
#assistantNav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;        /* Force single line, NO wrapping */
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.25rem !important;             /* Tighter gap (was 1.9rem) */
  
  overflow-x: auto !important;         /* Allow scroll if they don't fit */
  scrollbar-width: none !important;    /* Hide scrollbar (Firefox) */
  -ms-overflow-style: none !important; /* Hide scrollbar (IE) */
  
  padding: 0.5rem 0.2rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Hide scrollbar (Chrome/Safari) */
#assistantNav::-webkit-scrollbar {
  display: none !important;
}

/* Ensure the wrapper LI doesn't break the flex layout */
#assistantNav .nav-item { 
  display: contents !important; 
}

/* Assistant links styling */
#assistantNav .nav-link,
#assistantNav .btn,
#assistantNav button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 0.4rem !important;
  width: auto !important;
  flex: 0 0 auto !important;           /* Prevent shrinking */
  white-space: nowrap !important;      /* Prevent text wrapping */
  
  min-height: 32px !important;
  padding: 0.2rem 0.5rem !important;
  background: transparent !important;
  border: 0 !important;
  color: #000 !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  position: relative !important;
}

/* Vertical Gold Divider (Re-positioned for the new flex layout) */
/* We target the link directly, not the wrapper */
#assistantNav .nav-link + .nav-link::before,
#assistantNav .nav-item + .nav-item .nav-link::before {
  content: "" !important;
  position: absolute !important;
  left: -0.15rem !important;           /* Place it in the small gap */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 1.2em !important;            /* Shorter, elegant height */
  background: var(--brand-gold, #b08a48) !important;
  opacity: 0.5 !important;
}


/* Make LI wrapper transparent so the link can occupy the grid cell naturally */
#assistantNav .nav-item{ display: contents !important; }


/* Assistant links (no boxes). Keep icon + label inline; allow wrapping. */
#assistantNav .nav-link,
#assistantNav .btn,
#assistantNav button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: start !important;
  gap: .5rem !important;
  width: auto !important;
  /* narrow text column so words stack vertically */
  max-width: 9ch !important;
  min-height: 32px !important;
  padding: 0.105rem 0.20rem !important;
  margin: 0 0.25rem 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #000 !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;      /* let long labels wrap */
  box-sizing: border-box !important;
  text-decoration: none !important;
}

/* Hover: subtle underline */
#assistantNav .nav-link:hover{
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* Active/selected: gold underline (no box) */
#assistantNav .nav-link.active{
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--brand-gold, #b08a48) !important;
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* Focus: keep accessibility without drawing a box */
#assistantNav .nav-link:focus,
#assistantNav .nav-link:focus-visible{
  outline: 2px solid rgba(176,138,72,.35) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  border: 0 !important;
}
#assistantNav .nav-link{
  position: relative;
}

/* Vertical gold divider between assistant links (buttons removed) */
#assistantNav .nav-item + .nav-item .nav-link::before,
#assistantNav .nav-link + .nav-link::before{
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.1em;
  background: var(--brand-gold, #b08a48);
}

/* ============================================================ */
/* FORCE FIX V3: Spread Out, Bigger Text, Reliable Gold Bars    */
/* ============================================================ */

/* 1. The Container */
#assistantNav,
#privateSecondaryNav #assistantNav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important; /* Makes dividers same height */
  justify-content: flex-start !important;
  
  /* Reset spacing to let padding handle the spread */
  gap: 0 !important;
  padding: 0.8rem 0 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  
  width: 100% !important;
  overflow-x: auto !important; /* Scroll if it gets too wide */
  
  /* Hide scrollbars */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#assistantNav::-webkit-scrollbar { display: none !important; }

/* 2. The Wrapper (Holds the button + the border) */
#assistantNav .nav-item {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  
  /* THE GOLD BAR: Hard border on the right */
  border-right: 1px solid var(--brand-gold, #b08a48) !important;
}

/* Remove gold bar from the very last item */
#assistantNav .nav-item:last-child {
  border-right: none !important;
}

/* 3. The Buttons (Text + Icon) */
#assistantNav .nav-link,
#assistantNav .btn,
#assistantNav button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  
  /* SPREAD IT OUT: More padding = wider stance */
  padding: 0 .5rem !important;
  
  /* TEXT: Bigger and Stacked */
  font-size: 0.8rem !important;  /* Bigger text */
  line-height: 1.2 !important;
  color: #000 !important;
  text-align: left !important;
  
  /* Force wrapping for "Social Media Writer" */
  white-space: normal !important; 
  word-wrap: break-word !important;
  max-width: 130px !important;    /* Slightly wider to breathe */
  
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Icon spacing */
#assistantNav i,
#assistantNav svg {
  margin-right: 10px !important;
  font-size: 1.2rem !important;
}

/* Cleanup: Kill any old pseudo-element dividers */
#assistantNav .nav-link::before,
#assistantNav .nav-link::after,
#assistantNav .nav-item::before,
#assistantNav .nav-item::after {
  display: none !important;
  content: none !important;
}