/* ==========================================================================
   Profile dropdown — neural glass (full widget interior upgrade)
   ========================================================================== */

/* --- Trigger wrapper --- */
.topbar .actions .profile-menu,
.profile-menu {
  position: relative;
  z-index: 10001;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
}

/* --- Circular neural orb trigger --- */
.profile-orb-trigger.avatar-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  grid-template-columns: unset !important;
  place-items: unset !important;
  background:
    radial-gradient(circle at 38% 32%, rgba(55, 192, 255, 0.2) 0%, transparent 48%),
    radial-gradient(circle at 68% 68%, rgba(255, 138, 0, 0.1) 0%, transparent 44%),
    radial-gradient(circle at 50% 50%, rgba(6, 28, 45, 0.96) 0%, rgba(2, 12, 22, 0.98) 100%) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: none !important;
  box-shadow:
    0 0 0 1.5px rgba(55, 192, 255, 0.28),
    0 0 calc(22px + 18px * var(--orb-energy, 0)) rgba(55, 192, 255, calc(0.30 + 0.32 * var(--orb-energy, 0))),
    0 0 calc(32px + 24px * var(--orb-energy, 0)) rgba(255, 138, 0, calc(0.12 + 0.22 * var(--orb-energy, 0))),
    0 8px 22px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 10 !important;
  animation: none !important;
  isolation: isolate;
}

.profile-orb-trigger.avatar-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 50% !important;
  padding: 1.5px !important;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(55, 192, 255, 0.25) 15%,
    rgba(55, 192, 255, 0.95) 35%,
    rgba(255, 138, 0, 0.9) 50%,
    rgba(168, 85, 247, 0.7) 65%,
    rgba(55, 192, 255, 0.95) 80%,
    transparent 100%
  ) !important;
  background-size: 260% 100% !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.72 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  filter: none !important;
  animation: profileOrbBorderFlow 2.8s linear infinite !important;
}

.profile-orb-trigger.avatar-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: radial-gradient(circle at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.38) 100%) !important;
  box-shadow: none !important;
  transition: opacity 0.25s ease !important;
}

@keyframes profileOrbBorderFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}

.profile-menu:hover .profile-orb-trigger.avatar-btn:not([aria-expanded="true"]) {
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 0 0 1px rgba(55, 192, 255, 0.28),
    0 0 24px rgba(55, 192, 255, calc(0.35 + 0.2 * var(--orb-energy, 0))),
    0 0 36px rgba(255, 138, 0, calc(0.15 + 0.15 * var(--orb-energy, 0))),
    0 10px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.profile-menu:hover .profile-orb-trigger.avatar-btn::before {
  opacity: 1 !important;
  animation-duration: 1.6s !important;
}

.profile-menu:hover .profile-chevron-badge {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255, 138, 0, 0.35);
}

.profile-orb-trigger.avatar-btn:active,
.profile-orb-trigger.avatar-btn.is-pressed {
  transform: scale(0.96) !important;
  transition-duration: 0.1s !important;
}

.profile-orb-trigger.avatar-btn:focus-visible {
  outline: 2px solid rgba(55, 192, 255, 0.72);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1px rgba(55, 192, 255, 0.28),
    0 0 18px rgba(55, 192, 255, 0.38),
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.profile-menu[aria-expanded="true"] .profile-orb-trigger.avatar-btn,
.profile-menu.is-open .profile-orb-trigger.avatar-btn {
  box-shadow:
    0 0 0 1px rgba(255, 138, 0, 0.32),
    0 0 26px rgba(255, 138, 0, 0.48),
    0 0 38px rgba(55, 192, 255, 0.32),
    0 6px 20px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px) scale(1.03) !important;
}

