.mention { color: var(--color-main, #146b9c); background: rgba(42,132,190,.1); border-radius: 3px; padding: 0 3px; }
#history_comment .sudi_followup_note .mention { color: var(--color-main); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#history_comment .sudi_mention_card_trigger { cursor: pointer; }
#history_comment .sudi_mention_card_trigger:focus-visible { outline: 2px solid var(--color-main); outline-offset: 3px; }
#tooltip_container .sudi_mention_profile { display:flex; align-items:center; gap:12px; max-width:300px; padding:4px; text-align:left; }
#tooltip_container .sudi_mention_profile img, #tooltip_container .sudi_mention_avatar { width:48px; height:48px; flex:0 0 48px; border-radius:50%; object-fit:cover; }
#tooltip_container .sudi_mention_avatar { display:flex; align-items:center; justify-content:center; background:var(--bg-main); color:var(--color-main); }
#tooltip_container .sudi_mention_profile > div { min-width:0; }
#tooltip_container .sudi_mention_profile > div strong, #tooltip_container .sudi_mention_profile > div span, #tooltip_container .sudi_mention_profile > div small { display:block; overflow-wrap:anywhere; }
#tooltip_container .sudi_mention_profile strong { margin-bottom:5px; }
#tooltip_container .sudi_mention_profile small { margin-top:5px; opacity:.85; }
.sudi_mention_hint { font-size: .8rem; color: var(--text-main-low, #666); margin: 6px 0; }
.sudi_mention_hint[hidden] { display: none; }
.sudi_mention_choice { display: flex; align-items: center; gap: 8px; padding: 5px 9px; }
.sudi_mention_choice img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ck.ck-reset_all .sudi_mention_choice { padding: 5px 9px; }
.ck.ck-reset_all .sudi_mention_choice > img { width: 26px; height: 26px; flex: 0 0 26px; }
.ck.ck-balloon-panel .ck.ck-list__item .ck-button.sudi_mention_choice:is(:hover, :focus, .ck-on) { background: var(--bg-main-low); color: var(--text-main-high); }
.ck.ck-balloon-panel .ck.ck-list__item .ck-button.sudi_mention_choice:is(:hover, :focus, .ck-on) > span { color: inherit; }
.sudi_mention_menu { max-height: 220px; overflow-y: auto; border: 1px solid #bbb; border-radius: 4px; background: var(--bg-main, white); position: relative; z-index: 10; }
.sudi_mention_menu[hidden] { display: none; }
.sudi_mention_menu button { display: block; width: 100%; border: 0; text-align: left; background: transparent; color: inherit; cursor: pointer; }
.sudi_mention_menu button.active, .sudi_mention_menu button:hover { background: rgba(42,132,190,.15); }