/* Shared MyWu account dropdown — portal, help, chat, tickets. */

.mywu-user-menu,
.mywu-user-menu-trigger,
.mywu-user-menu-trigger-label,
.mywu-user-menu-panel,
.mywu-user-menu-item,
.mywu-user-menu-item-text,
.mywu-account-menu-tooltip {
  /* Match the host page — do not embed/load MyWu font faces here. */
  font-family: inherit;
  font-size: inherit;
}

/* Keycloak masthead: hide native PF5 user chrome once MyWu menu is present.
   Do not destroy React-managed nodes — only hide them. */
.pf-v5-c-masthead [data-mywu-native-user-hidden="1"],
.pf-c-page__header [data-mywu-native-user-hidden="1"],
.pf-v5-c-masthead:has(#mywu-keycloak-account-host) #user-dropdown,
.pf-c-page__header:has(#mywu-keycloak-account-host) #user-dropdown,
/* Account Console: display-name toggle + plain avatar siblings of MyWu host */
.pf-v5-c-masthead:has(#mywu-keycloak-account-host) .pf-v5-c-toolbar__item:not(:has(#mywu-keycloak-account-host)):not(:has(.mywu-user-menu)):has(.pf-v5-c-menu-toggle),
.pf-v5-c-masthead:has(#mywu-keycloak-account-host) .pf-v5-c-toolbar__item:not(:has(#mywu-keycloak-account-host)):not(:has(.mywu-user-menu)):has(.pf-v5-c-avatar),
.pf-v5-c-masthead:has(#mywu-keycloak-account-host) > .pf-v5-c-masthead__content .pf-v5-c-menu-toggle:not(.mywu-user-menu-trigger):not(#nav-toggle),
.pf-v5-c-masthead:has(#mywu-keycloak-account-host) .pf-v5-c-toolbar__content-section > .pf-v5-c-menu-toggle:not(.mywu-user-menu-trigger) {
  display: none !important;
}

/* Keep Help visible on Admin console */
.pf-v5-c-masthead:has(#mywu-keycloak-account-host) .pf-v5-c-menu-toggle[aria-label*="Help" i],
.pf-v5-c-masthead:has(#mywu-keycloak-account-host) .pf-v5-c-menu-toggle[aria-label*="help" i],
.pf-v5-c-masthead:has(#mywu-keycloak-account-host) #help-toggle,
.pf-v5-c-masthead:has(#mywu-keycloak-account-host) [id*="help" i].pf-v5-c-menu-toggle {
  display: inline-flex !important;
}

.mywu-user-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 60;
  container-type: inline-size;
  container-name: mywu-account-menu;
  min-width: 0;
  max-width: 100%;
}

.mywu-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  max-width: min(100%, 20rem);
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
}

.mywu-user-menu-trigger-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.mywu-user-menu-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 4em;
  flex: 1 1 auto;
}

/*
 * Spacious hosts (portal, help, tickets, coder): prefer
 * "[icon] Full Name (username)" when the slot is wide enough.
 */
.mywu-user-menu.is-prefer-label {
  flex: 0 0 auto;
}

.mywu-user-menu.is-prefer-label .mywu-user-menu-trigger {
  flex-shrink: 1;
  max-width: min(100%, 22rem);
}

.mywu-user-menu.is-prefer-label .mywu-user-menu-trigger-label {
  display: inline-block;
  min-width: 4em;
}

/*
 * Tight slots (< 2em host width): icon-only square/circle — including
 * prefer-label hosts (e.g. coder browse dialog head).
 */
@container mywu-account-menu (max-width: 2em) {
  .mywu-user-menu-trigger {
    width: 100%;
    max-width: 2em;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    gap: 0;
    justify-content: center;
    overflow: hidden;
  }

  .mywu-user-menu-trigger-label {
    display: none !important;
  }

  .mywu-user-menu-trigger-icon {
    width: 18px;
    height: 18px;
  }
}

/* ResizeObserver fallback when layout width is constrained by a parent. */
.mywu-user-menu.is-narrow-slot .mywu-user-menu-trigger {
  width: 100%;
  max-width: 2em;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  gap: 0;
  justify-content: center;
  overflow: hidden;
}

.mywu-user-menu.is-narrow-slot .mywu-user-menu-trigger-label {
  display: none !important;
}

.mywu-user-menu.is-narrow-slot .mywu-user-menu-trigger-icon {
  width: 18px;
  height: 18px;
}

/* Legacy caret (removed from markup; keep hidden if present). */
.mywu-user-menu-caret {
  display: none;
  flex-shrink: 0;
  font-size: 0.7em;
  opacity: 0.9;
  line-height: 1;
  margin-left: 0.15rem;
}

.mywu-user-menu-caret::before {
  content: "▼";
}

.mywu-user-menu.is-open .mywu-user-menu-caret::before,
.mywu-user-menu.is-hover .mywu-user-menu-caret::before {
  content: "▲";
}

.mywu-user-menu.is-open .mywu-user-menu-caret,
.mywu-user-menu.is-hover .mywu-user-menu-caret {
  opacity: 1;
}

.mywu-user-menu-trigger:hover,
.mywu-user-menu.is-open .mywu-user-menu-trigger,
.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  border-color: var(--accent);
}

.mywu-user-menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  left: auto;
  min-width: 11.5rem;
  width: max-content;
  max-width: min(18rem, 80vw);
  /* Same acrylic fill as suggestion / keyword / menu item tooltips */
  background: var(--acrylic-surface, rgba(238, 242, 246, 0.22));
  background-color: var(--acrylic-surface, rgba(238, 242, 246, 0.22));
  border: 1px solid var(--acrylic-surface-border, rgba(15, 118, 110, 0.36));
  border-radius: 8px;
  padding: 0.3rem 0;
  box-shadow: var(--acrylic-surface-shadow, 0 12px 32px rgba(15, 20, 28, 0.2));
  -webkit-backdrop-filter: var(--acrylic-blur, blur(24px) saturate(180%));
  backdrop-filter: var(--acrylic-blur, blur(24px) saturate(180%));
  isolation: auto;
  z-index: 70;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: visibility 0.18s ease, transform 0.18s ease;
}

.mywu-user-menu.is-open .mywu-user-menu-panel,
.mywu-user-menu.is-hover .mywu-user-menu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mywu-user-menu-panel[hidden] {
  display: none !important;
}

.mywu-user-menu.is-open .mywu-user-menu-panel[hidden],
.mywu-user-menu.is-hover .mywu-user-menu-panel[hidden] {
  display: block !important;
}

.mywu-user-menu-item {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  box-sizing: border-box;
  width: 100%;
  font-weight: 600;
  color: var(--muted) !important;
  text-decoration: none !important;
  padding: 0.5rem 0.9rem !important;
  white-space: nowrap !important;
  background: transparent;
  border: 0;
  line-height: 1.35;
  position: relative;
}

.mywu-user-menu-item-text {
  display: inline-block;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

.mywu-user-menu-item--profile .mywu-user-menu-item-text--profile,
.mywu-user-menu-item-text--profile {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mywu-user-menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  line-height: 1;
  font-size: 1em;
}

.mywu-user-menu-item-icon svg,
.mywu-user-menu-item-icon img {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
}

.mywu-user-menu-item-icon--glyph {
  color: var(--text, #152033);
}

.mywu-user-menu-item-icon--glyph svg {
  fill: currentColor;
}

.mywu-user-menu-item-icon--square img {
  width: 1em;
  height: 1em;
  object-fit: fill;
}

/* Profile photos: squircle (between square and circle). */
.mywu-user-menu-item-icon--avatar {
  overflow: hidden;
  border-radius: 28%;
}

.mywu-user-menu-trigger-icon--avatar,
.mywu-user-menu-item-avatar {
  object-fit: cover;
  border-radius: 28%;
}

.mywu-user-menu-item-icon--avatar .mywu-user-menu-item-avatar {
  width: 1em;
  height: 1em;
}

@supports (corner-shape: squircle) {
  .mywu-user-menu-item-icon--avatar {
    border-radius: 50%;
    corner-shape: squircle;
  }

  .mywu-user-menu-trigger-icon--avatar,
  .mywu-user-menu-item-avatar {
    border-radius: 50%;
    corner-shape: squircle;
  }
}

.mywu-account-avatar-upload {
  margin: 0.75rem 1rem 1rem;
  padding: 0.75rem 1rem;
  max-width: 28rem;
  border: 1px solid var(--border, #d5dee8);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card, #fff) 92%, var(--bg-accent, #f4f7fb));
  font-size: 0.88rem;
  color: var(--text, #152033);
}

.mywu-account-avatar-upload h2 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 650;
}

.mywu-account-avatar-upload p {
  margin: 0 0 0.55rem;
  color: var(--muted, #5b6b7f);
  line-height: 1.35;
}

.mywu-account-avatar-upload .mywu-account-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.mywu-account-avatar-upload input[type="file"] {
  max-width: 100%;
  font-size: 0.82rem;
}

.mywu-account-avatar-upload button {
  font: inherit;
  cursor: pointer;
}

.mywu-account-avatar-upload .mywu-account-avatar-status {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: var(--muted, #5b6b7f);
}

.mywu-user-menu-item:hover,
.mywu-user-menu-item:focus-visible {
  color: var(--text) !important;
  background: rgba(45, 212, 191, 0.12) !important;
  outline: none;
}

.mywu-user-menu-item[hidden] {
  display: none !important;
}

.mywu-user-menu-item[data-tooltip] {
  position: relative;
}

.mywu-user-menu-item[data-tooltip]::after {
  content: none !important;
  display: none !important;
}



.mywu-user-menu-item[data-tooltip]:hover::after,
.mywu-user-menu-item[data-tooltip]:focus-visible::after {
  visibility: visible;
}

/* Left sidebar (tickets, full chat): open panel to the right, tooltips on the right. */
.mywu-user-menu.is-sidebar .mywu-user-menu-panel {
  left: 0;
  right: auto;
}

.mywu-user-menu.is-sidebar .mywu-user-menu-item[data-tooltip]::after {
  left: calc(100% + 0.55rem);
  right: auto;
}

.mywu-user-menu.is-sidebar .mywu-user-menu-trigger {
  width: 100%;
  max-width: 100%;
  text-align: left;
}

@media (max-width: 900px) {
  .mywu-user-menu-trigger {
    max-width: min(100%, 12rem);
  }

  .mywu-user-menu-item[data-tooltip]::after {
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    transform: none;
    max-width: none;
    width: auto;
  }
}

html[data-theme-resolved="dark"] .mywu-user-menu-panel,
html[data-theme="dark"] .mywu-user-menu-panel,
html[data-theme-resolved="dark"] .mywu-user-menu-item[data-tooltip]::after,
html[data-theme="dark"] .mywu-user-menu-item[data-tooltip]::after,
html[data-theme-resolved="dark"] .mywu-account-menu-tooltip,
html[data-theme="dark"] .mywu-account-menu-tooltip {
  background: var(--acrylic-surface, rgba(10, 14, 22, 0.92));
  background-color: var(--acrylic-surface, rgba(10, 14, 22, 0.92));
  border-color: var(--acrylic-surface-border, rgba(45, 212, 191, 0.28));
  box-shadow: var(--acrylic-surface-shadow, 0 14px 36px rgba(0, 0, 0, 0.55));
  -webkit-backdrop-filter: var(--acrylic-blur, blur(18px) saturate(115%));
  backdrop-filter: var(--acrylic-blur, blur(18px) saturate(115%));
  isolation: auto;
  color: #e8eef6;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme-resolved="light"]):not([data-theme="light"]) .mywu-user-menu-panel,
  html:not([data-theme-resolved="light"]):not([data-theme="light"]) .mywu-account-menu-tooltip {
    background: var(--acrylic-surface, rgba(10, 14, 22, 0.92));
    background-color: var(--acrylic-surface, rgba(10, 14, 22, 0.92));
    border-color: var(--acrylic-surface-border, rgba(45, 212, 191, 0.28));
    box-shadow: var(--acrylic-surface-shadow, 0 14px 36px rgba(0, 0, 0, 0.55));
    -webkit-backdrop-filter: var(--acrylic-blur, blur(18px) saturate(115%));
    backdrop-filter: var(--acrylic-blur, blur(18px) saturate(115%));
    color: #e8eef6;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mywu-user-menu-panel,
  .mywu-account-menu-tooltip {
    background: rgba(238, 242, 246, 0.96);
    background-color: rgba(238, 242, 246, 0.96);
  }

  html[data-theme-resolved="dark"] .mywu-user-menu-panel,
  html[data-theme="dark"] .mywu-user-menu-panel,
  html[data-theme-resolved="dark"] .mywu-account-menu-tooltip,
  html[data-theme="dark"] .mywu-account-menu-tooltip {
    background: rgba(10, 14, 22, 0.97);
    background-color: rgba(10, 14, 22, 0.97);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme-resolved="light"]):not([data-theme="light"]) .mywu-user-menu-panel,
    html:not([data-theme-resolved="light"]):not([data-theme="light"]) .mywu-account-menu-tooltip {
      background: rgba(10, 14, 22, 0.97);
      background-color: rgba(10, 14, 22, 0.97);
    }
  }
}

/* Pseudo tooltips are disabled — JS mounts a fixed acrylic tip on document.body
   so overflow:auto sidebars (tickets) and stacking contexts cannot clip/blank blur. */
.mywu-user-menu-item[data-tooltip]::after {
  content: none !important;
  display: none !important;
}

.mywu-account-menu-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  box-sizing: border-box;
  z-index: 100010;
  max-width: min(17.5rem, calc(100vw - 1.5rem));
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--acrylic-surface-border, rgba(15, 118, 110, 0.36));
  background: var(--acrylic-surface, rgba(238, 242, 246, 0.22));
  background-color: var(--acrylic-surface, rgba(238, 242, 246, 0.22));
  color: var(--chip-tooltip-text, var(--text));
  box-shadow: var(--acrylic-surface-shadow, 0 12px 32px rgba(15, 20, 28, 0.2));
  -webkit-backdrop-filter: var(--acrylic-blur, blur(24px) saturate(180%));
  backdrop-filter: var(--acrylic-blur, blur(24px) saturate(180%));
  isolation: auto;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
  opacity: 1;
  visibility: hidden;
}

.mywu-account-menu-tooltip.is-visible {
  visibility: visible;
}

.mywu-user-menu-panel.is-portaled {
  position: fixed !important;
  z-index: 100000 !important;
  /* Acrylic already set on .mywu-user-menu-panel — keep opacity 1 for blur */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.mywu-user-menu-panel.is-portaled[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Coder problems dialog: panel must stay in the dialog top layer, not body. */
.mywu-user-menu-panel.is-portaled.is-portaled-dialog,
dialog.site-problems-dialog .mywu-user-menu-panel.is-portaled {
  z-index: 20001 !important;
}

dialog.site-problems-dialog .site-dialog-head {
  overflow: visible;
}

dialog.site-problems-dialog .browse-head-account-slot .mywu-user-menu {
  position: relative;
  z-index: 40;
}

dialog.site-problems-dialog .browse-head-account-slot .mywu-user-menu-panel {
  z-index: 50;
}

dialog.site-problems-dialog .site-dialog-head:has(.mywu-user-menu.is-open),
dialog.site-problems-dialog .site-dialog-head:has(.mywu-user-menu.is-hover) {
  z-index: 20000;
}

dialog.site-problems-dialog .browse-head-account-slot .mywu-user-menu.is-open,
dialog.site-problems-dialog .browse-head-account-slot .mywu-user-menu.is-hover {
  position: relative;
  z-index: 20001;
}

dialog.site-problems-dialog .browse-head-account-slot .mywu-user-menu.is-open .mywu-user-menu-panel,
dialog.site-problems-dialog .browse-head-account-slot .mywu-user-menu.is-hover .mywu-user-menu-panel {
  z-index: 20002;
}
/* Open WebUI: own div.flex row after the Controls flex container. */
[data-mywu-openwebui-account-wrap="1"] {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

#mywu-openwebui-account-host,
.mywu-openwebui-account-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-inline-start: 0;
  z-index: 60;
}

#mywu-openwebui-account-host .mywu-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  min-width: 1.5rem;
  height: 1.5rem;
  max-width: 6.5rem;
  padding: 0 0.35rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

#mywu-openwebui-account-host .mywu-user-menu-trigger:hover,
#mywu-openwebui-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
#mywu-openwebui-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  background: rgba(0, 0, 0, 0.04);
}

html.dark #mywu-openwebui-account-host .mywu-user-menu-trigger:hover,
html.dark #mywu-openwebui-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
html.dark #mywu-openwebui-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger,
.dark #mywu-openwebui-account-host .mywu-user-menu-trigger:hover,
.dark #mywu-openwebui-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
.dark #mywu-openwebui-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  background: rgba(255, 255, 255, 0.06);
}

#mywu-openwebui-account-host .mywu-user-menu-caret {
  display: none;
}

/* InvokeAI: MyWu catalog rows inside the Chakra User Menu list. */
.chakra-menu__menu-list a[data-mywu-invokeai-item],
.chakra-menu__menu-list button[data-mywu-invokeai-item] {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.chakra-menu__menu-list [data-mywu-invokeai-item] .chakra-menu__icon-wrapper img,
.chakra-menu__menu-list [data-mywu-invokeai-item] img.chakra-menu__icon {
  width: 1em;
  height: 1em;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}

.chakra-menu__menu-list [data-mywu-invokeai-item] .mywu-user-menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin: 0;
}

#mywu-openwebui-account-host .mywu-user-menu-trigger-label {
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SwarmUI: pin to the right end of the top status strip.
 * Sibling of `.top-status-bar-wrapper` (not inside `#top_status_bar`) so
 * SwarmUI's innerText updates and wrapper:hover { display:none } do not kill it. */
#mywu-swarmui-account-host,
.mywu-swarmui-account-host {
  position: fixed;
  top: 0;
  right: 0.5rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding-inline: 0.35rem;
  z-index: 200;
  pointer-events: auto;
}

#mywu-swarmui-account-host .mywu-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  padding: 0.15rem 0.4rem;
  border: none;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

#mywu-swarmui-account-host .mywu-user-menu-trigger:hover,
#mywu-swarmui-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
#mywu-swarmui-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  background: rgba(0, 0, 0, 0.4);
}

#mywu-swarmui-account-host .mywu-user-menu-caret {
  display: none;
}

#mywu-swarmui-account-host .mywu-user-menu-trigger-label {
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* VideoSOS: sit immediately left of the Settings icon button */
#mywu-videosos-account-host,
.mywu-videosos-account-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  z-index: 60;
}

#mywu-videosos-account-host .mywu-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.4rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

#mywu-videosos-account-host .mywu-user-menu-trigger:hover,
#mywu-videosos-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
#mywu-videosos-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  background: rgba(255, 255, 255, 0.06);
}

