/* CSS mask icon system — <span class="icon icon-{name}">; color via --chat-icon-color */
.icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: var(--chat-icon-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
}
.icon-edit {
  -webkit-mask-image: url(/assets/images/icons/edit.svg);
  mask-image: url(/assets/images/icons/edit.svg);
}
.icon-pin {
  -webkit-mask-image: url(/assets/images/icons/pin.svg);
  mask-image: url(/assets/images/icons/pin.svg);
}
.icon-unpin {
  -webkit-mask-image: url(/assets/images/icons/unpin.svg);
  mask-image: url(/assets/images/icons/unpin.svg);
}
.icon-share {
  -webkit-mask-image: url(/assets/images/icons/share.svg);
  mask-image: url(/assets/images/icons/share.svg);
}
.icon-copy {
  -webkit-mask-image: url(/assets/images/icons/copy.svg);
  mask-image: url(/assets/images/icons/copy.svg);
}
.icon-check {
  -webkit-mask-image: url(/assets/images/icons/check.svg);
  mask-image: url(/assets/images/icons/check.svg);
}
.icon-like {
  -webkit-mask-image: url(/assets/images/icons/like.svg);
  mask-image: url(/assets/images/icons/like.svg);
}
.icon-like-fill {
  -webkit-mask-image: url(/assets/images/icons/like-fill.svg);
  mask-image: url(/assets/images/icons/like-fill.svg);
}
.icon-dislike {
  -webkit-mask-image: url(/assets/images/icons/dislike.svg);
  mask-image: url(/assets/images/icons/dislike.svg);
}
.icon-dislike-fill {
  -webkit-mask-image: url(/assets/images/icons/dislike-fill.svg);
  mask-image: url(/assets/images/icons/dislike-fill.svg);
}
.icon-new-chat {
  -webkit-mask-image: url(/assets/images/icons/new-chat.svg);
  mask-image: url(/assets/images/icons/new-chat.svg);
}
.icon-search {
  -webkit-mask-image: url(/assets/images/icons/search.svg);
  mask-image: url(/assets/images/icons/search.svg);
}
.icon-close {
  -webkit-mask-image: url(/assets/images/icons/close.svg);
  mask-image: url(/assets/images/icons/close.svg);
}
.icon-portfolio {
  -webkit-mask-image: url(/assets/images/icons/portfolio.svg);
  mask-image: url(/assets/images/icons/portfolio.svg);
}
.icon-privacy {
  -webkit-mask-image: url(/assets/images/icons/privacy.svg);
  mask-image: url(/assets/images/icons/privacy.svg);
}
.icon-resume {
  -webkit-mask-image: url(/assets/images/icons/resume.svg);
  mask-image: url(/assets/images/icons/resume.svg);
}
.icon-shortcuts {
  -webkit-mask-image: url(/assets/images/icons/shortcuts.svg);
  mask-image: url(/assets/images/icons/shortcuts.svg);
}
.icon-bug {
  -webkit-mask-image: url(/assets/images/icons/bug.svg?v=2);
  mask-image: url(/assets/images/icons/bug.svg?v=2);
}
.icon-data-controls {
  -webkit-mask-image: url(/assets/images/icons/data-controls.svg?v=2);
  mask-image: url(/assets/images/icons/data-controls.svg?v=2);
}
.icon-building {
  -webkit-mask-image: url(/assets/images/icons/building.svg);
  mask-image: url(/assets/images/icons/building.svg);
}
.icon-calendar {
  -webkit-mask-image: url(/assets/images/icons/calendar.svg);
  mask-image: url(/assets/images/icons/calendar.svg);
}
.icon-lock {
  -webkit-mask-image: url(/assets/images/icons/lock.svg);
  mask-image: url(/assets/images/icons/lock.svg);
}
.icon-target {
  -webkit-mask-image: url(/assets/images/icons/target.svg);
  mask-image: url(/assets/images/icons/target.svg);
}
.icon-linkedin {
  -webkit-mask-image: url(/assets/images/icons/linkedin.svg);
  mask-image: url(/assets/images/icons/linkedin.svg);
}
.icon-x {
  -webkit-mask-image: url(/assets/images/icons/x.svg?v=3);
  mask-image: url(/assets/images/icons/x.svg?v=3);
}
.icon-link {
  -webkit-mask-image: url(/assets/images/icons/link.svg);
  mask-image: url(/assets/images/icons/link.svg);
}
.icon-external-link {
  -webkit-mask-image: url(/assets/images/icons/external-link.svg);
  mask-image: url(/assets/images/icons/external-link.svg);
}
.icon-clap {
  -webkit-mask-image: url(/assets/images/icons/clap.svg?v=5);
  mask-image: url(/assets/images/icons/clap.svg?v=5);
}

/* session-menu icons use sidebar-nav link color treatment */
.session-menu-icon,
.session-menu-pin-icon {
  background-color: var(--chat-link);
}

/* pinned indicator on session items matches sidebar-nav muted color */
.session-pinned-icon {
  background-color: var(--chat-link);
}

/* liked/disliked filled state — accent color */
.chat-msg-action-btn.liked .icon,
.chat-msg-action-btn.disliked .icon {
  background-color: var(--chat-accent);
}

html[data-theme="dark"] .chat-context-chip-icon {
  color: var(--chat-text);
}