/* ================= TOP BAR STYLES ================= */
/* Modern responsive top bar design for desktop and mobile */

/* CSS Variables for consistent theming */
:root {
  /* Slightly tighter header without compressing any pills/icons */
  --topbar-height: 60px;
  --topbar-height-mobile: 56px;
  /* Dark but transparent with super frosted glass - more see-through */
  --topbar-bg: rgba(8, 8, 10, 0.45);
  --topbar-bg-light: rgba(255, 255, 255, 0.95);
  --topbar-border: rgba(255, 255, 255, 0.08);
  --topbar-border-light: rgba(0, 0, 0, 0.08);
  --topbar-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
  --topbar-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --topbar-backdrop-blur: 40px; /* Super frosted */
  --topbar-saturate: 150%;
  --topbar-padding: 0 40px;
  --topbar-padding-mobile: 0 16px;
  --topbar-gap: 20px;
  --topbar-gap-mobile: 12px;
  --topbar-z-index: 1200;
  --topbar-left-slot-width: 216px;
  /* When the sidebar is open, the sidebar itself owns the brand/navigation lane. */
  --topbar-left-slot-width-sidebar: 0px;
  --topbar-tabs-column-gap: 12px;

  /* Shared header tokens (single source of truth for all Studio headers) */
  --app-header-height: var(--topbar-height);
  --app-header-bg: var(--topbar-bg);
  --app-header-border: var(--topbar-border);
  --app-header-blur: var(--topbar-backdrop-blur);
  --app-header-saturate: var(--topbar-saturate);

  /* Shared pill tokens (neutral) */
  --app-pill-height: 38px;
  --app-pill-bg: rgba(0, 0, 0, 0.7);
  --app-pill-bg-hover: rgba(0, 0, 0, 0.85);
  --app-pill-border: rgba(255, 255, 255, 0.2);
  --app-pill-border-hover: rgba(255, 255, 255, 0.4);
  --app-pill-radius: 24px;
  --app-pill-blur: 20px;
  --app-pill-saturate: 180%;

  /* Shared module left-bar tokens.
     Freeform is the visual reference and source of truth. */
  --mm-module-leftbar-surface: rgba(18, 18, 22, 0.92);
  --mm-module-leftbar-surface-hover: rgba(30, 30, 36, 0.96);
  --mm-module-leftbar-border: rgba(255, 255, 255, 0.18);
  --mm-module-leftbar-border-hover: rgba(255, 255, 255, 0.28);
  --mm-module-leftbar-text: #eef1f7;
  --mm-module-leftbar-text-muted: rgba(238, 241, 247, 0.68);
  --mm-module-leftbar-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  --mm-module-leftbar-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.5);
  --mm-module-leftbar-text-hover: rgba(255, 255, 255, 0.1);
  --mm-module-leftbar-height: 36px;
  --mm-module-leftbar-radius: 16px;
  --mm-module-leftbar-padding: 0 4px 0 14px;
  --mm-module-leftbar-gap: 8px;
  --mm-module-leftbar-font-size: 12px;
  --mm-module-leftbar-label-font-size: 11px;
  --mm-module-leftbar-menu-size: 28px;
  --mm-module-leftbar-menu-radius: 12px;
  --mm-module-leftbar-menu-margin-left: 4px;
  --mm-module-leftbar-chevron-size: 8px;
  --mm-module-leftbar-sidebar-size: 36px;
  --mm-module-leftbar-sidebar-margin: 14px;
  --mm-module-leftbar-sidebar-offset: 14px;
  --mm-module-leftbar-mobile-height: 27px;
  --mm-module-leftbar-mobile-radius: 12px;
  --mm-module-leftbar-mobile-padding: 0 2px 0 12px;
  --mm-module-leftbar-mobile-gap: 6px;
  --mm-module-leftbar-mobile-font-size: 9px;
  --mm-module-leftbar-mobile-menu-size: 20px;
  --mm-module-leftbar-mobile-menu-radius: 10px;
  --mm-module-leftbar-mobile-chevron-size: 7px;
  --mm-module-leftbar-mobile-sidebar-margin: 10px;
  --mm-module-header-toggle-size: 32px;
  --mm-module-header-toggle-mobile-size: 27px;
}

.module-root[data-freeform-theme='light'],
.model3d-editor-root[data-model3d-theme='light'] {
  --mm-module-leftbar-surface: rgba(255, 255, 255, 0.95);
  --mm-module-leftbar-surface-hover: rgba(255, 255, 255, 1);
  --mm-module-leftbar-border: rgba(0, 0, 0, 0.1);
  --mm-module-leftbar-border-hover: rgba(0, 0, 0, 0.2);
  --mm-module-leftbar-text: #222;
  --mm-module-leftbar-text-muted: rgba(0, 0, 0, 0.5);
  --mm-module-leftbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --mm-module-leftbar-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.2);
  --mm-module-leftbar-text-hover: rgba(128, 128, 128, 0.3);
}

/* DISABLED: Force dark mode always - ignore system light mode preference */
/*
@media (prefers-color-scheme: light) {
  :root {
    --topbar-bg: var(--topbar-bg-light);
    --topbar-border: var(--topbar-border-light);
    --topbar-shadow: var(--topbar-shadow-light);
  }
  
  @media (max-width: 768px) {
    :root {
      --topbar-bg: rgba(18, 18, 18, 0.95) !important;
      --topbar-border: rgba(255, 255, 255, 0.08) !important;
      --topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }
  }
}
*/

/* ================= MAIN HEADER OVERRIDE ================= */

.main-header {
  height: var(--topbar-height) !important;
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
  display: flex !important;
  align-items: center !important;
  padding: var(--topbar-padding) !important;
  gap: var(--topbar-gap) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: var(--topbar-z-index) !important;
  pointer-events: auto !important;
  box-shadow: var(--topbar-shadow) !important;
  backdrop-filter: blur(var(--topbar-backdrop-blur)) saturate(var(--topbar-saturate, 100%)) !important;
  -webkit-backdrop-filter: blur(var(--topbar-backdrop-blur)) saturate(var(--topbar-saturate, 100%)) !important;
  /* SYNC margin transitions with .generations-panel: 0.35s cubic-bezier(0.32, 0.72, 0, 1) */
  transition:
    margin-left 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    margin-right 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.3s ease,
    background 0.3s ease !important;
}

.topbar-left-slot {
  display: flex;
  align-items: center;
  gap: var(--topbar-gap);
  width: var(--topbar-left-slot-width);
  min-width: 0;
  flex: 0 0 var(--topbar-left-slot-width);
  overflow: hidden;
}

@media (min-width: 769px) {
  .main-header.has-tabs {
    display: grid !important;
    grid-template-columns: var(--topbar-left-slot-width) minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: var(--topbar-tabs-column-gap) !important;
    row-gap: 0 !important;
    justify-content: stretch !important;
    overflow: visible !important;
    background: rgba(8, 8, 10, 0.3) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset !important;
    backdrop-filter: blur(48px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(48px) saturate(170%) !important;
  }

  .main-header.has-tabs .topbar-left-slot {
    grid-column: 1;
    width: var(--topbar-left-slot-width);
    min-width: 0;
    flex: none;
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  .main-header.has-tabs .workspace-tabs {
    grid-column: 2;
    justify-self: stretch;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .main-header.has-tabs .header-user-section {
    grid-column: 3;
    justify-self: end;
    margin-left: 0 !important;
    min-width: 0 !important;
  }

  .sidebar.open ~ .main-content .main-header.has-tabs {
    grid-template-columns: var(--topbar-left-slot-width-sidebar) minmax(0, 1fr) auto !important;
  }

  .sidebar.open ~ .main-content .main-header.has-tabs .topbar-left-slot {
    width: var(--topbar-left-slot-width-sidebar);
    flex-basis: var(--topbar-left-slot-width-sidebar);
    opacity: 0;
    pointer-events: none;
  }

  .main-header.has-tabs #pricingPill,
  .main-header.has-tabs #tutorialsDropdown,
  .main-header.has-tabs #notificationsDropdown {
    opacity: 0 !important;
    transform: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    animation: none !important;
    transition: none !important;
  }

  .main-header.has-tabs,
  .main-header.has-tabs *,
  body.workspace-mode[data-active-module='freeform'] .main-header.has-tabs,
  body.workspace-mode[data-active-module='freeform'] .main-header.has-tabs *,
  body.workspace-mode.mm-module-header-overlay .main-header.has-tabs,
  body.workspace-mode.mm-module-header-overlay .main-header.has-tabs * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ================= DEV PILL SWITCH ================= */
.dev-pill-switch {
  display: none; /* JS shows on localhost */
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}
.dev-pill-track {
  position: relative;
  width: 30px;
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.25s;
}
.dev-pill-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transition:
    left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.25s;
}
/* ON state (default) */
.dev-pill-switch.on .dev-pill-track {
  background: rgba(255, 255, 255, 0.25);
}
.dev-pill-switch.on .dev-pill-knob {
  left: 18px;
  background: #fff;
}
.dev-pill-text {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.25s;
}
.dev-pill-switch.on .dev-pill-text {
  color: rgba(255, 255, 255, 0.6);
}
.dev-pill-switch:hover .dev-pill-text {
  color: rgba(255, 255, 255, 0.8);
}
.dev-pill-switch:hover .dev-pill-track {
  background: rgba(255, 255, 255, 0.18);
}
.dev-pill-switch.on:hover .dev-pill-track {
  background: rgba(255, 255, 255, 0.32);
}

/* ================= SIMPLE HEADER TEXT LINKS ================= */
/* Simple text-only navigation links (no icons, no capsules) */
.header-text-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 20px;
  transition:
    color 0.2s ease,
    background 0.2s ease;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Entrance animation for header links */
@keyframes headerItemEntrance {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#pricingPill,
#tutorialsDropdown,
#notificationsDropdown {
  opacity: 0;
  animation: headerItemEntrance 0.8s ease forwards;
  max-width: 220px;
  overflow: visible;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    max-width 0.2s ease,
    margin 0.2s ease,
    padding 0.2s ease;
}

#pricingPill {
  animation-delay: 0.1s;
  overflow: hidden;
}
#tutorialsDropdown {
  animation-delay: 0.2s;
}
#notificationsDropdown {
  animation-delay: 0.3s;
}

.header-text-link:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.15);
}