#mywu-videosos-account-host .mywu-user-menu-caret {
  display: none;
}

#mywu-videosos-account-host .mywu-user-menu-trigger-label {
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact square account trigger — icon stays inside the bordered box. */
.mywu-user-menu.is-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.mywu-user-menu.is-compact .mywu-user-menu-trigger,
.mywu-user-menu-trigger.is-compact {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 5px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.45));
  border-radius: 6px;
  background: var(--card, transparent);
  color: inherit;
  gap: 0;
  max-width: none;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.mywu-user-menu.is-compact .mywu-user-menu-trigger:hover,
.mywu-user-menu.is-compact.mywu-user-menu.is-open .mywu-user-menu-trigger,
.mywu-user-menu.is-compact.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  border-color: var(--accent, rgba(45, 212, 191, 0.7));
  background: rgba(0, 0, 0, 0.06);
}

.mywu-user-menu.is-compact .mywu-user-menu-trigger-icon {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.mywu-user-menu.is-compact .mywu-user-menu-trigger-label {
  display: none;
}

/* Icon invert is applied by JS (syncTriggerIconContrast) from inherited
   background luminance — do not hard-code theme-class filters here. */

html[data-theme="dark"] .mywu-user-menu.is-compact .mywu-user-menu-trigger:hover,
html.dark .mywu-user-menu.is-compact .mywu-user-menu-trigger:hover,
.dark .mywu-user-menu.is-compact .mywu-user-menu-trigger:hover,
html[data-theme="dark"] .mywu-user-menu.is-compact.mywu-user-menu.is-open .mywu-user-menu-trigger,
html.dark .mywu-user-menu.is-compact.mywu-user-menu.is-open .mywu-user-menu-trigger,
.dark .mywu-user-menu.is-compact.mywu-user-menu.is-open .mywu-user-menu-trigger {
  background: rgba(255, 255, 255, 0.08);
}

/* Open Design: sit immediately left of Settings. */
#mywu-opendesign-account-host,
.mywu-opendesign-account-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  z-index: 60;
}

