/**
 * Copyright (c) 2026 KDTech
 * Author: david@KDTech
 * All rights reserved.
 *
 * KDTechGroup website — Trading Bot card: the bot itself
 *
 * What makes the bot visible on the chart card:
 *   - a scan beam sweeping across the chart, as if the bot is reading it
 *   - a small robot whose eyes blink and whose antenna glows; when it places
 *     an order (.is-acting, set by trade-bot.js) its eyes and mouth light up
 *   - the bot's reasoning line beside it
 * All of it is CSS on markup that ships in the page, so it shows without
 * JavaScript too. Reduced motion keeps it still.
 */

/* ---------- Scan beam over the chart ---------- */

.v-bot .chart-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.v-bot .bot-scan {
  position: absolute;
  inset-block: 0 48px; /* the price pane, not the volume bars */
  inset-inline-start: 0;
  width: 46px;
  background: linear-gradient(90deg, transparent, rgb(52 211 153 / 0.05) 75%, rgb(52 211 153 / 0.28) 97%, transparent);
  pointer-events: none;
  animation: bot-scan 4.5s linear infinite;
}

@keyframes bot-scan {
  from {
    transform: translateX(-80px);
  }
  to {
    transform: translateX(520px);
  }
}

[dir="rtl"] .v-bot .bot-scan {
  animation-direction: reverse;
}

/* ---------- The robot and its reasoning ---------- */

.v-bot .bot-brain {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgb(52 211 153 / 0.25);
  border-radius: 10px;
  background: linear-gradient(90deg, rgb(52 211 153 / 0.1), rgb(34 211 238 / 0.04));
}

.v-bot .bot-face {
  flex: none;
  width: 34px;
  height: 34px;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgb(52 211 153 / 0.45));
  animation: bot-bob 3s ease-in-out infinite;
}

.bot-face .head {
  fill: #12161f;
  stroke: #34d399;
  stroke-width: 1.5;
}

.bot-face .ear {
  fill: #34d399;
  opacity: 0.7;
}

.bot-face .antenna {
  stroke: #34d399;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.bot-face .bulb {
  fill: #22d3ee;
  animation: bot-bulb 1.6s ease-in-out infinite;
}

.bot-face .eyes {
  fill: #22d3ee;
  transform-box: fill-box;
  transform-origin: center;
  animation: bot-blink 4s infinite;
}

.bot-face .mouth {
  stroke: #34d399;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.7;
}

/* Placing an order: eyes go bright and wide, the mouth smiles. */
.v-bot.is-acting .bot-face .eyes {
  fill: #fbbf24;
  animation: none;
  transform: scaleY(1.15);
}

.v-bot.is-acting .bot-face .mouth {
  stroke: #fbbf24;
  opacity: 1;
  d: path("M12 20.5q4 3 8 0");
}

@keyframes bot-blink {
  0%,
  92%,
  100% {
    transform: none;
  }
  95% {
    transform: scaleY(0.1);
  }
}

@keyframes bot-bulb {
  50% {
    fill: #34d399;
    opacity: 0.5;
  }
}

@keyframes bot-bob {
  50% {
    transform: translateY(-2px);
  }
}

.v-bot .brain-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.v-bot .brain-text span {
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 9.5px;
}

.v-bot .brain-text b {
  overflow: hidden;
  color: #a7f3d0;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v-bot .brain-text b::after {
  content: "▍";
  margin-inline-start: 2px;
  color: #34d399;
  animation: bot-caret 1s steps(1) infinite;
}

@keyframes bot-caret {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-bot .bot-scan {
    display: none;
  }

  .v-bot .bot-face,
  .bot-face .bulb,
  .bot-face .eyes,
  .v-bot .brain-text b::after {
    animation: none;
  }
}