/* Notifications count badge for Messages link */
.header-text-link .notifications-count {
  background: #f44336;
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

/* Hide simple header text links on mobile phones */
@media (max-width: 768px) and (orientation: portrait) {
  .header-text-link {
    display: none !important;
  }
}

/* ================= WORKSPACE MODE: HEADER ABOVE MODULE OVERLAY ================= */
/* When a module is active (freeform, 3D studio, etc.), raise header z-index above
   the module-fullscreen-overlay (z-index: 9999) so hover dropdowns work properly */
body.workspace-mode .main-header {
  z-index: 10001 !important;
  position: sticky !important; /* Ensure position context for z-index */
  pointer-events: auto !important; /* Ensure header receives pointer/hover events */
}

/* Ensure header user section (dropdowns) is also above module overlay */
body.workspace-mode .header-user-section {
  position: relative;
  z-index: 10001 !important;
  pointer-events: auto !important;
  gap: 0 !important;
}

body.workspace-mode[data-active-module='freeform'] .main-header {
  overflow: visible !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  background: rgba(8, 8, 10, 0.3) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset !important;
  backdrop-filter: blur(48px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(170%) !important;
  transform-origin: top center;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
    border-color 0.18s ease,
    left 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    right 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    margin-left 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    margin-right 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    background 0.3s ease !important;
}

body.workspace-mode[data-active-module='freeform'] .main-header > * {
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed .main-header {
  opacity: 0 !important;
  transform: translateY(calc(-100% - 10px)) !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
  .main-header
  > * {
  opacity: 0 !important;
  transform: translateY(-8px);
  pointer-events: none !important;
}

body.workspace-mode.mm-module-header-overlay .main-header {
  overflow: visible !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  background: rgba(8, 8, 10, 0.3) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset !important;
  backdrop-filter: blur(48px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(170%) !important;
  transform-origin: top center;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
    border-color 0.18s ease,
    left 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    right 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    margin-left 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    margin-right 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    background 0.3s ease !important;
}

body.workspace-mode.mm-module-header-overlay .main-header > * {
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

body.workspace-mode.mm-module-header-collapsed .main-header {
  opacity: 0 !important;
  transform: translateY(calc(-100% - 10px)) !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

body.workspace-mode.mm-module-header-collapsed .main-header > * {
  opacity: 0 !important;
  transform: translateY(-8px);
  pointer-events: none !important;
}

@media (min-width: 769px) {
  body.workspace-mode[data-active-module='freeform'] .sidebar.open ~ .main-content .main-header {
    left: var(--sidebar-width) !important;
    right: 0 !important;
    margin-left: 0 !important;
  }

  body.workspace-mode[data-active-module='freeform'] .main-content.generations-open .main-header {
    left: 0 !important;
    right: var(--capsule-panel-width) !important;
    margin-right: 0 !important;
  }

  body.workspace-mode[data-active-module='freeform']
    .sidebar.open
    ~ .main-content.generations-open
    .main-header {
    left: var(--sidebar-width) !important;
    right: var(--capsule-panel-width) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.workspace-mode.mm-module-header-overlay .sidebar.open ~ .main-content .main-header {
    left: var(--sidebar-width) !important;
    right: 0 !important;
    margin-left: 0 !important;
  }

  body.workspace-mode.mm-module-header-overlay .main-content.generations-open .main-header {
    left: 0 !important;
    right: var(--capsule-panel-width) !important;
    margin-right: 0 !important;
  }

  body.workspace-mode.mm-module-header-overlay
    .sidebar.open
    ~ .main-content.generations-open
    .main-header {
    left: var(--sidebar-width) !important;
    right: var(--capsule-panel-width) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* When a non-chat module is active, fade + collapse pricing/tutorials/messages */
body.workspace-mode:not([data-active-module='chat']):not([data-active-module='']) #pricingPill,
body.workspace-mode:not([data-active-module='chat']):not([data-active-module=''])
  #tutorialsDropdown,
body.workspace-mode:not([data-active-module='chat']):not([data-active-module=''])
  #notificationsDropdown {
  opacity: 0 !important;
  transform: translateY(-4px);
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  pointer-events: none !important;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    max-width 0.2s ease 0.12s,
    margin 0.2s ease 0.12s,
    padding 0.2s ease 0.12s;
}

/* Ensure dropdown containers receive hover events */
body.workspace-mode #userDropdown,
body.workspace-mode #tutorialsDropdown,
body.workspace-mode #notificationsDropdown {
  pointer-events: auto !important;
  position: relative;
  z-index: 10001 !important;
}

/* Keep dropdown contents well above the module overlay — ONLY while open.
   Ungated, this made the footer account flyout (opacity:0 but full height at rest)
   an invisible pointer-events:auto box over the canvas, stealing toolbar clicks. */
body.workspace-mode #userDropdown .welcome-dropdown-content.show,
body.workspace-mode #tutorialsDropdown .tutorials-dropdown-content.show,
body.workspace-mode #notificationsDropdown .notifications-dropdown-content.show {
  z-index: 10050 !important;
  pointer-events: auto !important;
}

/* Desktop/tablet: when the project sidebar is open, keep header content snug to the sidebar edge.
   Combined.css shifts the header with `margin-left: var(--sidebar-width)`, but the default left padding
   can make the chat pill + modules feel "too far" from the left. */
@media (min-width: 769px) {
  .sidebar.open ~ .main-content .main-header {
    padding-left: 12px !important;
  }

  .sidebar.open ~ .main-content .main-header:not(.has-tabs) {
    /* Remove gap when sidebar is open since menu-toggle is removed from layout */
    gap: 0 !important;
  }

  /* Reduce workspace-tabs left margin when sidebar is open to maintain consistent spacing */
  /* When sidebar opens, header padding reduces from 40px to 12px, menu-toggle is removed (width: 0), and gap is removed */
  /* This keeps pills at the same distance from the panel edge */
  .sidebar.open ~ .main-content .main-header .workspace-tabs {
    margin-left: 0 !important;
  }
}

/* Header layout with scrollable center area for tabs */

.main-header.has-tabs {
  /* The tabbed header uses stable grid columns; this keeps legacy flex rules inert. */
  justify-content: flex-start !important;
}

/* Scrollable center area for tabs and modules */
.main-header .workspace-tabs {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
  margin: 0 !important;
}

.main-header .workspace-tabs::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
}

/* Ensure tabs don't wrap and stay in a row */
.main-header .workspace-tabs .tab {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Prevent tabs from pushing user section */
.main-header.has-tabs .header-user-section {
  flex-shrink: 0 !important;
  margin-left: 0 !important;
  gap: 0 !important;
}

/* Mobile responsive adjustments for scrollable tabs */
@media (max-width: 768px) {
  .main-header .workspace-tabs {
    max-width: none !important;
    margin: 0 !important;
  }

  /* On very small screens, allow some compression but still protect user section */
  @media (max-width: 480px) {
    .main-header .workspace-tabs {
      max-width: none !important;
      margin: 0 !important;
    }
  }
}

/* Removed blue line below formas.ai header */
/* .main-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--accent-color, #4a9eff), transparent) !important;
  opacity: 0.2 !important;
  transition: opacity 0.3s ease !important;
}

.main-header:hover::after {
  opacity: 0.4 !important;
} */

/* ================= MENU TOGGLE BUTTON ================= */
/* Match Welcome pill button styling (aligns visually with user pill) */
.menu-toggle {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  padding: 0;
  border-radius: var(--app-pill-radius);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--app-pill-height);
  height: var(--app-pill-height);
  min-width: var(--app-pill-height);
  min-height: var(--app-pill-height);
  flex-shrink: 0;
  backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  -webkit-backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  line-height: 1;
  /* Avoid font-glyph hamburger misalignment; we render lines via .menu-toggle-icon */
  font-size: 0;
}

/* Professional hamburger icon (3 crisp lines, centered) - 18% smaller */
.menu-toggle .menu-toggle-icon {
  display: block;
  width: 15px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.92;
  position: relative;
  transform: translateZ(0);
}

.menu-toggle .menu-toggle-icon::before,
.menu-toggle .menu-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 15px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.92;
}

.menu-toggle .menu-toggle-icon::before {
  top: -5px;
}
.menu-toggle .menu-toggle-icon::after {
  top: 5px;
}

/* Sidebar/panel-left SVG icon used by canvasSidebarToggleBtn — sized to
   match the hamburger icon visually. */
.menu-toggle .ff-sidebar-toggle-icon {
  display: block;
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.92;
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.menu-toggle:active {
  transform: translateY(1px);
}

/* Rotate nicely when expanded/open */
.menu-toggle[aria-expanded='true'] {
  transform: rotate(90deg);
}

/* Don't rotate when workspace mode is active (studio is open) */
/* This prevents rotation when opening studios like Instant Narratives */
body.workspace-mode .menu-toggle[aria-expanded='true'] {
  transform: none !important;
}

/* Hide the hamburger when the sidebar is open (we show an X inside the panel) */
.sidebar.open ~ .main-content .main-header .menu-toggle,
.sidebar.open .menu-toggle {
  opacity: 0 !important;
  transform: scale(0.92) translateY(-1px) !important;
  pointer-events: none !important;
  /* Remove from layout flow when sidebar is open to eliminate gap before workspace-tabs */
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ================= TOPBAR LEFT GROUP (toggle + brand, visible only when sidebar closed) ================= */
/* The standalone .menu-toggle button sits at the far left, followed by the
   FORMAS.AI brand (#topbarLogo .topbar-brand) and a vertical divider. The
   triangle SVG is cloned into .topbar-brand-logo at init by mm_ui.js, so the
   polygon fill/stroke/animation rules defined further down in this file apply
   automatically to both instances. The toggle is hidden by the .menu-toggle
   collapse rule earlier in this file; the brand and divider are hidden by the
   parallel rule at the bottom of this section. */

/* Standalone sidebar-toggle icon: SVG sizing + bump to 42px to match the
   unified topbar element height (other callers of --app-pill-height stay 38px). */
.menu-toggle .menu-toggle-svg {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
  stroke-width: 1.75;
}

.main-header .menu-toggle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  color: rgba(255, 255, 255, 0.78);
}

/* FORMAS.AI brand: triangle slot + wordmark. Links to home. */
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px 0 6px;
  background: transparent;
  border: none;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
  user-select: none;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    margin 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    padding 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.topbar-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.topbar-brand-logo .sidebar-logo-triangle {
  width: 28px;
  height: 28px;
}

/* Match the sidebar header branding font (see .sidebar-logo span rule below). */
.topbar-brand-text {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

/* Vertical divider between the brand and the workspace tabs / project title. */
.topbar-brand-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 1px;
  opacity: 1;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    width 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    margin 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Hide the brand and divider (and remove from layout) when sidebar is open.
   Mirrors the .menu-toggle collapse rule earlier in this file so all three
   left-side elements vanish together when the sidebar takes over branding. */
.sidebar.open ~ .main-content .main-header .topbar-brand,
.sidebar.open ~ .main-content .main-header .topbar-brand-divider {
  opacity: 0;
  transform: translateX(-8px);
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  overflow: hidden;
}

.sidebar.open ~ .main-content .main-header:not(.has-tabs) .topbar-left-slot {
  width: 0;
  min-width: 0;
  flex-basis: 0;
  gap: 0;
  opacity: 0;
  pointer-events: none;
}

/* ================= MODULE LEFT BAR ================= */
.mm-module-leftbar {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 0 !important;
  pointer-events: auto !important;
}

.mm-module-header-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--mm-module-header-toggle-size) !important;
  height: var(--mm-module-header-toggle-size) !important;
  min-width: var(--mm-module-header-toggle-size) !important;
  min-height: var(--mm-module-header-toggle-size) !important;
  padding: 0 !important;
  opacity: 0.88 !important;
  background: var(--mm-module-leftbar-surface) !important;
  border: 1px solid var(--mm-module-leftbar-border) !important;
  color: var(--mm-module-leftbar-text) !important;
  box-shadow: var(--mm-module-leftbar-shadow) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease !important;
}

.mm-module-header-toggle:hover,
.mm-module-header-toggle:focus-visible {
  transform: translateY(-1px) !important;
  background: var(--mm-module-leftbar-surface-hover) !important;
  border-color: var(--mm-module-leftbar-border-hover) !important;
  box-shadow: var(--mm-module-leftbar-shadow-hover) !important;
  outline: none !important;
}

.mm-module-header-toggle-icon {
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.mm-module-header-toggle[aria-expanded='true'] .mm-module-header-toggle-icon {
  transform: rotate(180deg);
}

.mm-module-title-pill {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  gap: var(--mm-module-leftbar-gap) !important;
  background: var(--mm-module-leftbar-surface) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: var(--mm-module-leftbar-radius) !important;
  padding: var(--mm-module-leftbar-padding) !important;
  height: var(--mm-module-leftbar-height) !important;
  min-height: var(--mm-module-leftbar-height) !important;
  max-width: 280px !important;
  overflow: hidden !important;
  color: var(--mm-module-leftbar-text) !important;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;
  font-size: var(--mm-module-leftbar-font-size) !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  border: 1px solid var(--mm-module-leftbar-border) !important;
  box-shadow: var(--mm-module-leftbar-shadow) !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mm-module-title-pill:hover {
  transform: translateY(-2px) !important;
  background: var(--mm-module-leftbar-surface-hover) !important;
  border-color: var(--mm-module-leftbar-border-hover) !important;
  box-shadow: var(--mm-module-leftbar-shadow-hover) !important;
}

.mm-module-title-icon {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.78 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

.mm-module-title-label {
  display: flex !important;
  align-items: center !important;
  opacity: 0.72 !important;
  font-size: var(--mm-module-leftbar-label-font-size) !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  color: var(--mm-module-leftbar-text-muted) !important;
  white-space: nowrap !important;
}

.mm-module-title-text {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 2px 2px 2px 0 !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  color: var(--mm-module-leftbar-text) !important;
  transition: background 0.15s ease !important;
}

.mm-module-title-text:hover {
  background: var(--mm-module-leftbar-text-hover) !important;
}

.mm-module-title-menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--mm-module-leftbar-menu-size) !important;
  height: var(--mm-module-leftbar-menu-size) !important;
  min-width: var(--mm-module-leftbar-menu-size) !important;
  min-height: var(--mm-module-leftbar-menu-size) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: var(--mm-module-leftbar-menu-radius) !important;
  border: 1px solid var(--mm-module-leftbar-border) !important;
  background: transparent !important;
  color: var(--mm-module-leftbar-text) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-left: var(--mm-module-leftbar-menu-margin-left) !important;
  align-self: center !important;
  opacity: 0.76 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mm-module-title-menu:hover,
.mm-module-title-menu:focus-visible {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  background: var(--mm-module-leftbar-surface-hover) !important;
  border-color: var(--mm-module-leftbar-border-hover) !important;
  box-shadow: var(--mm-module-leftbar-shadow-hover) !important;
  outline: none !important;
}

.mm-module-chevron-icon {
  width: var(--mm-module-leftbar-chevron-size);
  height: var(--mm-module-leftbar-chevron-size);
  display: block;
  box-sizing: border-box;
  border-right: 2.1px solid currentColor;
  border-bottom: 2.1px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0.9;
}

.mm-module-sidebar-toggle {
  overflow: hidden !important;
  width: 0 !important;
  height: var(--mm-module-leftbar-sidebar-size) !important;
  min-width: 0 !important;
  min-height: var(--mm-module-leftbar-sidebar-size) !important;
  margin-right: 0 !important;
  padding: 0 !important;
  background: var(--mm-module-leftbar-surface) !important;
  border: 1px solid var(--mm-module-leftbar-border) !important;
  color: var(--mm-module-leftbar-text) !important;
  box-shadow: var(--mm-module-leftbar-shadow) !important;
  opacity: 0 !important;
  transform: translateX(calc(-1 * var(--mm-module-leftbar-sidebar-offset))) !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition:
    width 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    min-width 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    margin-right 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease !important;
}

body.workspace-mode.mm-module-header-collapsed .mm-module-sidebar-toggle,
body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
  .mm-module-sidebar-toggle {
  width: var(--mm-module-leftbar-sidebar-size) !important;
  min-width: var(--mm-module-leftbar-sidebar-size) !important;
  margin-right: var(--mm-module-leftbar-sidebar-margin) !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Hide freeform hamburger when sidebar is open — must beat the header-collapsed show rule */
body.workspace-mode .sidebar.open ~ .main-content .mm-module-sidebar-toggle,
body.workspace-mode .sidebar.open ~ .main-content #canvasSidebarToggleBtn {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.mm-module-sidebar-toggle:hover,
.mm-module-sidebar-toggle:focus-visible {
  transform: translateX(0) translateY(-1px) !important;
  background: var(--mm-module-leftbar-surface-hover) !important;
  border-color: var(--mm-module-leftbar-border-hover) !important;
  box-shadow: var(--mm-module-leftbar-shadow-hover) !important;
  outline: none !important;
}

@media (max-width: 768px) {
  .mm-module-header-toggle {
    width: var(--mm-module-header-toggle-mobile-size) !important;
    height: var(--mm-module-header-toggle-mobile-size) !important;
    min-width: var(--mm-module-header-toggle-mobile-size) !important;
    min-height: var(--mm-module-header-toggle-mobile-size) !important;
  }

  .mm-module-title-pill {
    gap: var(--mm-module-leftbar-mobile-gap) !important;
    padding: var(--mm-module-leftbar-mobile-padding) !important;
    height: var(--mm-module-leftbar-mobile-height) !important;
    min-height: var(--mm-module-leftbar-mobile-height) !important;
    border-radius: var(--mm-module-leftbar-mobile-radius) !important;
    font-size: var(--mm-module-leftbar-mobile-font-size) !important;
  }

  .mm-module-title-label,
  .mm-module-title-icon {
    display: none !important;
  }

  .mm-module-title-menu {
    width: var(--mm-module-leftbar-mobile-menu-size) !important;
    height: var(--mm-module-leftbar-mobile-menu-size) !important;
    min-width: var(--mm-module-leftbar-mobile-menu-size) !important;
    min-height: var(--mm-module-leftbar-mobile-menu-size) !important;
    border-radius: var(--mm-module-leftbar-mobile-menu-radius) !important;
  }

  .mm-module-chevron-icon {
    width: var(--mm-module-leftbar-mobile-chevron-size);
    height: var(--mm-module-leftbar-mobile-chevron-size);
  }
}

@media (pointer: coarse) {
  .mm-module-header-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.workspace-mode.mm-module-header-collapsed .mm-module-sidebar-toggle,
  body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
    .mm-module-sidebar-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-right: var(--mm-module-leftbar-mobile-sidebar-margin) !important;
  }
}

/* On mobile, when the sidebar panel is open, fade user controls but keep title visible */
@media (max-width: 768px) {
  .sidebar.open ~ .main-content .main-header .header-user-section,
  .sidebar.open ~ .main-content .main-header #tutorialsDropdown,
  .sidebar.open ~ .main-content .main-header .dropdown,
  .sidebar.open ~ .main-content .main-header #dropBtn {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
  }
  /* Also fade the project title to let the sidebar header show through */
  .sidebar.open ~ .main-content .main-header .main-header-title {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Put the sidebar above the top bar on phones */
  .sidebar.open {
    z-index: 10050 !important; /* Above prompt bar and most UI */
  }
  /* And disable topbar interactions entirely while panel is open */
  .sidebar.open ~ .main-content .main-header {
    pointer-events: none !important;
  }
  /* Ensure the dim overlay also sits above the prompt bar on phones */
  .sidebar-overlay,
  .sidebar-overlay.active {
    z-index: 10040 !important;
  }
}

/* ================= HEADER TITLE SECTION ================= */

.main-header-title {
  flex: 0 0 auto !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0 !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  padding: 0 12px 0 4px !important;
  height: 42px !important;
  border-radius: var(--app-pill-radius, 24px) !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  min-height: 42px !important;
  max-height: 42px !important;
  position: relative !important;
  overflow: hidden !important;
  margin-left: 0 !important;
  max-width: fit-content !important;
  background: rgba(34, 34, 34, 0.25) !important;
  border: 1px solid rgba(119, 119, 119, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* No-project state: hide the “Design Chat” pill entirely until a real project is opened */
.main-header-title.no-project {
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.main-header-title::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  ) !important;
  transition: left 0.5s ease !important;
  border-radius: 50px !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.main-header-title:hover {
  background: linear-gradient(
    135deg,
    rgba(245, 200, 120, 0.12) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(200, 200, 200, 0.08) 100%
  ) !important;
  border-color: rgba(245, 180, 80, 0.3) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(245, 166, 35, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

.main-header-title:hover::before {
  left: 100% !important;
}

.main-header-title h1 {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  max-width: 15ch !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: default !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  z-index: 1 !important;
  text-align: left !important;
  pointer-events: none !important;
}

.main-header-title h1:hover {
  opacity: 0.9 !important;
}

/* Removed "Go to Project Chat" text - header title is no longer clickable */

/* Remove any underline from header title */
.main-header-title {
  text-decoration: none !important;
}

.main-header-title:hover {
  text-decoration: none !important;
}

.main-header-title h1 {
  text-decoration: none !important;
}

.main-header-title h1:hover {
  text-decoration: none !important;
}

/* ================= HEADER SHARED BADGE ================= */

.main-header-title .header-shared-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  opacity: 0 !important;
  transition: opacity 0.6s ease-in-out !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

.main-header-title .header-shared-badge.showing {
  opacity: 1 !important;
}

.main-header-title .header-shared-badge img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.7 !important;
  filter: brightness(0.9) grayscale(0.2) !important;
}

/* ================= PROJECT THUMBNAIL ================= */

.main-header-title .project-thumb {
  width: 28px !important;
  height: 28px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 28px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
  z-index: 1 !important;
  margin: 0 !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
  pointer-events: none !important;
}

/* ================= DESIGN CHAT DEFAULT THUMB (no project selected) ================= */
/* Outline circle with SVG icon so the Design Chat pill never looks empty/broken */
/* Match user-avatar-header styling exactly */
.main-header-title .project-thumb.design-chat-thumb {
  background: transparent !important;
  background-image: none !important;
  color: #BBBBBB !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* SVG icon inside design-chat-thumb */
.main-header-title .project-thumb.design-chat-thumb img {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.92 !important;
}

/* Remove animation for now - debugging */

.main-header-title .project-thumb::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  ) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.main-header-title .project-thumb:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.35) !important;
}

.main-header-title .project-thumb:hover::before {
  opacity: 0 !important;
}

/* ================= FORMAS LOGO ================= */

.main-header-title .formas-logo-link {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  text-decoration-thickness: 0 !important;
  margin-right: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  color: inherit !important;
  border: none !important;
  outline: none !important;
}

.main-header-title .formas-logo-link:hover,
.main-header-title .formas-logo-link:visited,
.main-header-title .formas-logo-link:active,
.main-header-title .formas-logo-link:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  text-decoration-thickness: 0 !important;
  color: inherit !important;
  border: none !important;
  outline: none !important;
}

.main-header-title .formas-logo-link:hover {
  transform: scale(1.05) !important;
}

.main-header-title .formas-logo {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.main-header-title .formas-logo:hover {
  background: rgba(245, 166, 35, 0.15) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.25) !important;
}

/* ================= HEADER USER SECTION ================= */

.header-user-section {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* ================= MOBILE RESPONSIVE STYLES ================= */

@media (max-width: 768px) {
  :root {
    /* Keep mobile header compact (pills are 38px tall) */
    --topbar-height-mobile: 56px;
    --topbar-padding-mobile: 0 12px;
    /* Tight inter-element gap: fixed chrome (menu + user pill + galleries button)
       leaves enough room for the workspace-tabs scroller even at 320px. */
    --topbar-gap-mobile: 6px;
  }

  .main-header {
    height: var(--topbar-height-mobile) !important;
    padding: var(--topbar-padding-mobile) !important;
    gap: var(--topbar-gap-mobile) !important;
    /* Inherit glass styles from desktop but respect mobile height/padding */
    overflow: hidden !important; /* workspace-tabs has its own horizontal scroller */
    min-width: 0 !important;
  }

  .topbar-left-slot {
    width: auto !important;
    flex: 0 0 auto !important;
    gap: var(--topbar-gap-mobile) !important;
  }

  /* PHONE: hide FORMAS brand wordmark + divider to free horizontal space */
  .main-header .topbar-brand,
  .main-header .topbar-brand-divider {
    display: none !important;
  }

  /* PHONE: hide the legacy main-header-title; the active workspace-tab pill already carries the project name */
  .main-header-title {
    display: none !important;
  }

  /* PHONE: hide workspace tabs entirely. Horizontal scroll UX was not discoverable;
     studios are still reachable via the sidebar and the generations panel. This
     frees significant horizontal space for the user pill and galleries button. */
  .main-header .workspace-tabs {
    display: none !important;
  }

  /* PHONE: user section shrinks fluidly so the galleries button + tabs scroller never get clipped */
  .header-user-section {
    flex: 0 1 auto !important;
    margin-left: auto !important;
    gap: 4px !important; /* tight gap between user pill and galleries button */
    min-width: 0 !important;
    justify-content: flex-end !important;
  }

  /* PHONE: pin the cluster to the right edge like desktop. Mobile is flex, where
     line ~621 forces margin-left:0 at equal-or-higher specificity; re-assert auto
     at matching specificity inside the media query so it wins here only. */
  .main-header.has-tabs .header-user-section {
    margin-left: auto !important;
  }

  /* Hide extra pills on phones so the user pill can stretch (tutorials/messages are still reachable via user dropdown) */
  #tutorialsDropdown,
  #notificationsDropdown {
    display: none !important;
  }

  #userDropdown {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  /* User pill shrinks fluidly via flex — no rigid vw cap, no width:100% */
  #userDropdown .user-pill {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 10px 0 4px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  /* Let the user info column shrink and truncate instead of pushing the pill wide */
  #userDropdown .user-pill .user-info {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #userDropdown .user-pill .user-name {
    max-width: 8ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* Galleries button (injected by panelControls.js into .header-user-section):
     never shrink, never hide, WCAG 44x44, tiny margin override. */
  .header-user-section .panel-toggle-arrow {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-left: 0 !important; /* use flex gap instead of hardcoded 10px */
  }

  /* WCAG 2.5.5: minimum 44x44 touch targets on phones */
  .main-header .menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }
  .main-header .workspace-tab {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }
  .main-header #userDropdown .user-pill {
    min-height: 44px !important;
  }

  /* Hide tutorials text on mobile, show only icon */
  .tutorials-btn .tutorials-text {
    display: none !important;
  }

  /* On desktop: show text and smooth enlargement on hover */
  @media (min-width: 769px) {
    .tutorials-btn .tutorials-text {
      display: inline !important;
    }

    /* Smooth button enlargement on hover */
    .tutorials-btn {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
      transform: scale(1);
    }

    .tutorials-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
      border-color: rgba(0, 229, 255, 0.5) !important;
    }
  }

  /* Hide notifications pill on phones (only show on desktop and tablet) */
  .notifications-pill {
    display: none !important;
  }

  /* User pill sizing on phones: fluid via flex-shrink (no rigid cap) */
  #userDropdown .user-pill {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Always show plan badge on phones (PRO / BASIC / UPGRADE) */
  #userDropdown .user-pill .plan-badge-pill {
    display: inline-flex !important;
  }

  .tutorials-btn {
    padding: 12px !important;
    min-width: 44px !important;
    justify-content: center !important;
  }

  .tutorials-icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* Phones ≤480: hide credits pill + divider from inside the user pill so
     plan badge, workspace-tabs scroller, and galleries button all stay visible.
     Credits stay reachable via the user dropdown menu. */
  @media (max-width: 480px) {
    #userDropdown .user-pill {
      min-width: 0 !important;
      width: auto !important;
      max-width: none !important;
      padding: 0 8px 0 4px !important;
      gap: 4px !important;
    }

    #userDropdown .user-pill .credits-display,
    #userDropdown .user-pill .user-pill-divider {
      display: none !important;
    }

    /* Plan badge is the upgrade CTA — always visible on mobile as a non-shrinking pill */
    #userDropdown .user-pill .plan-badge-pill {
      display: inline-flex !important;
      flex: 0 0 auto !important;
    }

    #userDropdown .user-pill .user-name {
      max-width: 6ch !important;
    }
  }

  /* Tiniest phones (≤360px: iPhone SE 1st gen, Galaxy S small): also drop the
     user-info (name) so avatar + plan badge are all that's left in the pill.
     This guarantees the workspace-tabs scroller still has ~90px for the active
     pill and the galleries button is never clipped. */
  @media (max-width: 360px) {
    #userDropdown .user-pill .user-info {
      display: none !important;
    }
  }
}

