/*
 * Edara Extensions — account menu (the header avatar and its dropdown).
 * Source of truth: edara-extensions-infra/design/extension-shell/account-menu.css,
 * copied byte-identical to frontend/public/styles/account-menu.css.
 * Tokens only (edara-tokens.css); dark mode comes from its .dark block.
 */
.account-menu {
  position: relative;
  display: inline-flex;
  flex: none;
}

/* 32px of ink, 44px of touch. The expander is centred and sized by
   --min-touch-target, with a 44px fallback so the file still works in a repo
   that hasn't adopted the tokens sheet. The 6px margin makes the avatar's own
   margin box exactly that size, so the hit area never covers a neighbour. */
.account-menu__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font: inherit;
  font-size: var(--typo-label-md);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow var(--motion-base) var(--motion-ease);
}

.account-menu__trigger::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--min-touch-target, 44px);
  height: var(--min-touch-target, 44px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.account-menu__trigger:hover,
.account-menu--open .account-menu__trigger {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
}

.account-menu__trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@keyframes account-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.account-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 1000;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-lg);
  background: var(--surface-container-low);
  color: var(--on-surface);
  box-shadow: var(--elev-2);
  animation: account-menu-in var(--motion-base) var(--motion-ease);
}

.account-menu__panel[hidden] { display: none; } /* wins over an app rule that sets display */

.account-menu__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 10px;
}

.account-menu__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: var(--typo-title-sm);
  font-weight: 600;
}

.account-menu__id-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.account-menu__name,
.account-menu__email {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account-menu__name {
  font-size: var(--typo-title-sm);
  font-weight: 600;
}

.account-menu__email {
  font-size: var(--typo-label-md);
  color: var(--on-surface-variant);
}

.account-menu__divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--outline-variant);
}

.account-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--min-touch-target, 44px);
  padding: 8px 12px;
  border: none;
  border-radius: var(--shape-md);
  background: transparent;
  color: var(--on-surface);
  font: inherit;
  font-size: var(--typo-body-md);
  text-align: start;
  cursor: pointer;
}

.account-menu__item svg {
  flex: none;
  color: var(--on-surface-variant);
}

.account-menu__item:hover,
.account-menu__item:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
}