#mywu-opendesign-account-host .mywu-user-menu-caret,
#mywu-opendesign-account-host .mywu-user-menu-trigger-label {
  display: none;
}

/* Dify: sit immediately left of the profile avatar menu. */
#mywu-dify-account-host,
.mywu-dify-account-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 0.25rem;
  z-index: 60;
}

#mywu-dify-account-host .mywu-user-menu-caret,
#mywu-dify-account-host .mywu-user-menu-trigger-label {
  display: none;
}

/* Hermes: replace sidebar footer Log out with compact square trigger. */
#mywu-hermes-account-host,
.mywu-hermes-account-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  z-index: 60;
}

#mywu-hermes-account-host .mywu-user-menu-caret,
#mywu-hermes-account-host .mywu-user-menu-trigger-label {
  display: none;
}

button[data-mywu-hermes-logout-hidden="1"] {
  display: none !important;
}

/* Bolt.diy: right-aligned compact trigger in the app header. */
#mywu-boltdiy-account-host,
.mywu-boltdiy-account-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  z-index: 60;
}

#mywu-boltdiy-account-host .mywu-user-menu-caret,
#mywu-boltdiy-account-host .mywu-user-menu-trigger-label {
  display: none;
}

/* Budibase: inject into Spectrum ActionMenu (avatar dropdown). */
ul.spectrum-Menu[role="menu"] li[data-mywu-budibase-item],
ul.spectrum-Menu[role="menu"] [data-mywu-budibase-item] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  box-sizing: border-box;
  list-style: none;
}