/* ================= TABLET RESPONSIVE STYLES ================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .main-header-title h1 {
    max-width: 20ch !important;
  }
}

/* ================= SIDEBAR HEADER (MOBILE) ================= */
@media (max-width: 768px) {
  /* Ensure the sidebar header shows logo + text clearly on phones */
  .sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: var(--topbar-height-mobile, 56px) !important;
    min-height: var(--topbar-height-mobile, 56px) !important;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--topbar-border, rgba(255, 255, 255, 0.08)) !important;
    backdrop-filter: blur(var(--topbar-backdrop-blur, 12px)) !important;
    -webkit-backdrop-filter: blur(var(--topbar-backdrop-blur, 12px)) !important;
  }

  .sidebar-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  .sidebar-logo:hover,
  .sidebar-logo:visited,
  .sidebar-logo:active,
  .sidebar-logo:focus {
    text-decoration: none !important;
    color: inherit !important;
  }

  .sidebar-logo img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(128, 128, 128, 0.15) !important;
    padding: 4px !important;
  }

  .sidebar-logo span:not(.beta-badge):not(.beta-label):not(.beta-version) {
    display: inline !important;
    font-weight: 500 !important; /* match welcome lighter logo */
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary, #fff) !important;
    opacity: 0.9 !important;
  }
}

