/* Winston V3 — top-bar user pill + dropdown menu. The pill sits rightmost in #top-bar-right (replaced the standalone Halt button on 2026-06-06; Halt moved into this menu). The popover is appended to and fixed-positioned under the pill — same pattern as the System Check popover (status-segment.css). */ .user-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 3px 10px 3px 4px; background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-full); font-weight: var(--weight-semi); font-size: var(--type-sm); cursor: pointer; white-space: nowrap; transition: background 0.12s ease, border-color 0.12s ease; } .user-pill:hover { background: var(--surface-hover); } .user-pill[aria-expanded="true"] { background: var(--surface-active); border-color: var(--ai-line); } .user-pill-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--ai); color: var(--ink-inverse); font-weight: 700; font-size: var(--type-xs); flex: 0 0 auto; } .user-pill-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; } .user-menu-glyph { width: 16px; height: 16px; flex: 0 0 auto; } .user-pill .user-menu-glyph { width: 14px; height: 14px; color: var(--ink-muted); } /* Dropdown popover */ .user-menu-popover { z-index: 1000; min-width: 244px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; padding: var(--space-1); } .user-menu-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); } .user-menu-head-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--ai); color: var(--ink-inverse); font-weight: 700; flex: 0 0 auto; } .user-menu-head-meta { display: flex; flex-direction: column; min-width: 0; } .user-menu-head-name { font-weight: var(--weight-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-head-sub { font-size: var(--type-xs); color: var(--ink-muted); } .user-menu-items { display: flex; flex-direction: column; } .user-menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; /* Apple HIG touch-target floor — dropdown is phone-reachable */ padding: var(--space-2) var(--space-3); border: none; background: transparent; color: var(--ink); font-size: var(--type-sm); font-weight: 500; text-align: left; text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; } .user-menu-item:hover { background: var(--surface-hover); } /* Real focus ring (a11y floor) — not background-only. */ .user-menu-item:focus-visible { background: var(--surface-hover); outline: 2px solid var(--ai); outline-offset: -2px; } .user-menu-item .user-menu-glyph { color: var(--ink-muted); } .user-menu-item-danger { color: var(--danger, #c0392b); } .user-menu-item-danger .user-menu-glyph { color: var(--danger, #c0392b); } .user-menu-item-danger:hover { background: rgba(192, 57, 43, 0.08); } .user-menu-sep { height: 1px; background: var(--border); margin: var(--space-1) var(--space-2); } /* Phones: avatar + caret only; the username text would crowd the cluster. */ @media (max-width: 600px) { .user-pill { min-height: 44px; } .user-pill-name { display: none; } }