/**
 * Copyright (c) 2026 KDTech
 * Author: david@KDTech
 * All rights reserved.
 *
 * KDTechGroup website — Trading Bot card visual
 *
 * A compact trading terminal: a header with the pair, live price and the
 * bot's status, the chart drawn by trade-bot.js, a stats strip and an order
 * toast. The page ships a pre-rendered frame, so the chart shows without
 * JavaScript; the bot's face and scan beam are in visual-trading-bot.css.
 */

.v-bot {
  --up: #34d399;
  --dn: #fb7185;
  --fast: #22d3ee;
  --slow: #a78bfa;
  --entry: #fbbf24;

  position: relative;
  display: grid;
  gap: 8px;
  width: min(96%, 500px);
  padding: 12px 12px 10px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 16px;
  background:
    radial-gradient(120% 70% at 80% 0%, rgb(52 211 153 / 0.08), transparent 60%),
    linear-gradient(180deg, #0d0f16, #090a10);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / 0.05);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

/* ---------- Header ---------- */

.v-bot .bot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.v-bot .pair {
  color: var(--text-1);
  font-weight: 500;
}

.v-bot .pair em {
  margin-inline-start: 4px;
  color: var(--text-3);
  font-style: normal;
}

.v-bot .price {
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.v-bot [data-tone="up"] {
  color: var(--up);
}

.v-bot [data-tone="dn"] {
  color: var(--dn);
}

.v-bot .sim {
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--text-3);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.v-bot .bot-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  padding: 3px 9px;
  border: 1px solid rgb(52 211 153 / 0.35);
  border-radius: 999px;
  background: rgb(52 211 153 / 0.1);
  color: var(--up);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
}

.v-bot .bot-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 0 rgb(52 211 153 / 0.6);
  animation: bot-ping 1.6s ease-out infinite;
}

@keyframes bot-ping {
  70%,
  100% {
    box-shadow: 0 0 0 7px rgb(52 211 153 / 0);
  }
}

.v-bot .legend {
  display: flex;
  gap: 12px;
  font-size: 9.5px;
  color: var(--text-3);
}

.v-bot .legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  margin-inline-end: 5px;
  vertical-align: middle;
  border-radius: 2px;
  background: currentColor;
}

.v-bot .legend .f {
  color: var(--fast);
}

.v-bot .legend .s {
  color: var(--slow);
}

/* ---------- Chart ---------- */

.v-bot .bot-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-mono);
}

.bot-chart .grid {
  stroke: rgb(255 255 255 / 0.05);
  stroke-dasharray: 2 4;
}

.bot-chart .axis {
  fill: var(--text-3);
  font-size: 9px;
}

.bot-chart .area {
  fill: url(#bot-area);
}

.bot-chart .vol {
  opacity: 0.32;
}

.bot-chart .vol.up,
.bot-chart .candle.up {
  fill: var(--up);
  stroke: var(--up);
}

.bot-chart .vol.dn,
.bot-chart .candle.dn {
  fill: var(--dn);
  stroke: var(--dn);
}

.bot-chart .candle path {
  stroke-width: 1;
}

.bot-chart .candle rect {
  stroke: none;
}

.bot-chart .candle.new {
  transform-box: fill-box;
  transform-origin: center;
  animation: candle-in 0.35s var(--ease-out);
}

@keyframes candle-in {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }
}

.bot-chart .candle.live {
  filter: drop-shadow(0 0 4px currentColor);
}

.bot-chart .candle.live.up {
  color: var(--up);
}

.bot-chart .candle.live.dn {
  color: var(--dn);
}

.bot-chart .ma {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bot-chart .ma.fast {
  stroke: var(--fast);
  filter: drop-shadow(0 0 3px rgb(34 211 238 / 0.55));
}

.bot-chart .ma.slow {
  stroke: var(--slow);
  opacity: 0.85;
}

.bot-chart .band.win {
  fill: rgb(52 211 153 / 0.1);
}

.bot-chart .band.loss {
  fill: rgb(251 113 133 / 0.1);
}

.bot-chart .entry {
  stroke: var(--entry);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.bot-chart .entry-label {
  fill: var(--entry);
  font-size: 8.5px;
}

.bot-chart .mark text {
  fill: #08080d;
  font-size: 8px;
  font-weight: 700;
  text-anchor: middle;
}

.bot-chart .mark.buy path,
.bot-chart .mark.buy rect,
.bot-chart .mark.win path,
.bot-chart .mark.win rect {
  fill: var(--up);
}

.bot-chart .mark.loss path,
.bot-chart .mark.loss rect {
  fill: var(--dn);
}

.bot-chart .mark {
  filter: drop-shadow(0 0 6px rgb(0 0 0 / 0.6));
}

.bot-chart .last {
  stroke-width: 1;
  stroke-dasharray: 1 3;
}

.bot-chart .last.up,
.bot-chart .pulse.up {
  stroke: var(--up);
}

.bot-chart .last.dn,
.bot-chart .pulse.dn {
  stroke: var(--dn);
}

.bot-chart .tag.up rect,
.bot-chart .pulse.up {
  fill: var(--up);
}

.bot-chart .tag.dn rect,
.bot-chart .pulse.dn {
  fill: var(--dn);
}

.bot-chart .tag text {
  fill: #08080d;
  font-size: 9px;
  font-weight: 700;
}

.bot-chart .pulse {
  stroke-width: 6;
  stroke-opacity: 0.25;
}

/* ---------- Stats ---------- */

.v-bot .bot-stats {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 6px;
}

.v-bot .bot-stats > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.025);
}

.v-bot .bot-stats span {
  overflow: hidden;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v-bot .bot-stats b {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.v-bot .pnl-cell {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.v-bot .pnl-cell span,
.v-bot .pnl-cell b {
  grid-column: 1;
}

.v-bot .equity {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 60px;
  height: 20px;
  fill: none;
  stroke: var(--up);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* ---------- Order toast ---------- */

.v-bot .bot-toast {
  position: absolute;
  inset-block-start: 44px;
  inset-inline-start: 50%;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgb(14 14 21 / 0.92);
  backdrop-filter: blur(6px);
  color: var(--text-1);
  font-size: 10.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease-out);
}

[dir="rtl"] .v-bot .bot-toast {
  transform: translate(50%, -6px);
}

.v-bot .bot-toast::before {
  content: "⚡ ";
}

.v-bot .bot-toast[data-side="buy"],
.v-bot .bot-toast[data-side="win"] {
  border-color: rgb(52 211 153 / 0.5);
  box-shadow: 0 0 24px rgb(52 211 153 / 0.25);
}

.v-bot .bot-toast[data-side="loss"] {
  border-color: rgb(251 113 133 / 0.5);
  box-shadow: 0 0 24px rgb(251 113 133 / 0.25);
}

.v-bot .bot-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

[dir="rtl"] .v-bot .bot-toast.show {
  transform: translate(50%, 0);
}

/* ---------- Small screens and reduced motion ---------- */

@media (max-width: 520px) {
  .v-bot .legend {
    display: none;
  }

  .v-bot .bot-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-bot .bot-live i,
  .bot-chart .candle.new {
    animation: none;
  }
}