/* ================= DESKTOP LARGE SCREEN STYLES ================= */

@media (min-width: 1025px) {
  .main-header {
    padding: 0 12px !important;
    gap: 12px !important;
  }

  .main-header-title {
    gap: 20px !important;
  }

  .main-header-title h1 {
    max-width: 25ch !important;
    font-size: 16px !important;
    text-align: left !important;
  }

  .header-user-section {
    gap: 24px !important;
  }
}

/* ================= FOCUS STATES FOR ACCESSIBILITY ================= */

/* Menu toggle focus states removed */

.main-header-title:focus-visible {
  outline: 2px solid rgba(245, 166, 35, 0.7) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.15) !important;
}

/* ================= ANIMATIONS ================= */

@keyframes topbarSlideIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.main-header {
  animation: topbarSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ================= HIGH CONTRAST MODE SUPPORT ================= */
/* No backdrop-filter on parent - let the pill handle its own blur */
@media (min-width: 769px) {
  .input-section {
    background: rgba(0, 0, 0, 0) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid transparent !important;
    transition:
      backdrop-filter 0.4s ease,
      -webkit-backdrop-filter 0.4s ease,
      background 0.4s ease,
      border-top-color 0.4s ease !important;
  }
  .input-section:focus-within {
    background: rgba(10, 12, 18, 0.32) !important;
    backdrop-filter: blur(34px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(140%) !important;
    border-top: 1px solid var(--border-subtle) !important;
  }
}

@media (prefers-contrast: high) {
  .main-header {
    border-bottom: 2px solid var(--topbar-border) !important;
  }

  .menu-toggle {
    border: 2px solid var(--text-secondary) !important;
  }

  .main-header-title .project-thumb {
    border: 2px solid var(--text-primary) !important;
  }
}

/* ================= REDUCED MOTION SUPPORT ================= */

@media (prefers-reduced-motion: reduce) {
  .main-header,
  .main-header-title,
  .main-header-title h1,
  .main-header-title .project-thumb,
  .main-header-title .formas-logo {
    transition: none !important;
    animation: none !important;
  }

  .main-header-title:hover,
  .main-header-title h1:hover,
  .main-header-title .project-thumb:hover,
  .main-header-title .formas-logo:hover {
    transform: none !important;
  }
}

/* ================= SMOOTH PROMPT BAR SLIDE (MOBILE) ================= */
@media (max-width: 768px) {
  /* Use transform-based animation so the bar glides to the bottom */
  .input-section {
    top: auto !important;
    bottom: 0 !important;
    transform: translateY(0) !important;
    transition:
      transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
      opacity 0.3s ease,
      padding-bottom 0.4s ease !important;
    will-change: transform;
    /* No backdrop-filter on parent - let the pill handle its own blur */
    background: rgba(0, 0, 0, 0) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .input-section:focus-within {
    background: rgba(10, 12, 18, 0.32) !important;
    backdrop-filter: blur(34px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(140%) !important;
  }

  /* Centered state: position relative to bottom so we can interpolate transform */
  .input-section.no-project {
    /* ALWAYS AT BOTTOM - no transforms */
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    transition: opacity 0.3s ease !important;
    /* No backdrop-filter on parent - let the pill handle its own blur */
    background: rgba(0, 0, 0, 0) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .input-section.no-project:focus-within {
    background: rgba(10, 12, 18, 0.32) !important;
    backdrop-filter: blur(34px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(140%) !important;
  }
}

/* ================= Consistent Golden Beta Badge ================= */
.beta-badge,
.beta-badge--sidebar,
.sidebar-logo .beta-badge {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 5px !important;
  padding: 1px 5px !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  color: #ffd700 !important; /* GOLD text */
  background: #000000 !important; /* BLACK background */
  border: 1px solid #ffd700 !important; /* GOLD outline */
  border-radius: 4px !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 100 !important;
}

/* Explicitly force text color for everything inside the badge */
.beta-badge *,
.beta-badge--sidebar *,
.sidebar-logo .beta-badge * {
  color: #ffd700 !important;
}

.beta-badge .beta-version,
.beta-badge--sidebar .beta-version {
  font-size: 5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-left: 4px !important;
  color: #ffbc40 !important; /* Lighter gold text */
  opacity: 0.9 !important;
  text-shadow: none !important;
  display: inline-block !important;
}

.beta-badge:hover,
.beta-badge--sidebar:hover {
  background: #111111 !important;
  border-color: #ffbc40 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;
}

/* ================= HEADER USER SECTION ================= */

.header-user-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  /* Ensure each dropdown is isolated */
  position: relative;
  height: 42px;
}

/* Ensure all dropdowns in header are vertically centered */
.header-user-section > .dropdown {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

#userDropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#tutorialsDropdown,
#notificationsDropdown {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

/* ================= USER DROPDOWN BUTTON ================= */
/* Exact Welcome pill styling (Studio uses the same look, with credits added) */

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--app-pill-bg);
  color: rgba(255, 255, 255, 0.9);
  /* tighter so the pill hugs content like Welcome */
  padding: 0 12px 0 6px;
  border: 1px solid var(--app-pill-border);
  border-radius: var(--app-pill-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 120px;
  max-width: 220px;
  width: auto;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  position: relative;
  box-shadow: none;
  backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  -webkit-backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  box-sizing: border-box;
  line-height: 1;
}

.user-pill-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.78); /* Brighter divider ~200/255 */
  margin: 0 6px 0 4px;
  flex: 0 0 auto;
}

/* Ensure child elements stay sane (no z-index hacks) */
.user-pill > * {
  position: relative;
}

.user-pill:hover {
  background: var(--app-pill-bg-hover);
  border-color: #ffd700; /* Solid Gold Outline */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); /* Stronger glow */
}

/* Wider on larger screens - accommodate plan badge */
@media (min-width: 769px) {
  .user-pill {
    /* Hug content (avatar · name · plan badge); no forced min-width gap now that
       the credit count + divider no longer live in the pill. */
    min-width: auto;
    max-width: 420px;
    gap: 10px;
  }

  /* Remove mobile constraints for desktop */
  .user-pill .user-name {
    max-width: 18ch !important; /* More space for names */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .user-pill .user-info {
    max-width: none !important;
    flex: 0 1 auto;
    min-width: 0;
  }

  .user-pill .credits-display {
    flex: 0 0 auto;
  }
}

/* ─── Generation Counter (spinning ring + number) ─── */
.gen-counter {
  display: none; /* hidden when 0 active */
  align-items: center;
  justify-content: center;
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-right: 2px;
}

.gen-counter.active {
  display: flex;
}

.gen-counter-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.85);
  animation: gen-spin 0.8s linear infinite;
  transition: border-color 0.3s ease;
}

.gen-counter.at-limit .gen-counter-ring {
  border-top-color: #f5a623;
  border-color: rgba(245, 166, 35, 0.2);
}

.gen-counter-num {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
  z-index: 1;
  transition: color 0.3s ease;
}

.gen-counter.at-limit .gen-counter-num {
  color: #f5a623;
}

/* Spin animation */
@keyframes gen-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Slow-down before removal: applied via JS */
.gen-counter.winding-down .gen-counter-ring {
  animation: gen-spin-slow 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes gen-spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Pop-in */
.gen-counter.pop-in {
  animation: gen-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes gen-pop-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Pop-out */
.gen-counter.pop-out {
  animation: gen-pop-out 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes gen-pop-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* Tick-down blink when count decreases */
.gen-counter-num.gen-tick-down {
  animation: gen-tick-down 0.45s ease-out;
}

@keyframes gen-tick-down {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: scale(1.35);
    opacity: 0.4;
    color: #5cf;
  }
  50% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Even wider on extra large screens */
@media (min-width: 1200px) {
  .user-pill {
    min-width: 240px;
    max-width: 480px;
  }

  .user-pill .user-name {
    max-width: 22ch !important; /* More space for names */
  }
}

/* Extra large screens - more generous name space */
@media (min-width: 1600px) {
  .user-pill {
    min-width: 280px;
    max-width: 520px;
  }

  .user-pill .user-name {
    max-width: 28ch !important; /* More space for names */
  }
}

.user-pill.loading {
  width: 33px;
  min-height: 33px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: relative;
}

.dropbtn.loading .user-info,
.dropbtn.loading .credits-display,
.dropbtn.loading .user-avatar-header {
  display: none;
}

.dropbtn .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-secondary, #666);
  border-top-color: var(--text-primary, #fff);
  border-radius: 50%;
  animation: spin 1s linear infinite !important;
  flex-shrink: 0;
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  opacity: 1 !important;
}

.dropbtn:not(.loading) .spinner {
  display: none;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Prevent dropdown from opening when loading */
.dropdown:has(.dropbtn.loading):hover .dropdown-content {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  pointer-events: none !important;
}

/* ================= USER AVATAR & CREDITS ================= */

/* User avatar in header - clean outline style (no gradient, just letter) */
.user-avatar-header {
  width: 28px;
  height: 28px;
  aspect-ratio: 1 / 1;
  flex: 0 0 28px;
  border-radius: 50%;
  /* Clean black background with outline - no colorful gradient */
  background: rgba(0, 0, 0, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Avatar loading spinner - white circle inside avatar */
.avatar-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: avatarSpin 0.8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

@keyframes avatarSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* When avatar is loaded, hide spinner and show content with smooth fade */
.user-avatar-header.loaded .avatar-loading-spinner {
  opacity: 0;
  pointer-events: none;
}

.user-avatar-header.loaded .avatar-initials-header {
  opacity: 1;
}

/* Initials text styling */
.avatar-initials-header {
  opacity: 0; /* Start hidden, fade in when loaded */
  font-size: 12px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  line-height: 1;
  transition: opacity 0.3s ease 0.15s; /* Delay to let spinner fade first */
}

/* Ensure inner <img> (if ever used) stays perfectly circular */
.user-avatar-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Keep avatar visible on mobile (Welcome parity) */

/* Avatar pop-in animation */
@keyframes avatarPopIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.dropbtn .user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Hug the name; don't grow and shove the plan badge to the pill's far edge. */
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1;
}

.user-pill .user-name {
  font-weight: 600;
  font-size: 14px !important;
  min-width: 0;
  flex-shrink: 1;
  font-family: inherit;
  text-align: left;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Keep verified badge perfectly centered in the name row */
.dropbtn .header-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.dropbtn .header-verified-badge img {
  display: block;
  /* White verified icon - uses brand-core.css variable */
  filter: var(--formas-verified-filter, brightness(0) invert(1));
  -webkit-filter: var(--formas-verified-filter, brightness(0) invert(1));
}

.dropbtn .header-dev-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  line-height: 1;
  flex-shrink: 0;
}

.dropbtn .header-dev-badge-text {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.94);
}

.dropbtn .user-plan,
.dropbtn .plan-badge,
.dropbtn .trial-indicator {
  font-weight: 400;
  font-size: 8px !important;
  opacity: 0.7 !important;
  background: rgba(255, 255, 255, 0.2);
  padding: 1.5px 5px;
  border-radius: 8px;
  flex-shrink: 0;
}

.user-pill .credits-display {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1;
  /* Welcome-style: keep credits inside the pill without creating a second mini-pill */
  background: transparent;
  padding: 0;
  border-radius: 0;
  flex-shrink: 0;
  border: none;
  box-shadow: none;
  position: relative;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.user-pill .credits-label {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.75;
  flex: 0 0 auto;
}

.user-pill .credits-amount {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
}

/* ================= USER PILL PROFESSIONAL STABILITY ================= */
/* Goal: no resizing / no “glitch” when name/credits update. */
#userDropdown .user-pill {
  /* Prevent micro updates from reflowing the whole header */
  contain: layout paint !important;
}

/* Keep name stable and truncated (even on desktop) */
#userDropdown .user-pill .user-name {
  max-width: 20ch !important; /* More space for names */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  #userDropdown .user-pill .user-name {
    /* Let the name take whatever space is available (it will still ellipsis via overflow rules) */
    max-width: none !important;
  }
}

@media (min-width: 1200px) {
  #userDropdown .user-pill .user-name {
    max-width: 18ch !important;
  }
}

/* Keep credits width stable (tabular numerals) */
#userDropdown .user-pill .credits-amount {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' 1 !important;
  min-width: 5ch !important;
  display: inline-block !important;
  text-align: right !important;
}

/* Compact credits - leave more room for name */
#userDropdown .user-pill .credits-display {
  flex: 0 0 auto !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 4px !important;
}

/* Mobile: ensure name gets the remaining width between avatar and credits/plan */
@media (max-width: 768px) {
  #userDropdown .user-pill .user-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #userDropdown .user-pill .user-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* ================= PLAN BADGE PILL (inside user pill) ================= */
.plan-badge-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 9px;
  margin-left: 14px;
  margin-right: -4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  flex-shrink: 0;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.plan-badge-pill .plan-badge-text {
  display: block;
  line-height: 1;
  transform: translateY(0);
}

.plan-badge-pill[data-plan='pro'] {
  background: rgba(178, 102, 70, 0.18);
  color: #f4d6c7;
  border-color: rgba(178, 102, 70, 0.42);
  animation: none;
}

.plan-badge-pill[data-plan='basic'] {
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.18);
  animation: none;
}

.plan-badge-pill[data-plan='free'],
.plan-badge-pill[data-plan='upgrade'] {
  background: #B26646;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  animation: none;
}

.plan-badge-pill[data-plan='pro']::before,
.plan-badge-pill[data-plan='free']::before,
.plan-badge-pill[data-plan='upgrade']::before {
  content: '';
  display: none;
}

.plan-badge-pill[data-plan='upgrade']:hover {
  background: #C1714D;
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.plan-badge-pill[data-plan='pro']:hover {
  transform: none;
  cursor: default;
}

/* Prevent plan badge from triggering parent dropdown hover */
.plan-badge-pill {
  /* Isolate hover events so they don't bubble to parent dropdown */
  pointer-events: auto;
}

/* Hide dropdown when hovering the plan badge */
#userDropdown .welcome-dropdown-content.hide-on-badge-hover {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .plan-badge-pill {
    height: 22px;
    padding: 0 9px;
    font-size: 9px;
    margin-left: 10px;
  }
}