ul.spectrum-Menu[role="menu"] [data-mywu-budibase-item] .mywu-budibase-menu-icon,
ul.spectrum-Menu[role="menu"] [data-mywu-budibase-item] .mywu-user-menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

ul.spectrum-Menu[role="menu"] [data-mywu-budibase-item] .mywu-budibase-menu-icon img,
ul.spectrum-Menu[role="menu"] [data-mywu-budibase-item] img.mywu-user-menu-item-icon {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}

ul.spectrum-Menu[role="menu"] [data-mywu-budibase-hidden="1"] {
  display: none !important;
}

/* n8n: sibling of Settings in the bottom menu. Chevron marks a right-opening panel. */
#mywu-n8n-account-host,
.mywu-n8n-account-host {
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}

#mywu-n8n-account-host.mywu-user-menu,
#mywu-n8n-account-host .mywu-user-menu-trigger {
  width: 100%;
  max-width: 100%;
}

#mywu-n8n-account-host .mywu-user-menu-trigger {
  justify-content: flex-start;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 0.4rem 0.65rem;
  color: inherit;
  gap: 0.5rem;
}

#mywu-n8n-account-host .mywu-user-menu-trigger::after {
  content: "";
  margin-left: auto;
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  flex: 0 0 auto;
}

#mywu-n8n-account-host .mywu-user-menu-trigger:hover,
#mywu-n8n-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
#mywu-n8n-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  background: rgba(0, 0, 0, 0.06);
}

