/* ===================================================================== * chat_row_menu.css — the "⋮" row-menu PANEL (Pin/Unpin · Rename · Delete). * * Companion to js/components/chat_row_menu.js. Loaded globally from * base_ds.html and inert until that script injects a `.chat-rowmenu` — the * same pattern tour.css uses. * * Global rather than per-host on purpose. The panel is appended to * (both history hosts put the list in an overflow-hidden scroll container, * which would clip a nested panel), so it is NOT a descendant of .rail or of * .cloud-chat-shell and cannot be reached from rail.css's * `html[data-ui-layout="rail"] .rail-history …` selectors or from chat.css, * which only /chat loads. One sheet, one definition, every host page. * * The TRIGGER button (.chat-rowmenu-btn) lives inside the row and so stays * with the row styles in chat.css / rail.css, where it can inherit each * host's sizing. * ===================================================================== */ /* Layout only — chat_row_menu.js owns placement (it sets top/left). * * Metrics are the app's ONE dropdown look, shared verbatim with the other * three menus in the app (`.detail-menu__panel` in detail-page.css, * `.lib-movemenu` in library.html, `.fbar-menu` in filter_toolbar.css): * 6px panel padding, 12px panel radius, --ds-shadow-md, and rows that are * 13.5px text on an 8px radius with a muted 15px leading icon. Literal values * rather than the legacy --radius-x + --text-x scale (4px/6px/12px) on purpose: * that scale is a size ladder, not the menu spec, and following it is what made * this panel the odd one out. Change these four numbers only together with the * three sheets above. */ .chat-rowmenu { position: fixed; z-index: 2400; min-width: 208px; padding: 6px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 12px; box-shadow: var(--ds-shadow-md); } .chat-rowmenu[hidden] { display: none; } .chat-rowmenu__item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--ds-text-primary); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; } /* Leading glyph, muted so the label leads — same weight as the icons in the detail-page overflow menu. */ .chat-rowmenu__item svg { width: 15px; height: 15px; flex: none; color: var(--ds-text-muted); } .chat-rowmenu__label { flex: 1 1 auto; min-width: 0; } .chat-rowmenu__item:hover, .chat-rowmenu__item:focus-visible { background: var(--ds-surface-dim); } .chat-rowmenu__item:focus-visible { outline: var(--ds-focus-outline); outline-offset: calc(var(--ds-focus-outline-offset) * -1); } .chat-rowmenu__item.is-danger, .chat-rowmenu__item.is-danger svg { color: var(--ds-accent-danger-ink); } .chat-rowmenu__item.is-danger:hover, .chat-rowmenu__item.is-danger:focus-visible { background: var(--ds-accent-danger-bg); } /* Paper opens its menus with a short rise, and this panel is the same component as `.detail-menu__panel` — so it gets the same entrance there (and only there: the default theme's menus don't animate). Transform-only, so the JS placement above is unaffected. */ html[data-theme="paper"] .chat-rowmenu:not([hidden]) { animation: chat-rowmenu-in var(--ds-motion-fast, 0.16s) var(--ds-ease-enter, ease) both; } @keyframes chat-rowmenu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html[data-theme="paper"] .chat-rowmenu:not([hidden]) { animation: none; } }