/* ================= WELCOME-STYLE DROPDOWN MENU (USER) ================= */
/* Studio uses click-to-open via `.show`, but this also supports hover parity. */
#userDropdown .welcome-dropdown-content {
  position: absolute;
  top: calc(100% + 8px) !important;
  left: 0; /* Align to LEFT of pill for better UX (away from upgrade badge) */
  right: auto;
  margin-top: 0;
  min-width: 200px;
  max-height: 0;
  overflow: hidden;
  /* translucent tint; blur supplied by body-level .acct-glass-backdrop */
  background: rgba(18, 18, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  z-index: 5000;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  /* Delay on CLOSE to prevent flicker when moving mouse to dropdown */
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
    opacity 0.2s ease 0.15s,
    transform 0.2s ease 0.15s;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* body-level blur layer mirrored under the account panel (escapes the sidebar transform) */
.acct-glass-backdrop {
  position: fixed;
  z-index: 2599; /* under the sidebar (2600) */
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  /* visibility drops the backdrop-filter from the render tree after the fade;
     opacity alone leaves the blur painting in Chromium */
  visibility: hidden;
  transition:
    opacity 0.16s ease,
    visibility 0s linear 0.16s;
  backdrop-filter: blur(40px) saturate(130%);
  -webkit-backdrop-filter: blur(40px) saturate(130%);
}
.acct-glass-backdrop.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.16s ease;
}

/* Invisible bridge area to prevent gap from closing dropdown */
#userDropdown .welcome-dropdown-content::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

/* Also add bridge on the parent dropdown */
#userDropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

#userDropdown:hover .welcome-dropdown-content {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Suppress dropdown when flow-mode context menu is open */
#userDropdown.hover-suppressed .welcome-dropdown-content {
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: none !important;
}

#userDropdown:hover .welcome-dropdown-content,
#userDropdown .welcome-dropdown-content:hover,
#userDropdown .welcome-dropdown-content.show,
#userDropdown .welcome-dropdown-content.keep-open {
  max-height: 640px; /* fits the full credits card + grouped menu without scrolling */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* NO delay on OPEN - instant */
  transition-delay: 0s, 0s, 0s;
}

#userDropdown .welcome-dropdown-content a {
  display: flex;
  align-items: center;
  gap: 14px; /* More space between icon and text */
  padding: 14px 18px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* Brighter dividers */
  transition: background 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

#userDropdown .welcome-dropdown-content a:last-child {
  border-bottom: none;
}

/* Message count badge INLINE with "MESSAGES" in dropdown */
.dropdown-message-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: 100px;
  background: rgba(244, 67, 54, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

#userDropdown .welcome-dropdown-content a:hover {
  background: rgba(255, 255, 255, 0.12); /* Brighter hover for visibility */
}

#userDropdown .welcome-dropdown-content .dropdown-icon {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  min-width: 14px;
  min-height: 14px;
  object-fit: contain;
  opacity: 0.85; /* 30% brighter than 0.6 */
  flex-shrink: 0;
}

/* Image icons need filter to become light */
#userDropdown .welcome-dropdown-content img.dropdown-icon {
  filter: brightness(0) invert(0.92); /* 30% brighter */
}

#userDropdown .welcome-dropdown-content a:hover img.dropdown-icon {
  filter: brightness(0) invert(1);
}

/* SVG icons use stroke color directly */
#userDropdown .welcome-dropdown-content svg.dropdown-icon {
  stroke: rgba(255, 255, 255, 0.92); /* 30% brighter */
}

#userDropdown .welcome-dropdown-content a:hover svg.dropdown-icon {
  stroke: rgba(255, 255, 255, 1);
}

#userDropdown .welcome-dropdown-content a:hover .dropdown-icon {
  opacity: 1;
}

/* Golden accent for Log Out (Brand theme) */
#userDropdown .welcome-dropdown-content a#logOut {
  color: rgba(255, 165, 0, 0.92);
}

#userDropdown .welcome-dropdown-content a#logOut:hover {
  background: rgba(255, 165, 0, 0.08);
}

#userDropdown .welcome-dropdown-content a#logOut .dropdown-icon {
  opacity: 0.85;
}

#userDropdown .welcome-dropdown-content a#logOut svg.dropdown-icon {
  stroke: rgba(255, 165, 0, 0.85);
}

#userDropdown .welcome-dropdown-content a#logOut:hover svg.dropdown-icon {
  stroke: rgba(255, 165, 0, 1);
}

/* ===== ACCOUNT DROPDOWN: credits card + grouped menu (Krea/Lovable-style) ===== */
/* Width tracks the pill (never narrower) with a comfortable floor; height fits
   every item so the menu never scrolls. */
#userDropdown .welcome-dropdown-content {
  width: 264px;
  min-width: 100%;
}
#userDropdown .welcome-dropdown-content.show,
#userDropdown .welcome-dropdown-content.keep-open,
#userDropdown:hover .welcome-dropdown-content,
#userDropdown .welcome-dropdown-content:hover {
  max-height: 640px; /* exceeds full content height → all visible, no scroll */
  overflow: hidden;
}

/* Menu rows: grouping comes from .dd-divider, not a line under every item */
#userDropdown .welcome-dropdown-content a {
  border-bottom: none;
}

/* Group separators — flush against the rows (no margin) so a row's hover
   highlight runs right up to the divider with no awkward gap. */
#userDropdown .dd-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0;
}

/* Credits card — groups with the Upgrade/Buy rows (no divider between them) */
#userDropdown .dd-credits-card {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  padding: 14px 18px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  font: inherit;
  color: inherit;
}

#userDropdown .dd-credits-card:hover {
  background: rgba(255, 255, 255, 0.09);
}

#userDropdown .dd-credits-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#userDropdown .dd-credits-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

#userDropdown .dd-credits-remaining {
  margin-left: auto;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

#userDropdown .dd-credits-remaining .credits-amount {
  font-variant-numeric: tabular-nums;
}

#userDropdown .dd-credits-chevron {
  stroke: rgba(255, 255, 255, 0.5);
  flex: 0 0 auto;
}

#userDropdown .dd-credits-card:hover .dd-credits-chevron {
  stroke: rgba(255, 255, 255, 0.85);
}

/* Stacked bar drains right→left: top-up (left, spent last) beside monthly (right, spent first) */
#userDropdown .dd-credits-bar {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 7px;
  margin-bottom: 10px;
}

#userDropdown .dd-credits-seg {
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 auto;
}

#userDropdown .dd-credits-seg-monthly {
  background: rgba(255, 255, 255, 0.14);
}

/* Top-up credits: a distinct segment, only present when the user has them */
#userDropdown .dd-credits-seg-topup {
  background: #4a9eff;
}

/* Monthly remaining is anchored left; the spent portion opens up on the right. */
#userDropdown .dd-credits-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ffd24a, #ffb020);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Detail lines: active source (with color-matched dot), reset date, top-up expiry */
#userDropdown .dd-credits-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#userDropdown .dd-credits-source {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 600;
}

#userDropdown .dd-credits-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #ffb020; /* monthly (default) */
}

/* Dot color indicates which bucket is being drawn from */
#userDropdown .dd-credits-dot[data-source='monthly'] { background: #ffb020; }
#userDropdown .dd-credits-dot[data-source='topup'] { background: #4a9eff; }

#userDropdown .dd-credits-detail {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

/* FOR-222: lift the reset line out of the muted default so credit-reset timing registers */
#userDropdown #creditsResetLine {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* Top-up detail picks up the top-up accent so the buckets stay visually linked */
#userDropdown .dd-credits-detail--topup {
  color: rgba(120, 180, 255, 0.85);
}

/* ================= MESSAGES PILL (MATCH TUTORIALS) ================= */
.notifications-pill {
  background: var(--app-pill-bg);
  backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  -webkit-backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  color: rgba(255, 255, 255, 0.9);
  padding: 0 6px 0 14px; /* Less right padding to accommodate badge */
  border: 1px solid var(--app-pill-border);
  border-radius: var(--app-pill-radius);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  box-shadow: none;
  transition:
    opacity 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  height: var(--app-pill-height);
  min-height: var(--app-pill-height);
  max-height: var(--app-pill-height);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible; /* Allow badge to display properly */
  opacity: 0.85; /* ~10% calmer when idle */
}

.notifications-pill:hover {
  background: var(--app-pill-bg-hover);
  border-color: #ffd700; /* Intense Gold */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  opacity: 1;
}

/* Soft glass shine for Messages pill (matches Tutorials behavior, full sweep) */
#notificationsDropdown .notifications-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  border-radius: 50px;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  clip-path: inset(0 round 50px);
  overflow: hidden;
  transform: translateX(-120%);
  transition:
    transform 0.75s ease,
    opacity 0.2s ease;
}

#notificationsDropdown .notifications-pill:hover::before {
  transform: translateX(120%);
  opacity: 1;
}

/* Prevent Messages shine from appearing anywhere else */
#tutorialsDropdown .notifications-pill::before,
#userDropdown .notifications-pill::before,
.dropdown:not(#notificationsDropdown) .notifications-pill::before {
  display: none !important;
}

/* (removed) old generations header close positioning; search-only header is styled later */

/* ================= TUTORIALS PILL ================= */

/* Tutorials dropdown wrapper - no extra spacing */
#tutorialsDropdown {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  /* CRITICAL: Isolate to prevent shine interference, but don't use contain to avoid breaking dropdown */
  isolation: isolate;
  position: relative; /* anchor dropdown under the Tutorials pill */
}

/* Tutorials Pill - Matching welcome.html user-pill style */
.tutorials-pill {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: rgba(255, 255, 255, 0.9);
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  box-shadow: none;
  transition:
    opacity 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0.85; /* ~10% calmer when idle */
}

.tutorials-pill:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: #ffd700; /* Intense Gold */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  opacity: 1;
}

/* Soft shiny glass effect - for tutorials and pricing pills */
#tutorialsDropdown .tutorials-pill::before,
.pricing-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0; /* Use right:0 instead of width:100% for proper containment */
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  border-radius: 50px;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  /* CRITICAL: Clip to pill shape so gradient doesn't overshoot */
  clip-path: inset(0 round 50px);
  overflow: hidden;
  transform: translateX(-120%);
  transition:
    transform 0.75s ease,
    opacity 0.2s ease;
}