#mywu-n8n-account-host .mywu-user-menu-trigger:hover,
#mywu-n8n-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
#mywu-n8n-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  background: rgba(0, 0, 0, 0.06);
}

#mywu-n8n-account-host .mywu-user-menu-trigger-label {
  min-width: 4em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mywu-n8n-account-host .mywu-user-menu-caret {
  display: none;
}

html[data-theme="dark"] #mywu-n8n-account-host .mywu-user-menu-trigger:hover,
html.dark #mywu-n8n-account-host .mywu-user-menu-trigger:hover,
.dark #mywu-n8n-account-host .mywu-user-menu-trigger:hover,
html[data-theme="dark"] #mywu-n8n-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
html.dark #mywu-n8n-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
.dark #mywu-n8n-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger {
  background: rgba(255, 255, 255, 0.08);
}

/* LibreChat: compact square trigger left of nav-user (h-9 w-9 sibling). */
#mywu-librechat-account-host,
.mywu-librechat-account-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  margin-inline-end: 0.25rem;
  z-index: 60;
}

#mywu-librechat-account-host.mywu-user-menu,
#mywu-librechat-account-host .mywu-user-menu {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
}

#mywu-librechat-account-host .mywu-user-menu-trigger {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 5px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  gap: 0;
  max-width: none;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