.profile-menu.is-opening .profile-orb-trigger.avatar-btn,
.profile-menu.is-animating .profile-orb-trigger.avatar-btn {
  animation: avatarLockIn 0.32s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

@keyframes avatarLockIn {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* --- Neural orb (canvas zone) --- */
.profile-orb-trigger .profile-orb {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: filter 0.32s ease;
}

.profile-neural-canvas {
  display: block;
  width: 56px;
  height: 56px;
  position: relative;
  z-index: 2;
}

.profile-orb-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.profile-orb-ring--outer {
  inset: 4px;
  border: 1px dashed rgba(55, 192, 255, 0.28);
  animation: profileOrbRingSpin 24s linear infinite;
}

.profile-orb-ring--inner {
  inset: 11px;
  border: 1px solid rgba(255, 138, 0, 0.15);
  animation: profileOrbRingSpinRev 18s linear infinite;
}

.profile-orb-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(55, 192, 255, 0.14) 48%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 138, 0, 0.12) 52%,
    transparent 62%
  );
  background-size: 240% 100%;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.profile-orb-vignette {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  background: radial-gradient(circle at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.4) 100%);
}

.profile-menu:hover .profile-orb-shimmer,
.profile-menu[aria-expanded="true"] .profile-orb-shimmer,
.profile-orb.is-hovered .profile-orb-shimmer {
  opacity: 1;
  animation: profileOrbShimmer 2.8s ease-in-out infinite;
}

.profile-menu:hover .profile-orb {
  filter: brightness(1.08) saturate(1.1);
}

.profile-menu[aria-expanded="true"] .profile-orb,
.profile-menu.is-open .profile-orb {
  filter: brightness(1.12) saturate(1.15);
}

@keyframes profileOrbRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes profileOrbRingSpinRev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes profileOrbShimmer {
  0% { background-position: 130% 50%; }
  100% { background-position: -130% 50%; }
}

/* Static SVG fallback (reduced motion / no canvas / loading) */
.profile-orb-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.profile-orb.is-static-fallback .profile-neural-canvas,
.profile-orb.is-static-fallback .profile-orb-shimmer,
.profile-orb.is-canvas-ready .profile-orb-fallback {
  display: none;
}

.profile-orb.is-static-fallback .profile-orb-fallback {
  display: flex;
}

.profile-orb:not(.is-canvas-ready):not(.is-static-fallback) .profile-orb-fallback {
  display: none;
}

.profile-orb:not(.is-canvas-ready) .profile-orb-shimmer {
  display: none;
}

.profile-orb-fallback .avatar-glyph {
  width: 46px;
  height: 46px;
}

.profile-orb-fallback .avatar-neural-svg {
  width: 46px;
  height: 46px;
  filter:
    drop-shadow(0 0 4px rgba(55, 192, 255, 0.65))
    drop-shadow(0 0 6px rgba(255, 138, 0, 0.3));
}

/* --- Chevron edge badge --- */
.profile-chevron-badge {
  position: absolute;
  right: -2px;
  bottom: 4px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(4, 18, 32, 0.82);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(55, 192, 255, 0.35);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.profile-chevron {
  display: block;
  width: 11px;
  height: 11px;
  color: #ff8a00;
  opacity: 0.92;
  filter: drop-shadow(0 0 3px rgba(255, 138, 0, 0.35));
  transition: transform 0.28s ease, opacity 0.2s ease, filter 0.2s ease, color 0.2s ease;
}

.profile-menu:hover .profile-chevron {
  opacity: 1;
}

.profile-menu[aria-expanded="true"] .profile-chevron-badge,
.profile-menu.is-open .profile-chevron-badge {
  border-color: rgba(55, 192, 255, 0.55);
  background: rgba(4, 24, 40, 0.9);
  box-shadow:
    0 0 10px rgba(55, 192, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.profile-menu[aria-expanded="true"] .profile-chevron,
.profile-menu.is-open .profile-chevron {
  transform: rotate(180deg);
  opacity: 1;
  color: #37c0ff;
  filter: drop-shadow(0 0 4px rgba(55, 192, 255, 0.6));
}

/* Pulse ring (JS-created, anchored to orb) */
.profile-orb .avatar-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pulse-size, 44px);
  height: var(--pulse-size, 44px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 0, 0.85) 0%, rgba(55, 192, 255, 0.45) 45%, transparent 70%);
  border: 2px solid rgba(55, 192, 255, 0.75);
  pointer-events: none;
  z-index: 5;
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(0.75);
  transform-origin: center center;
  animation: avatarPulseRingExpand 0.75s ease-out forwards;
}