/* ONLY trigger when hovering the pills themselves */
#tutorialsDropdown .tutorials-pill:hover::before,
.pricing-pill:hover::before {
  transform: translateX(120%);
  opacity: 1;
}

/* Prevent tutorials shine from appearing anywhere else */
#userDropdown .tutorials-pill::before,
#notificationsDropdown .tutorials-pill::before,
.dropdown:not(#tutorialsDropdown) .tutorials-pill:not(.pricing-pill)::before {
  display: none !important;
}

.pricing-pill {
  text-decoration: none !important;
  margin-right: 4px !important;
}

.pricing-icon {
  width: 16px;
  height: 16px;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
  stroke: currentColor;
}

.tutorials-icon {
  width: 16px;
  height: 16px;
  opacity: 0.9;
  /* Keep filter CONSTANT - never change it to avoid any visual glitch */
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.notifications-icon {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
  opacity: 0.9;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.notifications-pill:hover .notifications-icon {
  opacity: 1;
}

/* ================= NOTIFICATIONS COUNT BADGE (PILL - bigger, glowing, edge-aligned) ================= */
.notifications-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  margin-left: auto;
  margin-right: -4px; /* Align with pill edge */
  border-radius: 50%;
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1;
  box-shadow:
    0 2px 8px rgba(244, 67, 54, 0.6),
    0 0 16px rgba(244, 67, 54, 0.4),
    0 0 24px rgba(244, 67, 54, 0.2);
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  animation: notificationBadgeGlow 2s ease-in-out 3;
}

@keyframes notificationBadgeGlow {
  0%,
  100% {
    box-shadow:
      0 2px 8px rgba(244, 67, 54, 0.5),
      0 0 12px rgba(244, 67, 54, 0.3);
  }
  50% {
    box-shadow:
      0 2px 12px rgba(244, 67, 54, 0.8),
      0 0 24px rgba(244, 67, 54, 0.6),
      0 0 40px rgba(244, 67, 54, 0.3);
  }
}

/* When count is hidden, don't animate */
.notifications-count[style*='display: none'] {
  animation: none;
}

.tutorials-pill:hover .tutorials-icon,
.tutorials-pill:hover .pricing-icon {
  opacity: 1;
  /* NO filter change - icon stays pure white, no glitch */
}

.tutorials-text {
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  color: rgba(255, 255, 255, 0.85);
}

.tutorials-pill:hover .tutorials-text {
  max-width: 100px;
  opacity: 1;
  color: rgba(255, 255, 255, 1);
}

/* Show tutorials text on desktop */
@media (min-width: 769px) {
  .tutorials-text {
    max-width: 100px;
    opacity: 1;
    color: rgba(255, 255, 255, 0.85);
  }
}

/* Tutorials dropdown content - Matching user dropdown exactly */
.tutorials-dropdown-content {
  display: block; /* Always block, visibility controlled by opacity/height */
  visibility: hidden;
  position: absolute;
  top: calc(100% + 8px) !important; /* Match user dropdown spacing */
  left: 0 !important; /* keep it directly under the Tutorials pill */
  right: auto !important;
  width: 320px; /* Wider to fit full text without trimming */
  max-height: 0;
  overflow: hidden;

  /* Black glassy background - SAME as user dropdown */
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* Delay on CLOSE to prevent flicker when moving mouse to dropdown */
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
    opacity 0.2s ease 0.15s,
    transform 0.2s ease 0.15s,
    visibility 0.15s 0.15s;

  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  z-index: 10000;
  padding: 0; /* Padding handled by margins on items */
}

/* Invisible bridge on tutorials dropdown ::before */
.tutorials-dropdown-content::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

/* Hover bridge on parent */
#tutorialsDropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
  background: transparent;
  display: block;
}

/* Show dropdown on hover, click (.show), or JS hover-bridge (.keep-open) */
#tutorialsDropdown:hover .tutorials-dropdown-content,
#tutorialsDropdown .tutorials-dropdown-content:hover,
#tutorialsDropdown .tutorials-dropdown-content.show,
#tutorialsDropdown .tutorials-dropdown-content.keep-open {
  visibility: visible;
  max-height: 240px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  /* NO delay on OPEN - instant */
  transition-delay: 0s, 0s, 0s, 0s;
}

/* Tutorial item styling - Match user dropdown items exactly */
.tutorial-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* Brighter dividers */
  background: transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.tutorial-item:first-child {
  border-radius: 14px 14px 0 0;
}

.tutorial-item:last-child {
  border-bottom: none;
  border-radius: 0 0 14px 14px;
}

.tutorial-item:hover {
  background: rgba(255, 255, 255, 0.12); /* Brighter hover for visibility */
  color: #fff;
}

/* Number styling */
.tutorial-number {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  min-width: 16px;
}

.tutorial-item:hover .tutorial-number {
  color: rgba(255, 255, 255, 0.7);
}

/* Name styling - single line, ellipsize if it overflows */
.tutorial-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  min-width: 0;
  flex: 1;
}

.coming-soon-badge {
  margin-left: 8px;
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hide Tutorials in phone portrait */
@media (max-width: 768px) and (orientation: portrait) {
  #tutorialsDropdown,
  .tutorials-pill,
  .tutorials-dropdown-content {
    display: none !important;
  }
}

/* ================= NOTIFICATIONS PILL ================= */

/* Notifications Pill */
/* (removed) legacy notifications pill block (Messages pill is defined earlier to match Tutorials exactly). */

/* Notifications Dropdown */
#notificationsDropdown {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  position: relative;
  /* CRITICAL: Isolate to prevent shine interference, but don't use contain to avoid breaking dropdown */
  isolation: isolate;
}

