.account-dropdown, .notif-dropdown, .autocomplete-list, .fo-row-menu, .fo-popover {
  background: var(--fo-surface-hover);
  border: var(--border-w) solid var(--fo-line);
  clip-path: var(--fo-shape-panel);
  box-shadow: var(--shadow-popover);
}
/* Override the shared button rule's centered alignment. */
.account-dropdown a, .account-dropdown button,
.autocomplete-list button,
.fo-row-menu a, .fo-row-menu button,
.fo-popover a, .fo-popover button, .fo-popover-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; text-align: left;
  background: none; border: none; clip-path: none;
  color: var(--fo-text); font: inherit; font-size: var(--fs-ui); font-weight: 500;
  text-transform: none; letter-spacing: 0;
  padding: 10px 12px; border-radius: var(--fo-radius-control);
}
.account-dropdown a:hover, .account-dropdown button:hover,
.autocomplete-list button:hover,
.fo-row-menu a:hover, .fo-row-menu button:hover,
.fo-popover a:hover, .fo-popover button:hover, .fo-popover-item:hover { background: var(--fo-surface); text-decoration: none; }
.account-dropdown button.danger, .fo-row-menu .danger, .fo-popover-item.danger { color: var(--color-danger); }


.account-menu { position: relative; }
.account-trigger {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none;
  color: var(--fo-text);
  padding: 4px 10px 4px 4px; min-height: 0;
  border-radius: 999px;
  max-width: 220px;
  font-size: var(--fs-ui); font-weight: 600;
  text-transform: none;
}
.account-trigger:hover, .account-trigger[aria-expanded="true"] { background: var(--fo-surface-hover); }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chevron { flex-shrink: 0; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .7; }

.account-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
  min-width: 232px;
  padding: 6px;
}
.account-dropdown[hidden] { display: none; }
.account-dropdown .divider { margin: 4px 6px; }
.account-dropdown svg { flex-shrink: 0; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }

.notif-menu { position: relative; }
.fo-notifications {
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--fo-muted);
  cursor: pointer;
}
.fo-notifications::before {
  content: ''; position: absolute; inset: 5px 2px; z-index: -1;
  background: var(--fo-chrome-plate);
  box-shadow: inset 0 1px var(--fo-border), inset 0 -1px var(--fo-border);
  clip-path: var(--fo-shape-button);
  opacity: 0; transition: opacity .12s ease;
}
.fo-notifications:hover::before, .fo-notifications[aria-expanded="true"]::before { opacity: 1; }
.fo-notifications[aria-expanded="true"]::before { box-shadow: inset 0 -2px var(--fo-icon-accent); }
.fo-notifications svg { width: 23px; height: 23px; }
.fo-notifications__glass { fill: transparent; }
.fo-notifications__rays { opacity: 0; }
.fo-notifications:has(.fo-notifications__count:not([hidden])) { color: var(--fo-icon-accent); }
.fo-notifications:has(.fo-notifications__count:not([hidden])) .fo-notifications__glass { fill: color-mix(in srgb, var(--fo-icon-accent) 15%, transparent); }
.fo-notifications:has(.fo-notifications__count:not([hidden])) .fo-notifications__rays { opacity: 1; }
.fo-notifications:active svg { transform: translateY(1px); }
.fo-notifications:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.fo-notifications__count {
  position: absolute; top: 0; right: -2px;
  display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--fo-danger-bg); color: var(--fo-light-ink);
  font: 700 10px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  pointer-events: none;
}
.fo-notifications__count[hidden] { display: none; }

.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
  width: min(340px, calc(100vw - 32px));
  max-height: 70vh; overflow-y: auto;
  padding: 6px;
}
.notif-dropdown[hidden] { display: none; }
.notif-dropdown-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; font-size: var(--fs-small); color: var(--fo-muted);
}
.notif-dropdown-head a { font-size: var(--fs-small); }
.notif-empty { padding: 16px 8px; text-align: center; color: var(--fo-muted); font-size: var(--fs-small); }

.notif-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 8px; border-radius: var(--fo-radius-control);
  font-size: var(--fs-small);
}
.notif-item:hover { background: var(--fo-surface); }
.notif-item-unread { background: color-mix(in srgb, var(--fo-icon-accent) 15%, transparent); }
.notif-item a, .notif-item span { flex: 1; min-width: 0; color: var(--fo-text); }
.notif-item-actions { display: flex; gap: 2px; flex-shrink: 0; }
.notif-icon-btn {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--fo-radius-control);
  color: var(--fo-muted); font-size: 13px; line-height: 1; padding: 0;
}
.notif-icon-btn:hover { background: var(--fo-surface-hover); color: var(--fo-text); }

.notif-full-list {
  display: flex; flex-direction: column; gap: 2px;
  border: var(--border-w) solid var(--fo-line);
  clip-path: var(--fo-shape-panel);
  padding: 6px;
  max-width: 640px;
}
.notif-full-list .notif-item { font-size: var(--fs-ui); }

.autocomplete-field { position: relative; }
.autocomplete-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  max-height: 220px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
}
.account-name-full { display: block; padding: 8px 12px 4px; font-size: var(--fs-small); color: var(--fo-muted); }