@keyframes avatarPulseRingExpand {
  0% {
    transform: translate(-50%, -50%) scale(0.75);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}


/* --- Dropdown panel --- */
.profile-menu .dropdown,
.profile-dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 300px;
  padding: 0.7rem 0.75rem;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(12, 46, 68, 0.94) 0%, rgba(6, 28, 45, 0.97) 100%),
    radial-gradient(circle at 12% 18%, rgba(55, 192, 255, 0.14), transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(255, 138, 0, 0.12), transparent 42%);
  border: 1.5px solid rgba(55, 192, 255, 0.35);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.60),
    0 10px 28px rgba(255, 138, 0, 0.30),
    0 0 0 1px rgba(55, 192, 255, 0.28),
    0 0 60px rgba(55, 192, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px) saturate(160%);
  display: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  z-index: 100100;
  overflow: visible;
  transition:
    opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.28s;
}

.profile-menu[aria-expanded="true"] .dropdown,
.profile-menu.is-open .dropdown,
.profile-menu[aria-expanded="true"] .profile-dropdown-panel,
.profile-menu.is-open .profile-dropdown-panel,
.profile-dropdown-panel.is-open,
.profile-menu .dropdown.is-open {
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto !important;
  isolation: isolate;
}

.profile-menu.is-opening .dropdown,
.profile-menu.is-opening .profile-dropdown-panel,
.profile-dropdown-panel.is-opening,
.profile-menu .dropdown.is-opening {
  animation: profilePanelOpen 0.32s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes profilePanelOpen {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.94);
  }
  70% {
    opacity: 1;
    transform: translateY(2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animated border glow */
.profile-menu .dropdown::before,
.profile-dropdown-panel::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 138, 0, 0.55), rgba(55, 192, 255, 0.55), rgba(255, 138, 0, 0.55));
  background-size: 200% 200%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  filter: blur(6px);
  transition: opacity 0.3s ease;
  animation: dropdownGradientShift 5s ease-in-out infinite;
}

.profile-menu[aria-expanded="true"] .dropdown::before,
.profile-menu.is-open .dropdown::before,
.profile-menu[aria-expanded="true"] .profile-dropdown-panel::before,
.profile-menu.is-open .profile-dropdown-panel::before,
.profile-dropdown-panel.is-open::before,
.profile-menu .dropdown.is-open::before {
  opacity: 0.75;
}

/* Iridescent top-edge accent bar — only visible when panel is open */
.profile-dropdown-panel.is-open::after,
.profile-menu.is-open .profile-dropdown-panel::after,
.profile-menu.is-open .dropdown::after,
.profile-menu[aria-expanded="true"] .profile-dropdown-panel::after,
.profile-menu[aria-expanded="true"] .dropdown::after,
.profile-menu .dropdown.is-open::after {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(55, 192, 255, 0.8), rgba(255, 138, 0, 0.7), rgba(168, 85, 247, 0.6), transparent);
  border-radius: 1px;
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
}