.notifications-dropdown-content {
  position: absolute;
  top: calc(100% + 8px); /* Match user dropdown spacing */
  left: 0; /* Align left like tutorials */
  right: auto;
  min-width: 280px;
  max-width: 320px;
  max-height: 0;
  overflow: hidden;
  /* Black glassy background - SAME as user dropdown */
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  z-index: 100000;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  /* Delay on CLOSE to prevent flicker */
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
    opacity 0.2s ease 0.15s,
    transform 0.2s ease 0.15s;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* Invisible bridge on notifications dropdown ::before */
.notifications-dropdown-content::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

/* Bridge on parent */
#notificationsDropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

#notificationsDropdown:hover .notifications-dropdown-content,
.notifications-dropdown-content:hover {
  max-height: 320px; /* Room for multiple messages */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s; /* Remove delay when opening */
}

/* Empty state message */
.notifications-empty-message {
  color: rgba(255, 255, 255, 0.5);
  padding: 16px 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Hide empty message when there are preview items */
.notifications-dropdown-content:has(.notification-item) .notifications-empty-message,
.notifications-dropdown-content:has(.notifications-preview-list:not(:empty))
  .notifications-empty-message {
  display: none;
}

/* Preview list container */
.notifications-preview-list {
  display: flex;
  flex-direction: column;
}

/* Message preview item - EXACTLY like username/tutorial dropdown */
/* Scoped to .notifications-preview-list to avoid conflicts with modal styles */
.notifications-preview-list .notification-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: background 0.2s ease;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.notifications-preview-list .notification-item:first-child {
  border-radius: 14px 14px 0 0;
}

.notifications-preview-list .notification-item:last-child {
  border-bottom: none;
  border-radius: 0 0 14px 14px;
}

.notifications-preview-list .notification-item:hover {
  background: rgba(255, 255, 255, 0.12); /* Brighter hover for visibility */
  color: #fff;
}

/* Unread count badge - red outline circle with number */
.notifications-preview-list .notification-icon-wrap {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

.notifications-preview-list .notification-icon-wrap img {
  display: none; /* Hide icon, show number instead */
}

/* When unread: red outline with red number */
.notifications-preview-list .notification-item.unread .notification-icon-wrap {
  border-color: #f44336;
  color: #f44336;
  background: transparent;
}

/* Title - SCOPED to preview list */
.notifications-preview-list .notification-title {
  flex: 1;
  min-width: 0;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important; /* White and prominent */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
}

/* Time - SCOPED to preview list to avoid conflicts with modal */
.notifications-preview-list .notification-time {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* ================= SIGN IN & UPGRADE BUTTONS ================= */

.signin-btn {
  background: var(--accent-color, #4a9eff);
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.signin-btn:hover {
  background: #3b82f6;
}

/* Upgrade Button */
.upgrade {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.9), rgba(52, 199, 89, 0.7));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  padding: 4px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.upgrade:hover {
  background: linear-gradient(135deg, rgba(52, 199, 89, 1), rgba(52, 199, 89, 0.8));
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
  transform: translateY(-1px);
}

.upgrade.pro {
  background: linear-gradient(135deg, rgba(204, 204, 204, 0.9), rgba(170, 170, 170, 0.7));
  color: rgba(255, 255, 255, 0.9);
  cursor: default;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.upgrade.pro:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Shiny Pro Upgrade Button with Glassmorphism */
.upgrade-pro-shiny {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 200, 87, 0.95),
    rgba(255, 170, 0, 0.85),
    rgba(255, 145, 0, 0.9)
  ) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  color: #000 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  box-shadow:
    0 4px 15px rgba(255, 170, 0, 0.4),
    0 2px 6px rgba(255, 200, 87, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  overflow: hidden;
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* Shine overlay element */
.upgrade-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  animation: shine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(0%) translateY(0%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow:
      0 4px 15px rgba(255, 170, 0, 0.4),
      0 2px 6px rgba(255, 200, 87, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow:
      0 6px 25px rgba(255, 170, 0, 0.6),
      0 3px 10px rgba(255, 200, 87, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}

.upgrade-pro-shiny:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 110, 1),
    rgba(255, 185, 20, 0.95),
    rgba(255, 160, 10, 1)
  ) !important;
  box-shadow:
    0 6px 25px rgba(255, 170, 0, 0.6),
    0 3px 12px rgba(255, 200, 87, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.upgrade-pro-shiny:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow:
    0 2px 10px rgba(255, 170, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 2px 3px rgba(0, 0, 0, 0.2) !important;
}

/* =========================================================
   FLAT UPGRADE PILL (Projects limit) — override shiny/3D
   Matches the flat feel of the plan badge in the user pill.
   These buttons carry classes like:
   - .upgrade .upgrade-pro-shiny .project-upgrade-pill
   - .upgrade .upgrade-pro-shiny .free-plan-upgrade-button
   topbar.css loads AFTER combined.css, so overrides live here.
   ========================================================= */
.project-upgrade-pill,
.free-plan-upgrade-button {
  background: #f5a623 !important;
  background-color: #f5a623 !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  transform: none !important;
  transition:
    opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.project-upgrade-pill:hover,
.project-upgrade-pill:focus,
.project-upgrade-pill:focus-visible,
.project-upgrade-pill:active,
.free-plan-upgrade-button:hover,
.free-plan-upgrade-button:focus,
.free-plan-upgrade-button:focus-visible,
.free-plan-upgrade-button:active {
  background: #f5a623 !important; /* Never fall back to black */
  background-color: #f5a623 !important;
}

.project-upgrade-pill:hover,
.free-plan-upgrade-button:hover {
  opacity: 0.92 !important;
  transform: none !important;
  box-shadow: none !important;
}

.project-upgrade-pill:active,
.free-plan-upgrade-button:active {
  opacity: 0.86 !important;
  transform: none !important;
}

.project-upgrade-pill .upgrade-shine,
.free-plan-upgrade-button .upgrade-shine {
  display: none !important;
}

/* =========================================================
   Capsules panel open: header push handled in combined.css
   (margin-right: var(--capsule-panel-width) on .main-header)
   ========================================================= */

/* ================= MOBILE RESPONSIVE OVERRIDES ================= */

/* Mobile Dropdown Button Optimizations */
@media (max-width: 768px) {
  .dropdown .dropbtn {
    font-size: 12px;
    padding: 6px 10px;
    max-width: 120px;
    gap: 6px;
  }

  .dropbtn .user-name {
    font-size: 12px;
    font-weight: 600;
    max-width: 24px;
    overflow: hidden;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    text-align: left;
  }

  .dropbtn .user-plan,
  .dropbtn .plan-badge,
  .dropbtn .trial-indicator,
  .dropbtn .subscription-status {
    display: none !important;
  }

  .dropbtn .credits-display {
    font-size: 11px;
    padding: 2px 6px;
    gap: 3px;
    /* Mobile: keep credits readable but no grey mini-pill background */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .dropbtn .user-email {
    display: none !important;
  }

  .dropbtn .user-info {
    gap: 4px;
    max-width: 100px;
  }
}

/* Extra Small Screens (375px and below) */
@media (max-width: 375px) {
  .dropdown .dropbtn {
    max-width: 90px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .dropbtn .user-name {
    font-size: 11px;
    max-width: 20px;
    font-family: 'Roboto', sans-serif;
    text-align: left;
  }

  .dropbtn .credits-display {
    font-size: 10px;
    padding: 2px 5px;
  }

  .dropbtn .credits-coin {
    width: 10px;
    height: 10px;
    font-size: 6px;
  }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .user-pill {
    max-width: 320px !important;
    font-size: 11px !important;
  }

  .user-pill .user-name {
    max-width: 10ch !important;
  }

  .plan-badge-pill {
    height: 20px;
    padding: 0 8px;
    font-size: 8px;
  }
}

/* Sidebar Section Title - Lighter Grey */
.sidebar-section-title {
  color: #999999 !important; /* Lighter grey for SUPER STUDIOS */
}

/* ================= EXCLUSIVE HOVER BEHAVIOR ================= */
/* When hovering one dropdown, strictly hide others */

/* Hovering Tutorials -> Hide Messages & User */
.header-user-section:has(#tutorialsDropdown:hover)
  #notificationsDropdown
  .notifications-dropdown-content,
.header-user-section:has(#tutorialsDropdown:hover) #userDropdown .dropdown-content {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  max-height: 0 !important;
  transform: translateY(-10px) !important;
}

/* Hovering Messages -> Hide Tutorials & User */
.header-user-section:has(#notificationsDropdown:hover)
  #tutorialsDropdown
  .tutorials-dropdown-content,
.header-user-section:has(#notificationsDropdown:hover) #userDropdown .dropdown-content {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  max-height: 0 !important;
  transform: translateY(-10px) !important;
}

/* Hovering User -> Hide Tutorials & Messages */
.header-user-section:has(#userDropdown:hover) #tutorialsDropdown .tutorials-dropdown-content,
.header-user-section:has(#userDropdown:hover)
  #notificationsDropdown
  .notifications-dropdown-content {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  max-height: 0 !important;
  transform: translateY(-10px) !important;
}

/* ================= MODULE FOCUS: CLICK-ONLY DROPDOWNS ================= */
/* When a module (not chat) is active, disable hover-to-open behavior.
   Users must click to open dropdowns. This prevents accidental menu triggers
   while using drawing/editing tools in freeform, editor, 3D studio, etc. */

/* Disable hover-to-open for user dropdown when module is in focus */
body.workspace-mode:not([data-active-module='chat']):not([data-active-module=''])
  #userDropdown:hover
  .welcome-dropdown-content:not(.show) {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px) !important;
}

/* Disable hover-to-open for tutorials dropdown when module is in focus */
body.workspace-mode:not([data-active-module='chat']):not([data-active-module=''])
  #tutorialsDropdown:hover
  .tutorials-dropdown-content:not(.show) {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px) !important;
}

/* Disable hover-to-open for notifications dropdown when module is in focus */
body.workspace-mode:not([data-active-module='chat']):not([data-active-module=''])
  #notificationsDropdown:hover
  .notifications-dropdown-content:not(.show) {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px) !important;
}

/* When .show class is present (clicked), show dropdowns regardless of module state */
body.workspace-mode #userDropdown .welcome-dropdown-content.show,
body.workspace-mode #tutorialsDropdown .tutorials-dropdown-content.show,
body.workspace-mode #notificationsDropdown .notifications-dropdown-content.show {
  max-height: 320px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* The user dropdown now carries the credits card + grouped menu, so it's taller
   than the legacy 320px cap above. Fit the full content; only scroll when the
   viewport is genuinely too short. Wins via equal specificity + later + !important
   (incl. over the workspace-mode rule). */
#userDropdown .welcome-dropdown-content.show,
#userDropdown .welcome-dropdown-content.keep-open,
#userDropdown:hover .welcome-dropdown-content,
#userDropdown .welcome-dropdown-content:hover,
body.workspace-mode #userDropdown .welcome-dropdown-content.show {
  max-height: min(640px, calc(100dvh - 96px)) !important;
  overflow-y: auto !important;
}

/* ================= NEW MESSAGE ANIMATIONS ================= */

@keyframes messageGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    border-color: rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.6);
    border-color: rgba(244, 67, 54, 0.5);
    background: rgba(244, 67, 54, 0.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

@keyframes countHeartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

.notifications-pill.new-message-glow {
  animation: messageGlow 2s ease-in-out infinite;
  transition: all 0.3s ease;
}

.notifications-pill.new-message-glow .notifications-count {
  animation: countHeartbeat 1.5s ease-in-out infinite;
  background: #ff1744 !important; /* Brighter red */
  box-shadow: 0 2px 8px rgba(255, 23, 68, 0.4);
}

/* ================= SIDEBAR HEADER (PROJECT PANEL) ================= */
/* Keep sidebar header visually identical to the main topbar (Welcome parity) */
.sidebar-header {
  height: var(--app-header-height);
  min-height: var(--app-header-height);
  max-height: var(--app-header-height);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px; /* Reduced gap */
  text-decoration: none;
  color: inherit;
  font-size: 13px; /* Reduced from 16px */
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* Sidebar Triangular Logo (Procedural SVG) */
.sidebar-logo-triangle {
  display: inline-block;
  position: relative;
  width: 22px; /* Reduced further from 28px/24px */
  height: 22px;
  isolation: isolate;
  contain: layout style paint;
  transform: translateZ(0);
}

.sidebar-logo-triangle svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.sidebar-logo-triangle polygon {
  stroke-width: 3; /* Even thicker stroke for visibility at tiny size */
  fill: #ffd700; /* Fallback color */
  stroke: #ffd700; /* Fallback stroke */
  fill-opacity: 1; /* Start visible */
  stroke-opacity: 1; /* Start visible */
  opacity: 1;
  transform-origin: center;
  will-change: transform, fill-opacity, stroke-opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Faster than 12s but slower than 4.6s for sidebar elegance */
  animation: welcomeTriangleFade 8s ease-in-out infinite;
}

/* Golden orange gradient - matching original FORMAS brand */
.sidebar-logo-triangle polygon:nth-child(1) {
  fill: #ffd700;
  stroke: #ffd700; /* Pure Gold */
  transform-origin: 16.667px 16.667px;
  animation-delay: 0s;
}
.sidebar-logo-triangle polygon:nth-child(2) {
  fill: #ffa500;
  stroke: #ffa500; /* Orange */
  transform-origin: 50px 16.667px;
  animation-delay: 0.1s;
}
.sidebar-logo-triangle polygon:nth-child(3) {
  fill: #ffbc40;
  stroke: #ffbc40; /* Light gold/amber */
  transform-origin: 83.333px 16.667px;
  animation-delay: 0.2s;
}
.sidebar-logo-triangle polygon:nth-child(4) {
  fill: #ffa500;
  stroke: #ffa500; /* Orange */
  transform-origin: 16.667px 50px;
  animation-delay: 0.3s;
}
.sidebar-logo-triangle polygon:nth-child(5) {
  fill: #ffd700;
  stroke: #ffd700; /* Pure Gold */
  transform-origin: 50px 50px;
  animation-delay: 0.4s;
}
.sidebar-logo-triangle polygon:nth-child(6) {
  fill: #ffbc40;
  stroke: #ffbc40; /* Light gold/amber */
  transform-origin: 16.667px 83.333px;
  animation-delay: 0.5s;
}

@keyframes welcomeTriangleFade {
  0% {
    stroke-opacity: 0;
    fill-opacity: 0;
    transform: rotate(0deg) translateZ(0);
  }
  8% {
    stroke-opacity: 1;
    fill-opacity: 0;
    transform: rotate(0deg) translateZ(0);
  }
  20% {
    stroke-opacity: 1;
    fill-opacity: 1;
    transform: rotate(0deg) translateZ(0);
  }
  35% {
    stroke-opacity: 1;
    fill-opacity: 1;
    transform: rotate(0deg) translateZ(0);
  }
  50% {
    stroke-opacity: 1;
    fill-opacity: 1;
    transform: rotate(180deg) translateZ(0);
  }
  65% {
    stroke-opacity: 1;
    fill-opacity: 1;
    transform: rotate(180deg) translateZ(0);
  }
  80% {
    stroke-opacity: 1;
    fill-opacity: 0;
    transform: rotate(180deg) translateZ(0);
  }
  100% {
    stroke-opacity: 0;
    fill-opacity: 0;
    transform: rotate(180deg) translateZ(0);
  }
}

.sidebar-logo span:not(.beta-badge):not(.beta-label):not(.beta-version) {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 13px;
  transition: opacity 0.3s ease;
}

/* Discrete beta badge for sidebar - pill shape with grey outline */
.sidebar-logo .beta-badge,
.sidebar-logo .beta-badge * {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  background: transparent !important;
  border: 1px solid rgba(128, 128, 128, 0.5) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 2px 7px !important;
  margin-left: 5px !important;
}

.sidebar-logo .beta-badge .beta-version {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 8px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar-logo .beta-badge .beta-label {
  border: none !important;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;
}

/* Keep welcome/pricing pages with original beta badge styling */
.logo .beta-badge,
.logo .beta-badge * {
  -webkit-text-fill-color: #ffd700 !important;
  background: #000000 !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

.logo .beta-badge .beta-version {
  -webkit-text-fill-color: #ffbc40 !important;
}

.sidebar-logo:hover span:not(.beta-badge):not(.beta-label):not(.beta-version) {
  opacity: 0.85;
}

.logo:hover span:not(.beta-badge):not(.beta-label):not(.beta-version) {
  animation: logoTextShine 3s linear infinite;
}

@keyframes logoTextShine {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.sidebar-logo img {
  height: 22px; /* Reduced from 28px */
  width: auto;
}

.sidebar-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  line-height: 1;
  font-size: 12px;
}

.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.sidebar-close svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex-shrink: 0;
}

.sidebar-close:hover svg {
  opacity: 1;
}

/* ================= PANEL TOGGLE ARROW (GENERATIONS) ================= */
.panel-toggle-arrow {
  background: var(--app-pill-bg);
  border: 1px solid var(--app-pill-border);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  padding: 0;
  border-radius: var(--app-pill-radius);
  transition: all 0.3s ease;
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  -webkit-backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
}

.panel-toggle-arrow.visible {
  display: inline-flex;
}

/* When the generations panel is open, hide the header toggle (close button exists in-panel) */
body:has(.generations-panel.open) .panel-toggle-arrow {
  display: none !important;
}

.panel-toggle-arrow:hover {
  background: var(--app-pill-bg-hover);
  border-color: var(--app-pill-border-hover);
}

.panel-toggle-arrow img {
  width: 20px;
  height: 20px;
  opacity: 0.9;
  filter: brightness(0) invert(1);
}

.panel-toggle-arrow svg {
  width: 20px;
  height: 20px;
  opacity: 0.9;
  display: block;
}

.generations-panel-edge-trigger {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  z-index: 120500;
  background: transparent;
  pointer-events: none;
}

.generations-panel-edge-trigger.visible {
  pointer-events: auto;
}

body.debug-panel-edge .generations-panel-edge-trigger {
  background: rgba(232, 144, 60, 0.12);
}

@media (min-width: 769px) {
  body.workspace-mode.mm-module-header-collapsed .generations-panel,
  body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
    .generations-panel {
    --drag-tab-expose: 0px;
  }

  body.generations-panel-edge-peek.workspace-mode.mm-module-header-collapsed .generations-panel,
  body.generations-panel-edge-peek.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
    .generations-panel {
    --drag-tab-expose: 8px;
  }

  body.workspace-mode.mm-module-header-collapsed .panel-drag-tab,
  body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed .panel-drag-tab {
    width: 10px;
    height: 54px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-74%, -50%) scaleX(0.82);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px 0 0 14px;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.14),
      0 0 0 1px rgba(255, 255, 255, 0.05);
    transition:
      opacity 0.18s ease,
      transform 0.24s cubic-bezier(0.32, 0.72, 0, 1),
      background 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease;
  }

  body.generations-panel-edge-peek.workspace-mode.mm-module-header-collapsed .panel-drag-tab,
  body.generations-panel-edge-peek.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
    .panel-drag-tab {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-100%, -50%) scaleX(1);
  }

  body.workspace-mode.mm-module-header-collapsed .panel-drag-tab:hover,
  body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
    .panel-drag-tab:hover {
    background: rgba(255, 255, 255, 0.18);
    border-left-color: rgba(255, 255, 255, 0.32);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .generations-panel.resizing {
    box-shadow:
      -10px 0 32px rgba(0, 0, 0, 0.32),
      -1px 0 0 rgba(255, 255, 255, 0.08) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .generations-panel.resizing .panel-drag-tab,
  .panel-drag-tab:active {
    background: rgba(255, 255, 255, 0.2) !important;
    border-left-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  }
}

/* ================= GENERATIONS PANEL HEADER (GALLERY) ================= */
.generations-header {
  display: none;
  height: 0;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  backdrop-filter: blur(var(--app-header-blur)) saturate(var(--app-header-saturate));
  -webkit-backdrop-filter: blur(var(--app-header-blur)) saturate(var(--app-header-saturate));
}

.generations-header--rebuilt {
  justify-content: flex-start;
}

/* Search-only header layout (mm_capsules requirement) */
.generations-header--search-only {
  justify-content: space-between;
}

.gen-search-host {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.gen-gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--app-pill-height);
  padding: 0 14px;
  border-radius: var(--app-pill-radius);
  border: 1px solid var(--app-pill-border);
  background: var(--app-pill-bg);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.gen-gallery-btn:hover {
  background: var(--app-pill-bg-hover);
  border-color: var(--app-pill-border-hover);
}

.gen-gallery-icon {
  width: 20px;
  height: 20px;
  opacity: 0.95;
  filter: brightness(0) invert(1);
}

/* ===== PREMIUM SEARCH INPUT COMPONENT ===== */
.generations-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--app-pill-height);
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  /* Smooth transitions for all interactive states */
  transition:
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: text;
}

/* Hover state - subtle lift and glow */
.generations-search-wrap:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.02),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Focus-within state - prominent glow ring */
.generations-search-wrap:focus-within {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.06),
    0 0 20px rgba(255, 255, 255, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Active/pressed state - slight press effect */
.generations-search-wrap:active {
  transform: scale(0.995);
  background: rgba(255, 255, 255, 0.08);
}

/* ===== SEARCH ICON STATES ===== */
.generations-search-icon {
  width: 15px;
  height: 15px;
  opacity: 0.45;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
  transition:
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Icon hover state */
.generations-search-wrap:hover .generations-search-icon {
  opacity: 0.65;
}

/* Icon focus state - fully visible */
.generations-search-wrap:focus-within .generations-search-icon {
  opacity: 0.9;
  transform: scale(1.05);
}

/* ===== SEARCH INPUT FIELD ===== */
.generations-search {
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 450;
  font-family: inherit;
  box-sizing: border-box;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
  caret-color: rgba(255, 255, 255, 0.7);
}

/* Ensure input doesn't show any browser default focus styling */
.generations-search:focus {
  outline: none;
  box-shadow: none;
}

/* When typing, make text slightly brighter */
.generations-search:not(:placeholder-shown) {
  color: rgba(255, 255, 255, 0.98);
}

.generations-search::placeholder {
  color: rgba(255, 255, 255, 0.38);
  font-weight: 400;
  transition: color 0.2s ease;
}

/* Placeholder becomes slightly visible on focus */
.generations-search-wrap:focus-within .generations-search::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Selection styling */
.generations-search::selection {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ===== SEARCH DISABLED STATE (Free users) - Subtle white/gray tones ===== */
.generations-search-wrap.search-disabled-free {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
}

.generations-search-wrap.search-disabled-free:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  transform: none;
}

.generations-search-wrap.search-disabled-free .generations-search {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
}

.generations-search-wrap.search-disabled-free .generations-search::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.generations-search-wrap.search-disabled-free .generations-search-icon {
  filter: brightness(0) invert(1);
  opacity: 0.3;
}

/* Legacy: Keep search-upgrade-prompt class with same subtle styling */
.generations-search-wrap.search-upgrade-prompt {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
}

.generations-search-wrap.search-upgrade-prompt:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  transform: none;
}

.generations-search-wrap.search-upgrade-prompt .generations-search {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
}

.generations-search-wrap.search-upgrade-prompt .generations-search::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.generations-search-wrap.search-upgrade-prompt .generations-search-icon {
  filter: brightness(0) invert(1);
  opacity: 0.3;
}

/* ===== SEARCH SPINNER (Loading indicator) ===== */
.search-spinner {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 2;
}

.search-spinner svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Searching state - subtle pulse on the wrap */
.generations-search-wrap.searching {
  border-color: rgba(0, 229, 255, 0.3);
  animation: search-pulse 1.5s ease-in-out infinite;
}

@keyframes search-pulse {
  0%,
  100% {
    border-color: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
  }
  50% {
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
  }
}

/* Ensure spinner doesn't overlap with input text */
.generations-search-wrap.searching .generations-search {
  padding-right: 30px;
}

.generations-close,
.generations-close--icon {
  background: var(--app-pill-bg);
  border: 1px solid var(--app-pill-border);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  padding: 0;
  border-radius: var(--app-pill-radius);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--app-pill-height);
  height: var(--app-pill-height);
  min-width: var(--app-pill-height);
  min-height: var(--app-pill-height);
  backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  -webkit-backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
}

.generations-close:hover,
.generations-close--icon:hover {
  background: var(--app-pill-bg-hover);
  border-color: var(--app-pill-border-hover);
}

.generations-close img,
.generations-close--icon img {
  width: 16px;
  height: 16px;
  pointer-events: none;
  filter: brightness(0) invert(1);
}

/* ===== FLOATING CLOSE BUTTON (always visible, overlaps panel top-right) ===== */
.generations-close-floating {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: var(--app-pill-height);
  height: var(--app-pill-height);
  min-width: var(--app-pill-height);
  min-height: var(--app-pill-height);
  border-radius: 50%;
  background: var(--app-pill-bg);
  border: 1px solid var(--app-pill-border);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  -webkit-backdrop-filter: blur(var(--app-pill-blur)) saturate(var(--app-pill-saturate));
  transition: all 0.3s ease;
}

.generations-close-floating:hover {
  background: var(--app-pill-bg-hover);
  border-color: var(--app-pill-border-hover);
  transform: scale(1.08);
}

.generations-close-floating img {
  width: 16px;
  height: 16px;
  pointer-events: none;
  filter: brightness(0) invert(1);
}

/* ================= USER PILL RIGHT-CLICK CONTEXT MENU ================= */
.user-pill-context-menu {
  position: fixed;
  z-index: 100000;
  background: rgba(12, 12, 16, 0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 4px;
  min-width: 180px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateX(-50%) scale(0.95) translateY(-4px);
  transform-origin: top center;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
}

.user-pill-context-menu.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1) translateY(0);
  pointer-events: auto;
}

.user-pill-context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  transition:
    background 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.user-pill-context-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ================= FLOW MODE ================= */
.credits-display.flow-mode-hiding {
  animation: creditsDissolve 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.credits-display.flow-mode-showing {
  animation: creditsAppear 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes creditsDissolve {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    filter: blur(4px);
    transform: scale(0.98);
  }
  100% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.96);
  }
}

@keyframes creditsAppear {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.96);
  }
  50% {
    opacity: 0.4;
    filter: blur(4px);
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.flow-mode-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* JS sets left to match credits-display position */
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  background: linear-gradient(135deg, #00e676, #00e5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 1.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
  pointer-events: none;
  white-space: nowrap;
}

.flow-mode-label.visible {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
}

/* ── Plan badge in Flow Mode ── */
.plan-badge-pill.flow-mode {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid #00e5ff !important;
  box-shadow: none !important;
  animation: none !important;
  transition:
    background 1.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 1.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 1.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.plan-badge-pill.flow-mode::before {
  display: none !important;
}

.plan-badge-pill.flow-mode .plan-badge-text {
  background: linear-gradient(135deg, #00e676, #00e5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================================================
   SIDEBAR ACCOUNT FOOTER
   The account pill moved out of the header into the bottom of the sidebar.
   The account block (divider + row) is a CONSTANT unit; the dev strip is a
   localhost-only panel ABOVE the divider, so production looks identical.
   Overrides are scoped under #sidebar so they reliably beat the header rules.
   The credits card markup/styles are unchanged — only the menu's POSITION moves.
   ============================================================================ */

.sidebar-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 6px;
}

/* ── Dev strip: localhost-only inset panel (toggle + generation counter) ──
   Hidden by default; initDevInfoToggle() flips it to flex on localhost. */
.sidebar-footer .dev-strip {
  align-items: center;
  gap: 8px;
  margin: 6px 12px 8px;
  padding: 6px 8px 6px 9px;
  background: rgba(139, 123, 255, 0.07);
  border: 1px solid rgba(139, 123, 255, 0.22);
  border-radius: 9px;
}

.dev-strip-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  color: #8b7bff;
}

.dev-strip-mark-text {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #cdc4ff;
}

.dev-strip-rule {
  width: 1px;
  height: 14px;
  background: rgba(139, 123, 255, 0.25);
  flex-shrink: 0;
}

/* Relabelled toggle ("Debug panels") — readable label, violet ON state */
.dev-strip .dev-pill-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: #a99fe0;
  white-space: nowrap;
}

.dev-strip .dev-pill-switch.on .dev-pill-track {
  background: rgba(139, 123, 255, 0.45);
}

.dev-strip .dev-pill-switch.on .dev-pill-knob {
  background: #fff;
}

/* Generation counter slot — pinned to the right edge of the strip */
.dev-strip .gen-counter-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
}

/* ── Divider: top edge of the constant account block ── */
.sidebar-footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0;
}

/* ── Account row: full-width footer row (strip the header "pill" chrome) ── */
#sidebar #userDropdown {
  position: relative;
  width: 100%;
}

#sidebar #userDropdown .user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 11px 12px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  contain: none !important;
  overflow: visible;
}

#sidebar #userDropdown .user-pill:hover {
  background: rgba(255, 255, 255, 0.04);
  border: none;
  box-shadow: none;
}

#sidebar #userDropdown .user-avatar-header {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

#sidebar #userDropdown .user-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1.1;
}