#mywu-librechat-account-host .mywu-user-menu-trigger:hover,
#mywu-librechat-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
#mywu-librechat-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  background: var(--surface-active-alt, rgba(255, 255, 255, 0.08));
  border-color: var(--accent, rgba(45, 212, 191, 0.55));
}

#mywu-librechat-account-host .mywu-user-menu-trigger-icon {
  width: 18px;
  height: 18px;
}

#mywu-librechat-account-host .mywu-user-menu-trigger-label,
#mywu-librechat-account-host .mywu-user-menu-caret {
  display: none;
}

/* Flowise: compact square trigger left of Settings (MuiAvatar + tabler-icon-settings). */
#mywu-flowise-account-host,
.mywu-flowise-account-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin-inline-end: 4px;
  z-index: 60;
  vertical-align: middle;
}

#mywu-flowise-account-host.mywu-user-menu,
#mywu-flowise-account-host .mywu-user-menu {
  width: 34px;
  height: 34px;
  min-width: 34px;
}

#mywu-flowise-account-host .mywu-user-menu-trigger {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 5px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  border-radius: 8px;
  background: transparent;
  color: inherit;
  gap: 0;
  max-width: none;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

#mywu-flowise-account-host .mywu-user-menu-trigger:hover,
#mywu-flowise-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
#mywu-flowise-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  background: var(--surface-active-alt, rgba(0, 0, 0, 0.04));
  border-color: var(--accent, rgba(25, 118, 210, 0.55));
}

