/* Kole UI Mention 样式 — @ 提及 */ .kole-mention { font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); position: relative; width: 360px; } .kole-mention-area { position: relative; } .kole-mention-input { width: 100%; box-sizing: border-box; border: 1px solid var(--kole-color-border); border-radius: 6px; padding: 8px 10px; font-size: 14px; color: var(--kole-color-text-body); outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s; } .kole-mention-input:focus { border-color: var(--kole-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); } .kole-mention-panel { position: absolute; z-index: 30; background: var(--kole-color-card-bg); border: 1px solid var(--kole-color-border); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); width: 240px; max-height: 220px; overflow: auto; } .kole-mention-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; } .kole-mention-item:hover, .kole-mention-item.is-active { background: var(--kole-color-brand-bg); } .kole-mention-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--kole-color-brand); color: var(--kole-color-text-inverse); font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kole-mention-name { font-size: 13px; color: var(--kole-color-text-body); } .kole-mention-dept { font-size: 12px; color: var(--kole-color-text-secondary); margin-left: auto; } .kole-mention-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .kole-mention-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--kole-color-brand-bg); color: var(--kole-color-brand); border-radius: 4px; padding: 2px 8px; font-size: 12px; } .kole-mention-chip b { cursor: pointer; font-weight: 600; }