#sidebar #userDropdown .user-pill .user-name {
  max-width: 100% !important;
  font-size: 13.5px !important;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar #userDropdown .user-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Plan badge — reset the header margins; sit it in the meta row */
#sidebar #userDropdown .plan-badge-pill {
  height: 16px;
  padding: 0 7px;
  margin: 0;
  font-size: 8.5px;
}

/* Dev identity badge — faint violet (variant B), distinct from the gold PRO */
#sidebar #userDropdown .header-dev-badge {
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0 7px;
  background: rgba(139, 123, 255, 0.14);
  border: 1px solid rgba(139, 123, 255, 0.42);
  box-shadow: none;
}

#sidebar #userDropdown .header-dev-badge-text {
  color: #cdc4ff;
}

/* Chevron — static right-pointing glyph (the menu opens to the right). Dim at
   rest; brightens and nudges right on hover/open to echo the menu's direction. */
#sidebar #userDropdown .acct-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.38);
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

#sidebar #userDropdown .user-pill:hover .acct-chevron {
  color: rgba(255, 255, 255, 0.7);
  transform: translateX(1px);
}

#sidebar #userDropdown .dropbtn[aria-expanded='true'] .acct-chevron {
  color: rgba(255, 255, 255, 0.85);
  transform: translateX(2px);
}

/* ── Account menu: flyout to the RIGHT, bottom-aligned, opens upward.
   Desktop only (sidebar uses `contain: layout style` here — no paint clip). ── */
#sidebar #userDropdown .welcome-dropdown-content {
  position: absolute;
  left: calc(100% + 10px) !important;
  right: auto;
  bottom: 0;
  top: auto !important;
  margin: 0;
  width: 268px;
  min-width: 0;
  max-height: min(640px, calc(100dvh - 24px));
  overflow-y: auto;
  transform: translateX(-6px);
  transform-origin: left bottom;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  z-index: 6000;
}

/* Open ONLY on .show — no hover-to-open in the footer (it's a click target) */
#sidebar #userDropdown .welcome-dropdown-content.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  max-height: min(640px, calc(100dvh - 24px));
}

/* Neutralise the header's hover-to-open behaviour in the footer context */
#sidebar #userDropdown:hover .welcome-dropdown-content:not(.show),
#sidebar #userDropdown .welcome-dropdown-content:hover:not(.show) {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
}

/* Collapsed sidebar drifts this flyout over the main content; keep it inert (pill is off-screen anyway). */
#sidebar:not(.open) #userDropdown .welcome-dropdown-content {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile (≤768px): the sidebar uses `contain: …paint…`, which clips a right
   flyout. Fall back to a drop-up that stays inside the sidebar's paint box. */
@media (max-width: 768px) {
  #sidebar #userDropdown .welcome-dropdown-content {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(100% + 8px);
    width: auto;
    transform: translateY(8px);
    /* Drop-up sits over the sidebar's own items, not the canvas, and the body-level
       glass is occluded here — use a solid background so nothing bleeds through. */
    background: #1a1a1a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #sidebar #userDropdown .welcome-dropdown-content.show {
    transform: translateY(0);
  }
  #sidebar #userDropdown:hover .welcome-dropdown-content:not(.show),
  #sidebar #userDropdown .welcome-dropdown-content:hover:not(.show) {
    transform: translateY(8px);
  }

  /* Footer sits at the bottom edge — keep it clear of the home indicator. */
  .sidebar-footer {
    padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* Legacy header mobile rules (#userDropdown .user-pill, !important) leak in and
     crush the footer row to `padding: 0 10px 0 4px`. Re-assert comfortable spacing. */
  #sidebar #userDropdown .user-pill {
    width: 100% !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  #sidebar #userDropdown .user-pill .user-info {
    display: flex !important; /* legacy rule hides this ≤360px; the footer has room */
  }
}