/* ARK Bot Icons - Font Awesome Subset with Fallbacks */

/* Font Awesome Web Font (Essential icons only) */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2') format('woff2');
}

/* Base Font Awesome Classes */
.fa, .fas, .fa-solid {
  font-family: 'Font Awesome 6 Free', sans-serif;
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Essential Icons for ARK Bot */
.fa-paper-plane:before { content: "\f1d8"; }
.fa-xmark:before, .fa-close:before, .fa-times:before { content: "\f00d"; }
.fa-download:before { content: "\f019"; }
.fa-paperclip:before { content: "\f0c6"; }
.fa-copy:before { content: "\f0c5"; }

/* CSS-only fallbacks when Font Awesome fails to load */
.ark-bot-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
  font-style: normal;
  font-weight: bold;
  line-height: 1;
}

/* Fallback icons using Unicode characters */
.ark-bot-icon-send::before {
  content: "▶";
  transform: rotate(-45deg);
  display: inline-block;
}

.ark-bot-icon-close::before {
  content: "✕";
}

.ark-bot-icon-download::before {
  content: "⬇";
}

.ark-bot-icon-copy::before {
  content: "⧉";
}

.ark-bot-icon-attach::before {
  content: "📎";
}

/* SVG Icons as Data URIs (Most reliable fallback) */
.ark-bot-icon-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ark-bot-icon-send-svg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E");
}

.ark-bot-icon-close-svg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
}

.ark-bot-icon-download-svg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
}

.ark-bot-icon-copy-svg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E");
}

/* Smart Icon Detection and Fallback System */
.ark-bot-smart-icon {
  position: relative;
}

/* Hide fallback when Font Awesome loads successfully */
.fa-loaded .ark-bot-icon,
.fa-loaded .ark-bot-icon-svg {
  display: none;
}

/* Show fallback when Font Awesome fails */
.fa-failed .fa,
.fa-failed .fas,
.fa-failed .fa-solid {
  display: none;
}

/* Animation for loading detection */
@keyframes fa-test {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Test element for Font Awesome detection */
.fa-test {
  font-family: 'Font Awesome 6 Free';
  position: absolute;
  left: -9999px;
  animation: fa-test 0.1s;
}

/* Improved icon spacing and alignment */
.lwh-open-cbot .ark-bot-smart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  position: relative;
}

/* Ensure only one icon type shows at a time */
.lwh-open-cbot .ark-bot-smart-icon > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Priority order: Font Awesome > Unicode > SVG */
.lwh-open-cbot .ark-bot-smart-icon .fa {
  z-index: 3;
}

.lwh-open-cbot .ark-bot-smart-icon .ark-bot-icon {
  z-index: 2;
}

.lwh-open-cbot .ark-bot-smart-icon .ark-bot-icon-svg {
  z-index: 1;
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
  .ark-bot-icon-svg {
    filter: brightness(0.8);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .ark-bot-icon,
  .ark-bot-icon-svg {
    filter: contrast(1.5);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .fa-test {
    animation: none;
  }
}