/* ========================================================================== studio-mention.css — the `@` Studio picker and the composer's Studio token. Two pieces, one idea: naming a Studio should feel like the smallest possible gesture inside the composer, not like opening a mode. · .oc-studio-menu — the compact suggestion list. It lives in with fixed positioning (see studio-mention-menu.js), so it is styled as a standalone surface rather than as part of the composer's blurred shell. · .oc-composer__studio / __notice — the token and the validation line, which borrow the composer's existing chip vocabulary so the Studio reads as one more removable thing in the row. ========================================================================== */ .oc-studio-menu { position: fixed; z-index: 1200; display: flex; flex-direction: column; gap: 2px; max-height: min(320px, 60vh); padding: 6px; overflow: hidden auto; color: var(--oc-composer-foreground, #1b1818); background: var(--surface-raised, #fffdfa); border: 1px solid var(--oc-composer-border, rgba(27, 24, 24, 0.16)); border-radius: 12px; box-shadow: 0 12px 32px rgba(27, 24, 24, 0.16), 0 2px 6px rgba(27, 24, 24, 0.08); } .oc-studio-menu[hidden] { display: none; } .oc-studio-menu__heading { padding: 4px 8px 6px; color: var(--text-muted, rgba(27, 24, 24, 0.56)); font-family: Inter, var(--font-sans, system-ui, -apple-system, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .oc-studio-menu__list { display: flex; flex-direction: column; gap: 2px; } .oc-studio-menu__item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px; color: inherit; text-align: left; background: transparent; border: 0; border-radius: 8px; cursor: pointer; } .oc-studio-menu__item.is-active { background: var(--surface-sunken, rgba(27, 24, 24, 0.06)); } .oc-studio-menu__icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; object-fit: contain; opacity: 0.8; } .oc-studio-menu__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .oc-studio-menu__name { display: flex; gap: 6px; align-items: baseline; font-family: Inter, var(--font-sans, system-ui, -apple-system, sans-serif); font-size: 13px; font-weight: 600; line-height: 1.2; } .oc-studio-menu__handle { color: var(--text-muted, rgba(27, 24, 24, 0.5)); font-size: 12px; font-weight: 400; } .oc-studio-menu__summary { overflow: hidden; color: var(--text-muted, rgba(27, 24, 24, 0.6)); font-family: Inter, var(--font-sans, system-ui, -apple-system, sans-serif); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; } /* The token --------------------------------------------------------------- It sits in the composer's existing chip row, so it inherits chip geometry and only asserts what makes it a Studio rather than a file. */ .oc-composer__studio { min-width: 0; border-color: var(--oc-composer-foreground, #1b1818); } .oc-composer__studio .oc-composer__chip-label { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .oc-composer__studio-mark { padding: 1px; object-fit: contain; } /* The validation line ------------------------------------------------------ */ .oc-composer__notice { margin: 0; padding: 0 2px; color: var(--oc-composer-foreground, #1b1818); font-family: Inter, var(--font-sans, system-ui, -apple-system, sans-serif); font-size: 12px; line-height: 1.4; } .oc-composer__notice[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .oc-studio-menu { box-shadow: 0 0 0 1px var(--oc-composer-border, rgba(27, 24, 24, 0.16)); } }