@keyframes dropdownGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Panel ambient layer */
.dropdown-ambient {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background:
    radial-gradient(circle at 20% 25%, rgba(55, 192, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(255, 138, 0, 0.06) 0%, transparent 38%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 11px,
      rgba(55, 192, 255, 0.025) 11px,
      rgba(55, 192, 255, 0.025) 12px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 11px,
      rgba(55, 192, 255, 0.025) 11px,
      rgba(55, 192, 255, 0.025) 12px
    );
}

.dropdown-ambient::before,
.dropdown-ambient::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dropdown-ambient::before {
  width: 4px;
  height: 4px;
  top: 18%;
  right: 22%;
  background: radial-gradient(circle, rgba(255, 138, 0, 0.7) 0%, transparent 70%);
  box-shadow: 0 0 8px rgba(255, 138, 0, 0.4);
  animation: ambientSpark 3.5s ease-in-out infinite;
}

.dropdown-ambient::after {
  width: 3px;
  height: 3px;
  bottom: 28%;
  left: 18%;
  background: radial-gradient(circle, rgba(55, 192, 255, 0.8) 0%, transparent 70%);
  box-shadow: 0 0 6px rgba(55, 192, 255, 0.45);
  animation: ambientSpark 4.2s ease-in-out infinite 1.2s;
}

@keyframes ambientSpark {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1.2); }
}

.profile-menu[aria-expanded="true"] .dropdown-ambient,
.profile-menu.is-open .dropdown-ambient {
  opacity: 0.75;
}

/* Byte particles — subtle */
.dropdown-byte {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 0, 0.75) 0%, rgba(255, 138, 0, 0.3) 50%, transparent 100%);
  box-shadow: 0 0 5px rgba(255, 138, 0, 0.35), 0 0 8px rgba(55, 192, 255, 0.2);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.dropdown-byte.byte-1 { animation: dropdownByteFlow1 4s ease-in-out infinite; }
.dropdown-byte.byte-2 { animation: dropdownByteFlow2 4.2s ease-in-out infinite 0.4s; }
.dropdown-byte.byte-3 { animation: dropdownByteFlow3 4.4s ease-in-out infinite 0.8s; }
.dropdown-byte.byte-4 { animation: dropdownByteFlow4 4.1s ease-in-out infinite 1.2s; }
.dropdown-byte.byte-5 { animation: dropdownByteFlow5 4.3s ease-in-out infinite 1.6s; }
.dropdown-byte.byte-6 { animation: dropdownByteFlow6 4.5s ease-in-out infinite 2s; }

@keyframes dropdownByteFlow1 {
  0%, 100% { transform: translate(20px, 20px) scale(0); opacity: 0; }
  30% { opacity: 0.35; transform: translate(60px, 50px) scale(1); }
  70% { opacity: 0.15; transform: translate(100px, 80px) scale(0.8); }
}
@keyframes dropdownByteFlow2 {
  0%, 100% { transform: translate(240px, 20px) scale(0); opacity: 0; }
  30% { opacity: 0.3; transform: translate(200px, 55px) scale(1); }
  70% { opacity: 0.12; transform: translate(160px, 85px) scale(0.8); }
}
@keyframes dropdownByteFlow3 {
  0%, 100% { transform: translate(20px, 180px) scale(0); opacity: 0; }
  30% { opacity: 0.3; transform: translate(55px, 140px) scale(1); }
  70% { opacity: 0.12; transform: translate(90px, 100px) scale(0.8); }
}
@keyframes dropdownByteFlow4 {
  0%, 100% { transform: translate(240px, 180px) scale(0); opacity: 0; }
  30% { opacity: 0.3; transform: translate(205px, 145px) scale(1); }
  70% { opacity: 0.12; transform: translate(170px, 110px) scale(0.8); }
}
@keyframes dropdownByteFlow5 {
  0%, 100% { transform: translate(130px, 10px) scale(0); opacity: 0; }
  40% { opacity: 0.25; transform: translate(130px, 70px) scale(1.1); }
}
@keyframes dropdownByteFlow6 {
  0%, 100% { transform: translate(10px, 100px) scale(0); opacity: 0; }
  40% { opacity: 0.25; transform: translate(70px, 100px) scale(1.1); }
}

