/* ═══════════════════════════════════════════════════════════════
   ThaiChat · Icon System v4 — mask-image so PNG icons pick up
   the current text color. Works with any tailwind text-* class.

   USAGE
   ─────
   <i class="tc-icon tc-icon-add"></i>                  <!-- 1em, inherits color -->
   <i class="tc-icon tc-icon-search text-[18px] text-[var(--tc-text-2)]"></i>
   <button class="tc-icon tc-icon-trash text-red-500 text-[20px]"></button>

   Notes
   ─────
   • Width/height = 1em → control size via font-size (or text-[N])
   • Color = currentColor → use text-* utilities
   • Streamline icons live at /icons/*.png (PNG mask)
   • Common UI glyphs not in the PNG set are inline SVG data URIs.
   ═══════════════════════════════════════════════════════════════ */

.tc-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
  vertical-align: -0.15em;
}

/* If on a button, kill button defaults that show through */
button.tc-icon {
  background-color: currentColor;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ── Streamline PNG mask icons (user-provided) ──────────── */
.tc-icon-add           { -webkit-mask-image: url("/icons/add.png"); mask-image: url("/icons/add.png"); }
.tc-icon-search        { -webkit-mask-image: url("/icons/search.png"); mask-image: url("/icons/search.png"); }
.tc-icon-cog           { -webkit-mask-image: url("/icons/cog.png"); mask-image: url("/icons/cog.png"); }
.tc-icon-cog-approved  { -webkit-mask-image: url("/icons/cog-approved.png"); mask-image: url("/icons/cog-approved.png"); }
.tc-icon-trash         { -webkit-mask-image: url("/icons/trash.png"); mask-image: url("/icons/trash.png"); }
.tc-icon-edit          { -webkit-mask-image: url("/icons/edit.png"); mask-image: url("/icons/edit.png"); }
.tc-icon-edit-check    { -webkit-mask-image: url("/icons/edit-check.png"); mask-image: url("/icons/edit-check.png"); }
.tc-icon-filter        { -webkit-mask-image: url("/icons/filter.png"); mask-image: url("/icons/filter.png"); }
.tc-icon-menu          { -webkit-mask-image: url("/icons/menu.png"); mask-image: url("/icons/menu.png"); }
.tc-icon-save          { -webkit-mask-image: url("/icons/save.png"); mask-image: url("/icons/save.png"); }
.tc-icon-eye-off       { -webkit-mask-image: url("/icons/eye-off.png"); mask-image: url("/icons/eye-off.png"); }
.tc-icon-pin           { -webkit-mask-image: url("/icons/pin.png"); mask-image: url("/icons/pin.png"); }
.tc-icon-bookmark      { -webkit-mask-image: url("/icons/bookmark.png"); mask-image: url("/icons/bookmark.png"); }
.tc-icon-bookmark-add  { -webkit-mask-image: url("/icons/bookmark-add.png"); mask-image: url("/icons/bookmark-add.png"); }
.tc-icon-chat-emoji    { -webkit-mask-image: url("/icons/chat-emoji.png"); mask-image: url("/icons/chat-emoji.png"); }
.tc-icon-chat-heart    { -webkit-mask-image: url("/icons/chat-heart.png"); mask-image: url("/icons/chat-heart.png"); }
.tc-icon-chat-translate{ -webkit-mask-image: url("/icons/chat-translate.png"); mask-image: url("/icons/chat-translate.png"); }
.tc-icon-speech        { -webkit-mask-image: url("/icons/speech.png"); mask-image: url("/icons/speech.png"); }
.tc-icon-bell          { -webkit-mask-image: url("/icons/bell.png"); mask-image: url("/icons/bell.png"); }
.tc-icon-bell-off      { -webkit-mask-image: url("/icons/bell-off.png"); mask-image: url("/icons/bell-off.png"); }
.tc-icon-megaphone     { -webkit-mask-image: url("/icons/megaphone.png"); mask-image: url("/icons/megaphone.png"); }
.tc-icon-support       { -webkit-mask-image: url("/icons/support.png"); mask-image: url("/icons/support.png"); }
.tc-icon-check-badge   { -webkit-mask-image: url("/icons/check-badge.png"); mask-image: url("/icons/check-badge.png"); }
.tc-icon-check-double  { -webkit-mask-image: url("/icons/check-double.png"); mask-image: url("/icons/check-double.png"); }
.tc-icon-checklist     { -webkit-mask-image: url("/icons/checklist.png"); mask-image: url("/icons/checklist.png"); }
.tc-icon-alert         { -webkit-mask-image: url("/icons/alert.png"); mask-image: url("/icons/alert.png"); }
.tc-icon-info          { -webkit-mask-image: url("/icons/info.png"); mask-image: url("/icons/info.png"); }
.tc-icon-stop          { -webkit-mask-image: url("/icons/stop.png"); mask-image: url("/icons/stop.png"); }
.tc-icon-chart         { -webkit-mask-image: url("/icons/chart.png"); mask-image: url("/icons/chart.png"); }
.tc-icon-chart-up      { -webkit-mask-image: url("/icons/chart-up.png"); mask-image: url("/icons/chart-up.png"); }
.tc-icon-chart-circle  { -webkit-mask-image: url("/icons/chart-circle.png"); mask-image: url("/icons/chart-circle.png"); }
.tc-icon-clock         { -webkit-mask-image: url("/icons/clock.png"); mask-image: url("/icons/clock.png"); }
.tc-icon-calendar      { -webkit-mask-image: url("/icons/calendar.png"); mask-image: url("/icons/calendar.png"); }
.tc-icon-sleep         { -webkit-mask-image: url("/icons/sleep.png"); mask-image: url("/icons/sleep.png"); }
.tc-icon-snooze        { -webkit-mask-image: url("/icons/snooze.png"); mask-image: url("/icons/snooze.png"); }
.tc-icon-ai-chip       { -webkit-mask-image: url("/icons/ai-chip.png"); mask-image: url("/icons/ai-chip.png"); }
.tc-icon-ai-spark      { -webkit-mask-image: url("/icons/ai-spark.png"); mask-image: url("/icons/ai-spark.png"); }
.tc-icon-ai-bot        { -webkit-mask-image: url("/icons/ai-bot.png"); mask-image: url("/icons/ai-bot.png"); }
.tc-icon-user          { -webkit-mask-image: url("/icons/user.png"); mask-image: url("/icons/user.png"); }
.tc-icon-user-signal   { -webkit-mask-image: url("/icons/user-signal.png"); mask-image: url("/icons/user-signal.png"); }
.tc-icon-inbox-help    { -webkit-mask-image: url("/icons/inbox-help.png"); mask-image: url("/icons/inbox-help.png"); }
.tc-icon-tools         { -webkit-mask-image: url("/icons/tools.png"); mask-image: url("/icons/tools.png"); }
.tc-icon-wrench        { -webkit-mask-image: url("/icons/wrench.png"); mask-image: url("/icons/wrench.png"); }
.tc-icon-attach        { -webkit-mask-image: url("/icons/attach.png"); mask-image: url("/icons/attach.png"); }
.tc-icon-image         { -webkit-mask-image: url("/icons/image.png"); mask-image: url("/icons/image.png"); }
.tc-icon-camera        { -webkit-mask-image: url("/icons/camera.png"); mask-image: url("/icons/camera.png"); }
.tc-icon-mail          { -webkit-mask-image: url("/icons/mail.png"); mask-image: url("/icons/mail.png"); }
.tc-icon-lock          { -webkit-mask-image: url("/icons/lock.png"); mask-image: url("/icons/lock.png"); }
.tc-icon-lock-open     { -webkit-mask-image: url("/icons/lock-open.png"); mask-image: url("/icons/lock-open.png"); }
.tc-icon-login         { -webkit-mask-image: url("/icons/login.png"); mask-image: url("/icons/login.png"); }
.tc-icon-share         { -webkit-mask-image: url("/icons/share.png"); mask-image: url("/icons/share.png"); }
.tc-icon-copy          { -webkit-mask-image: url("/icons/copy.png"); mask-image: url("/icons/copy.png"); }
.tc-icon-clip          { -webkit-mask-image: url("/icons/clip.png"); mask-image: url("/icons/clip.png"); }
.tc-icon-print         { -webkit-mask-image: url("/icons/print.png"); mask-image: url("/icons/print.png"); }
.tc-icon-note          { -webkit-mask-image: url("/icons/note.png"); mask-image: url("/icons/note.png"); }
.tc-icon-hierarchy     { -webkit-mask-image: url("/icons/hierarchy.png"); mask-image: url("/icons/hierarchy.png"); }
.tc-icon-flow          { -webkit-mask-image: url("/icons/flow.png"); mask-image: url("/icons/flow.png"); }
.tc-icon-branch        { -webkit-mask-image: url("/icons/branch.png"); mask-image: url("/icons/branch.png"); }
.tc-icon-refresh       { -webkit-mask-image: url("/icons/refresh.png"); mask-image: url("/icons/refresh.png"); }
.tc-icon-mood-happy    { -webkit-mask-image: url("/icons/mood-happy.png"); mask-image: url("/icons/mood-happy.png"); }
.tc-icon-mood-neutral  { -webkit-mask-image: url("/icons/mood-neutral.png"); mask-image: url("/icons/mood-neutral.png"); }
.tc-icon-mood-sad      { -webkit-mask-image: url("/icons/mood-sad.png"); mask-image: url("/icons/mood-sad.png"); }
.tc-icon-mic           { -webkit-mask-image: url("/icons/mic.png"); mask-image: url("/icons/mic.png"); }
.tc-icon-video         { -webkit-mask-image: url("/icons/video.png"); mask-image: url("/icons/video.png"); }
.tc-icon-check         { -webkit-mask-image: url("/icons/check.png"); mask-image: url("/icons/check.png"); }
.tc-icon-send          { -webkit-mask-image: url("/icons/send.png"); mask-image: url("/icons/send.png"); }
.tc-icon-phone         { -webkit-mask-image: url("/icons/phone.png"); mask-image: url("/icons/phone.png"); }
.tc-icon-phone-call    { -webkit-mask-image: url("/icons/phone-call.png"); mask-image: url("/icons/phone-call.png"); }
.tc-icon-chat          { -webkit-mask-image: url("/icons/chat.png"); mask-image: url("/icons/chat.png"); }
.tc-icon-chatting      { -webkit-mask-image: url("/icons/chatting.png"); mask-image: url("/icons/chatting.png"); }
.tc-icon-code          { -webkit-mask-image: url("/icons/code-terminal.png"); mask-image: url("/icons/code-terminal.png"); }
.tc-icon-bitcoin       { -webkit-mask-image: url("/icons/bitcoin.png"); mask-image: url("/icons/bitcoin.png"); }
.tc-icon-happy         { -webkit-mask-image: url("/icons/happy.png"); mask-image: url("/icons/happy.png"); }
.tc-icon-happiness     { -webkit-mask-image: url("/icons/happiness.png"); mask-image: url("/icons/happiness.png"); }
.tc-icon-sad-face      { -webkit-mask-image: url("/icons/sad-face.png"); mask-image: url("/icons/sad-face.png"); }
.tc-icon-increase      { -webkit-mask-image: url("/icons/increase.png"); mask-image: url("/icons/increase.png"); }
.tc-icon-arrow-right   { -webkit-mask-image: url("/icons/right-arrow.png"); mask-image: url("/icons/right-arrow.png"); }
.tc-icon-arrow-left    { -webkit-mask-image: url("/icons/left-arrow-rounded-outlined-button-interface-symbol.png"); mask-image: url("/icons/left-arrow-rounded-outlined-button-interface-symbol.png"); }
.tc-icon-paper-plane   { -webkit-mask-image: url("/icons/paper-plane.png"); mask-image: url("/icons/paper-plane.png"); }
.tc-icon-brand-line    { -webkit-mask-image: url("/icons/line.png"); mask-image: url("/icons/line.png"); }

/* ── Inline SVG data-URI fallbacks for common UI glyphs ─────
   Match Streamline weight (~1.5 stroke on 24px viewBox).
   ──────────────────────────────────────────────────────── */
.tc-icon-chevron-left  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>"); }
.tc-icon-chevron-right { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>"); }
.tc-icon-chevron-up    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 15l6-6 6 6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 15l6-6 6 6'/></svg>"); }
.tc-icon-chevron-down  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
.tc-icon-close         { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>"); }
.tc-icon-ellipsis      { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='5' cy='12' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='19' cy='12' r='1.8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='5' cy='12' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='19' cy='12' r='1.8'/></svg>"); }
.tc-icon-home          { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z'/></svg>"); }
.tc-icon-inbox         { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-6l-2 3h-4l-2-3H2'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-6l-2 3h-4l-2-3H2'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>"); }
.tc-icon-credit-card   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>"); }
.tc-icon-sparkle       { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1'/></svg>"); }
.tc-icon-globe         { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"); }
.tc-icon-team          { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }

/* ── Brand-colored icons (don't use mask; use as <img>) ──
   Full-color PNGs — render directly, e.g.
   <img src="/icons/facebook.png" width="20" height="20" alt=""/>
   Available: facebook.png, messenger.png, instagram.png, gmail.png,
   whatsapp.png, tik-tok.png, verified.png, verify.png, play.png,
   read.png, groups.png, communication.png, email.png, social-media.png */

/* ── Sizing helpers (optional — Tailwind text-[20px] also works) ── */
.tc-icon-12 { font-size: 12px; }
.tc-icon-14 { font-size: 14px; }
.tc-icon-16 { font-size: 16px; }
.tc-icon-18 { font-size: 18px; }
.tc-icon-20 { font-size: 20px; }
.tc-icon-22 { font-size: 22px; }
.tc-icon-24 { font-size: 24px; }
.tc-icon-28 { font-size: 28px; }
.tc-icon-32 { font-size: 32px; }
.tc-icon-40 { font-size: 40px; }
.tc-icon-48 { font-size: 48px; }