#mywu-flowise-account-host .mywu-user-menu-trigger-icon {
  width: 18px;
  height: 18px;
}

#mywu-flowise-account-host .mywu-user-menu-trigger-label,
#mywu-flowise-account-host .mywu-user-menu-caret {
  display: none;
}

/* code.mywu.net: compact square trigger left of Full screen in the titlebar. */
#mywu-code-account-host,
#mlx-account-menu-btn.mywu-code-account-host,
.mywu-code-account-host,
li[data-mywu-code-account-item="1"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  z-index: 60;
}

#mywu-code-account-host.mywu-user-menu,
#mlx-account-menu-btn.mywu-user-menu,
li[data-mywu-code-account-item="1"] .mywu-user-menu {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

#mywu-code-account-host .mywu-user-menu-trigger,
#mlx-account-menu-btn .mywu-user-menu-trigger,
#mywu-code-account-host.action-label,
#mlx-account-menu-btn.action-label {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  justify-content: center;
  gap: 0;
  max-width: none;
  color: inherit;
}

#mywu-code-account-host .mywu-user-menu-trigger:hover,
#mlx-account-menu-btn .mywu-user-menu-trigger:hover,
#mywu-code-account-host.mywu-user-menu.is-open .mywu-user-menu-trigger,
#mlx-account-menu-btn.mywu-user-menu.is-open .mywu-user-menu-trigger,
#mywu-code-account-host.mywu-user-menu.is-hover .mywu-user-menu-trigger,
#mlx-account-menu-btn.mywu-user-menu.is-hover .mywu-user-menu-trigger {
  background: var(--vscode-toolbar-hoverBackground, rgba(255, 255, 255, 0.1));
}

#mywu-code-account-host .mywu-user-menu-trigger-label,
#mlx-account-menu-btn .mywu-user-menu-trigger-label,
#mywu-code-account-host .mywu-user-menu-caret,
#mlx-account-menu-btn .mywu-user-menu-caret {
  display: none;
}

#mywu-code-account-host .mywu-user-menu-trigger-icon,
#mlx-account-menu-btn .mywu-user-menu-trigger-icon {
  width: 18px;
  height: 18px;
}