/* --- Header card --- */
.dropdown-header,
.dropdown-hello {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.45rem;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 138, 0, 0.14) 0%, rgba(55, 192, 255, 0.1) 100%),
    rgba(8, 32, 50, 0.65);
  border: 1px solid rgba(55, 192, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 3px 0 0 rgba(55, 192, 255, 0.45);
  position: relative;
  z-index: 3;
}

.dropdown-header-glyph {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(55, 192, 255, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 65% 68%, rgba(255, 138, 0, 0.12) 0%, transparent 50%),
    rgba(6, 24, 40, 0.75);
  border: 1px solid rgba(55, 192, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 138, 0, 0.15),
    0 0 10px rgba(55, 192, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* User initial monogram inside the dropdown header */
.dropdown-user-monogram {
  background:
    radial-gradient(circle at 38% 30%, rgba(55, 192, 255, 0.32) 0%, transparent 55%),
    radial-gradient(circle at 68% 72%, rgba(37, 99, 235, 0.28) 0%, transparent 50%),
    linear-gradient(145deg, rgba(14, 42, 80, 0.92) 0%, rgba(6, 20, 45, 0.96) 100%);
  border: 1.5px solid rgba(55, 192, 255, 0.5);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.22),
    0 0 12px rgba(55, 192, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dropdown-user-initial {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: 'Montserrat', Inter, system-ui, sans-serif;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #eaf3f9;
  background: linear-gradient(160deg, #ffffff 0%, #c8eeff 35%, #37c0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(55, 192, 255, 0.65));
  user-select: none;
}


.dropdown-user-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.dropdown-user-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #eaf3f9);
  line-height: 1.2;
}

.membership-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.05);
}

.membership-badge.membership-free { color: #94a3b8; }
.membership-badge.membership-starter { color: #37c0ff; }
.membership-badge.membership-pro { color: #ff8a00; }
.membership-badge.membership-elite { color: #a855f7; }

@keyframes membershipBadgeShimmer {
  0%   { background-position: -120% 50%; }
  100% { background-position: 220% 50%; }
}

.membership-badge.membership-starter,
.membership-badge.membership-pro,
.membership-badge.membership-elite {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.14) 40%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.14) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: membershipBadgeShimmer 3.5s ease-in-out infinite;
}

/* --- Sections --- */
.dropdown-section {
  position: relative;
  z-index: 3;
}

.dropdown-section--footer {
  margin-top: 0.1rem;
}

.dropdown-section-label {
  margin: 0.5rem 0.55rem 0.3rem;
  padding: 0 0 0 0.65rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(166, 192, 211, 0.82);
  position: relative;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.dropdown-section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 11px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(55, 192, 255, 0.75), rgba(255, 138, 0, 0.55));
  border-radius: 2px;
  opacity: 0.9;
}

.profile-menu.is-open .dropdown-section-label,
.profile-menu[aria-expanded="true"] .dropdown-section-label,
.profile-dropdown-panel.is-open .dropdown-section-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.06s;
}

.dropdown-divider {
  height: 2px;
  margin: 0.45rem 0.35rem;
  background: linear-gradient(90deg,
    transparent,
    rgba(55, 192, 255, 0.50),
    rgba(255, 138, 0, 0.50),
    rgba(168, 85, 247, 0.35),
    transparent);
  position: relative;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}

.profile-menu.is-open .dropdown-divider,
.profile-menu[aria-expanded="true"] .dropdown-divider,
.profile-dropdown-panel.is-open .dropdown-divider {
  opacity: 1;
}

/* --- Menu items (panel + portaled: panel may live on document.body) --- */
.profile-dropdown-panel .dropdown-item,
.profile-dropdown-panel a[role="menuitem"],
.profile-menu .dropdown .dropdown-item,
.profile-menu .dropdown a[role="menuitem"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.2rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #eaf3f9);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
  border-left: 3px solid transparent;
  background: rgba(8, 32, 50, 0.45);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.25s ease;
  position: relative;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
  transform: translateX(-6px);
  box-sizing: border-box;
}

.profile-menu.is-open .dropdown-item,
.profile-menu[aria-expanded="true"] .dropdown-item,
.profile-menu.is-open .dropdown a[role="menuitem"],
.profile-menu[aria-expanded="true"] .dropdown a[role="menuitem"],
.profile-dropdown-panel.is-open .dropdown-item,
.profile-dropdown-panel.is-open a[role="menuitem"],
.profile-dropdown-panel.open .dropdown-item,
.profile-dropdown-panel.open a[role="menuitem"] {
  opacity: 1;
  transform: translateX(0);
}

.profile-dropdown-panel.is-open .dropdown-section:nth-child(3) a[role="menuitem"]:nth-of-type(1),
.profile-menu.is-open .dropdown-section:nth-child(3) a[role="menuitem"]:nth-of-type(1) { transition-delay: 0.04s; }
.profile-dropdown-panel.is-open .dropdown-section:nth-child(3) a[role="menuitem"]:nth-of-type(2),
.profile-menu.is-open .dropdown-section:nth-child(3) a[role="menuitem"]:nth-of-type(2) { transition-delay: 0.08s; }
.profile-dropdown-panel.is-open .dropdown-section:nth-child(3) a[role="menuitem"]:nth-of-type(3),
.profile-menu.is-open .dropdown-section:nth-child(3) a[role="menuitem"]:nth-of-type(3) { transition-delay: 0.12s; }
.profile-dropdown-panel.is-open .dropdown-section:nth-child(5) a[role="menuitem"]:nth-of-type(1),
.profile-menu.is-open .dropdown-section:nth-child(5) a[role="menuitem"]:nth-of-type(1) { transition-delay: 0.16s; }
.profile-dropdown-panel.is-open .dropdown-section:nth-child(7) a[role="menuitem"]:nth-of-type(1),
.profile-menu.is-open .dropdown-section:nth-child(7) a[role="menuitem"]:nth-of-type(1) { transition-delay: 0.2s; }

.profile-dropdown-panel .dropdown-item-icon,
.dropdown-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  flex-shrink: 0;
  color: rgba(55, 192, 255, 0.9);
  background: rgba(55, 192, 255, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(55, 192, 255, 0.15);
  transform: scale(1) rotate(0deg);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.dropdown-item-icon svg {
  width: 18px;
  height: 18px;
}

.profile-dropdown-panel .dropdown-item-label,
.dropdown-item-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
}

.profile-dropdown-panel .dropdown-item::after,
.dropdown-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(ellipse at 30% 50%, rgba(255, 138, 0, 0.13) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

.profile-dropdown-panel .dropdown-item:hover::after,
.dropdown-item:hover::after {
  opacity: 1;
}

.profile-dropdown-panel .dropdown-item:hover,
.profile-dropdown-panel a[role="menuitem"]:hover,
.dropdown-item:hover,
.profile-menu .dropdown a:hover {
  background: linear-gradient(90deg, rgba(255, 138, 0, 0.28) 0%, rgba(55, 192, 255, 0.14) 100%);
  color: var(--orange-500, #ff8a00);
  border-left-color: var(--orange-500, #ff8a00);
  border-left-width: 3px;
  transform: translateX(5px);
  box-shadow: 0 4px 16px rgba(255, 138, 0, 0.22), inset 2px 0 8px rgba(255, 138, 0, 0.10);
}

.profile-dropdown-panel .dropdown-item:hover .dropdown-item-icon,
.dropdown-item:hover .dropdown-item-icon {
  background: rgba(255, 138, 0, 0.12);
  border-color: rgba(255, 138, 0, 0.25);
  color: var(--orange-500, #ff8a00);
  box-shadow: 0 0 10px rgba(255, 138, 0, 0.30);
  transform: scale(1.15) rotate(-6deg);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease;
}

.profile-dropdown-panel .dropdown-item:active,
.profile-dropdown-panel a[role="menuitem"]:active,
.dropdown-item:active,
.profile-menu .dropdown a:active {
  transform: translateX(2px) scale(0.97);
  transition-duration: 0.08s;
  box-shadow: 0 2px 8px rgba(255, 138, 0, 0.1);
}

.profile-dropdown-panel .dropdown-item:active .dropdown-item-icon,
.dropdown-item:active .dropdown-item-icon {
  transform: scale(0.94) rotate(0deg);
  transition-duration: 0.08s;
}

.profile-dropdown-panel .dropdown-item:focus-visible,
.profile-dropdown-panel a[role="menuitem"]:focus-visible,
.dropdown-item:focus-visible,
.profile-menu .dropdown a:focus-visible {
  outline: 2px solid rgba(255, 138, 0, 0.55);
  outline-offset: 2px;
}

.dropdown-item--admin,
.dropdown-item--admin .dropdown-item-icon {
  color: var(--orange-500, #ff8a00);
}

.dropdown-item--logout,
.logout-link {
  color: rgba(255, 180, 180, 0.95);
}

.dropdown-item--logout .dropdown-item-icon {
  color: #ff8888;
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.15);
}

.dropdown-item--logout:hover,
.logout-link:hover {
  background: rgba(255, 107, 107, 0.12) !important;
  color: #ffaaaa !important;
  border-left-color: #ff6b6b !important;
  box-shadow: 0 0 16px rgba(255, 107, 107, 0.18), 0 4px 14px rgba(255, 107, 107, 0.1);
}

.dropdown-item--logout:hover .dropdown-item-icon {
  background: rgba(255, 107, 107, 0.15);
  border-color: rgba(255, 107, 107, 0.3);
  color: #ffaaaa;
  box-shadow: 0 0 12px rgba(255, 107, 107, 0.45);
  transform: scale(1.08) rotate(-6deg);
}

/* Legacy link class support */
.profile-dropdown-nav .profile-dropdown-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #eaf3f9);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .profile-orb-trigger.avatar-btn,
  .profile-orb-trigger.avatar-btn::before,
  .profile-orb-trigger.avatar-btn::after,
  .profile-orb-ring,
  .profile-orb-shimmer,
  .profile-chevron,
  .profile-chevron-badge,
  .profile-menu .dropdown,
  .dropdown-item,
  .dropdown-byte,
  .dropdown-ambient,
  .dropdown-ambient::before,
  .dropdown-ambient::after,
  .avatar-pulse-ring {
    animation: none !important;
    transition: none !important;
  }

  .profile-menu.is-open .dropdown-item,
  .profile-menu[aria-expanded="true"] .dropdown-item,
  .profile-dropdown-panel.is-open .dropdown-item,
  .profile-menu.is-open .dropdown-section-label,
  .profile-menu[aria-expanded="true"] .dropdown-section-label,
  .profile-menu.is-open .dropdown-divider,
  .profile-menu[aria-expanded="true"] .dropdown-divider {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 480px) {
  .profile-menu .dropdown,
  .profile-dropdown-panel {
    min-width: min(300px, calc(100vw - 24px));
  }

  .profile-orb-trigger.avatar-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }

  .profile-neural-canvas {
    width: 50px;
    height: 50px;
  }

  .profile-orb-fallback .avatar-glyph,
  .profile-orb-fallback .avatar-neural-svg {
    width: 38px;
    height: 38px;
  }

  .profile-chevron-badge {
    width: 18px;
    height: 18px;
    right: -1px;
    bottom: 3px;
  }

  .profile-chevron {
    width: 10px;
    height: 10px;
  }
}

/* Fixed panel portaled to body (escapes backdrop-filter containing blocks) */
.profile-dropdown-panel.is-portaled,
.profile-menu .dropdown.is-portaled {
  position: fixed !important;
  right: auto !important;
  margin: 0;
}

.tools-actions .profile-menu {
  position: relative;
  z-index: 10002;
}