.account-shortcut { position: relative; }
.account-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-content);
    font-size: .6875rem;
    font-weight: 700;
    box-shadow: 0 2px 6px #00000018;
}
.account-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.account-avatar img[hidden], [data-account-drawer] [hidden] { display: none !important; }
.account-menu-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.account-speech-bubble {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    width: max-content;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: .875rem 1rem;
    border: 1px solid var(--color-base-300);
    border-radius: 1.125rem;
    background: var(--color-base-100);
    color: var(--color-base-content);
    box-shadow: 0 8px 24px #00000020;
    font-size: .8125rem;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.75rem) scale(.65);
    transform-origin: calc(100% - 1.5rem) -.75rem;
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.account-speech-bubble::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: .8rem; }
.account-speech-bubble::after {
    content: "";
    position: absolute;
    right: 1.0625rem;
    top: -.4375rem;
    width: .875rem;
    height: .875rem;
    border-left: 1px solid var(--color-base-300);
    border-top: 1px solid var(--color-base-300);
    background: var(--color-base-100);
    transform: rotate(45deg);
}
.account-shortcut[data-welcome-visible] .account-speech-bubble,
.account-shortcut:not([data-tooltip-dismissed]):is(:hover, :focus-within) .account-speech-bubble {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.account-shortcut[data-drawer-open] .account-speech-bubble { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    .account-speech-bubble { transition: none; transform: none; }
    [data-account-drawer] .drawer-side, [data-account-drawer] .drawer-side > * { transition: none; }
}