/*
 * SHALOBOT — the Smart Scan bot on /trading, and its popups.
 *
 * Wide screens: the bot is exactly one screen tall. Settings and the run sit
 * in a column on the left; on the right the live card (only while a run is
 * going) and the trades, which take every pixel left and scroll inside their
 * own card. Nothing on the page itself needs scrolling.
 * Narrow screens: one column, settings first, the trades card a fixed share
 * of the screen.
 * The page's own surfaces and hairlines throughout; Even is sky, Odd is
 * violet, a win is green, a loss red.
 */

.bot {
  width: 100%; max-width: 1720px; margin: 16px auto 0;
  font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --even: var(--code);
  --odd: var(--violet);
  --sb-thumb: color-mix(in srgb, var(--ink-muted) 38%, transparent);
  --sb-thumb-hi: color-mix(in srgb, var(--ink-muted) 65%, transparent);
}
.bot[hidden] { display: none; }
.bot [hidden] { display: none !important; }
.tmain:has(> .bot:not([hidden])) { padding-bottom: 16px; }

.bot-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; }
.bot-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.bot-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; }

.bot-card {
  padding: 18px; border: 1px solid var(--line-hi); border-radius: 18px;
  background: var(--raise); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.bot-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bot-card-h h2 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.bot-live { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* One screen tall, wherever there is the room for it. */
@media (min-width: 1001px) and (min-height: 560px) {
  .bot { height: calc(100dvh - 68px - 16px - 16px); }
  .bot-grid { height: 100%; }
  .bot-side { overflow-y: auto; overscroll-behavior: contain; }
  .bot-side::-webkit-scrollbar { width: 8px; }
  .bot-side::-webkit-scrollbar-track { background: transparent; }
  .bot-side::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; }
  .bot-side::-webkit-scrollbar-button { display: none; height: 0; }
  .bot-trades { flex: 1; }
}

/* ── settings ──────────────────────────────────────────────────────── */

/* The trade type: three tabs on the field's own surface. */
.bot-types {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px;
  border: 1px solid var(--line-hi); border-radius: 12px; background: var(--surface);
}
.bot-type {
  min-width: 0; min-height: 32px; padding: 5px 6px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-muted); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .01em;
  transition: background .15s ease, color .15s ease;
}
.bot-type:hover { color: var(--ink); }
.bot-type.is-on { background: var(--blue); color: var(--on-accent); }
.bot-type:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bot-type:disabled { opacity: .45; cursor: default; }
.bot-types.is-locked .bot-type.is-on { cursor: default; }

/* The watch, on each type: a small ring in the tab's corner, filled to the reading in its
   colour — green, amber, red (pulsing) — spinning while it is still reading, gone with no
   markets. It sits on a disc of the field's own surface, so it reads on the chosen tab too.
   bot.js sets data-watch and --watch (0–1) on the tab. */
/* The ring has the top corner to itself: the words start below it. */
.bot-type { position: relative; }
.bot-types .bot-type { padding-top: 10px; }
.bot-watch {
  --wc: var(--ink-faint);
  position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--surface) 0 1.4px, transparent 1.9px),
    conic-gradient(var(--wc) calc(var(--watch, 0) * 360deg), color-mix(in srgb, var(--ink-muted) 30%, transparent) 0);
  box-shadow: 0 0 0 1.5px var(--surface);
  transition: opacity .3s ease;
}
.bot-type[data-watch="green"] .bot-watch, .bot-type[data-watch="yellow"] .bot-watch, .bot-type[data-watch="red"] .bot-watch, .bot-type[data-watch="warm"] .bot-watch { opacity: 1; }
.bot-type[data-watch="green"] .bot-watch { --wc: var(--real); }
.bot-type[data-watch="yellow"] .bot-watch { --wc: var(--amber); }
.bot-type[data-watch="red"] .bot-watch { --wc: var(--danger); animation: shalo-watch-pulse 1.3s ease-in-out infinite; }
.bot-type[data-watch="warm"] .bot-watch { --wc: var(--ink-muted); --watch: .3 !important; animation: shalo-watch-spin 1s linear infinite; }
@keyframes shalo-watch-pulse { 50% { transform: scale(1.3); } }
@keyframes shalo-watch-spin { to { transform: rotate(1turn); } }
.bot-set h1 { margin: 10px 0 6px; font-size: 24px; letter-spacing: -0.025em; line-height: 1.15; }
.bot-lede { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.55; }

.bot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.bot-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.bot-in {
  display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 11px;
  border: 1px solid var(--line-hi); border-radius: 12px; background: var(--surface);
  transition: border-color .15s ease;
}
.bot-in:focus-within { border-color: var(--blue); }
.bot-in input {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bot-in input:disabled { color: var(--ink-muted); }
.bot-f--wide { grid-column: 1 / -1; }
.bot-in--select { position: relative; padding-right: 8px; }
.bot-in select {
  flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0 22px 0 0; border: 0; outline: 0;
  appearance: none; -webkit-appearance: none; background: transparent; color: var(--ink); cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bot-in select:disabled { color: var(--ink-muted); cursor: default; }
.bot-in select option { background: var(--raise); color: var(--ink); }
.bot-in--select svg { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.bot-in em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-muted); }
/* A dynamic Martingale (Differs, Over/Under 0–3): a word, not a figure to type. */
.bot-in.is-dynamic em { display: none; }
.bot-in.is-dynamic input { cursor: default; }
/* The figures' risk on this balance (bot.js paintRisk): a word beside Stake and Take profit —
   green Safe, amber High, red Too high — and, when one is not safe, a line on why with the
   safe figure. */
.bot-fh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px; min-width: 0; }
.bot-risk {
  --rc: var(--real);
  display: inline-flex; align-items: center; gap: 4px; padding: 0 7px 0 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--rc) 15%, transparent); color: var(--rc);
  font-size: 10.5px; font-weight: 800; line-height: 15px; letter-spacing: .02em; white-space: nowrap;
}
.bot-risk::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.bot-risk[data-risk="high"], .bot-risk-line[data-risk="high"] { --rc: var(--amber); }
.bot-risk[data-risk="over"], .bot-risk-line[data-risk="over"] { --rc: var(--danger); }
.bot-risk-note { display: grid; gap: 5px; margin: 10px 0 0; }
.bot-risk-line {
  --rc: var(--real);
  margin: 0; padding: 7px 10px 7px 11px; border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
  border-left: 3px solid var(--rc); border-radius: 10px; background: color-mix(in srgb, var(--rc) 7%, transparent);
  font-size: 12px; line-height: 1.45; color: var(--ink-muted);
}
.bot-risk-line b { color: var(--rc); font-weight: 700; }
/* The safe figure, a button: one click puts it in its field. Green — the safe choice. */
.bot-risk-use {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 1px; padding: 1px 8px 1px 6px; vertical-align: 1px;
  border: 1px solid color-mix(in srgb, var(--real) 45%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--real) 14%, transparent); color: var(--real);
  font: inherit; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.5; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.bot-risk-use:hover { background: color-mix(in srgb, var(--real) 24%, transparent); border-color: var(--real); }
.bot-risk-use:active { transform: translateY(1px); }
.bot-risk-use:focus-visible { outline: 2px solid var(--real); outline-offset: 2px; }
.bot-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 8px 2px 0; }
.bot-min { margin: 0; font-size: 12px; color: var(--ink-muted); }

/* "Save settings": a small switch beside the smallest-stake note. */
.bot-keep { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--ink-muted); cursor: pointer; user-select: none; -webkit-user-select: none; }
.bot-keep input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bot-keep i { position: relative; flex: none; width: 26px; height: 15px; border-radius: 999px; background: var(--line-hi); transition: background .18s ease; }
.bot-keep i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform .18s ease;
}
.bot-keep input:checked + i { background: var(--real); }
.bot-keep input:checked + i::after { transform: translateX(11px); }
.bot-keep input:checked ~ span, .bot-keep:hover span { color: var(--ink); }
.bot-keep input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Safe and Save settings, side by side at the note's end. */
.bot-toggles { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 14px; margin-left: auto; }
.bot-toggles .bot-keep { margin-left: 0; }

.bot-go { width: 100%; height: 50px; margin-top: 14px; gap: 9px; justify-content: center; border-radius: 13px; font-size: 16px; }
.bot-go .bot-go-stop { display: none; }
.bot-go.is-stop .bot-go-stop { display: block; }
.bot-go.is-stop .bot-go-play { display: none; }
.bot-go.is-real { background: var(--real); }
.bot-go.is-stop { background: var(--danger); color: #fff; }
.bot-go:disabled { opacity: .6; cursor: default; }
.bot-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 11px; font-size: 13.5px; line-height: 1.5; }
.bot-msg--bad { color: var(--danger); background: rgba(217, 45, 32, 0.10); border: 1px solid rgba(217, 45, 32, 0.28); }
.bot-msg--info { color: var(--ink); background: var(--real-tint); border: 1px solid color-mix(in srgb, var(--real) 35%, transparent); }

/* ── the run ───────────────────────────────────────────────────────── */

.bot-state { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-muted); line-height: 1.4; }
.bot-state i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-faint); }
.bot-state--run i { background: var(--ok); animation: bot-beat 1.6s ease-in-out infinite; }
.bot-state--run { color: var(--ink); }
.bot-state--wait i { background: var(--amber); }
.bot-state--won { color: var(--real); }
.bot-state--won i { background: var(--real); }
.bot-state--bad { color: var(--danger); }
.bot-state--bad i { background: var(--danger); }
@keyframes bot-beat { 0%, 100% { box-shadow: 0 0 0 0 var(--real-tint); } 50% { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); } }

.bot-pl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; }
.bot-pl > span { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.bot-pl-v { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bot-pl-v.is-up { color: var(--real); }
.bot-pl-v.is-down { color: var(--danger); }

.bot-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin: 12px 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); }
.bot-stats > div { grid-column: span 2; padding: 9px 11px; background: var(--raise); min-width: 0; }
.bot-stats > div:nth-child(n+4) { grid-column: span 3; }
.bot-stats dt { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-stats dd { margin: 3px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bot-risk { margin: 0 4px; font-size: 11.5px; color: var(--ink-muted); text-align: center; }

/* ── the live card ─────────────────────────────────────────────────── */

.bot-now { flex: none; animation: bot-rise .35s ease-out; }
.bot-now-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bot-now-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--real); }
.bot-now-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: bot-beat 1.6s ease-in-out infinite; }
.bot-now-b { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
.bot-now-t { min-width: 0; }
.bot-now-m { font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-now-side { margin-top: 2px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.bot-now-side--a { color: var(--even); }
.bot-now-side--b { color: var(--odd); }
.bot-now-p { flex: none; text-align: right; }
.bot-now-p b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.bot-now-p span { font-size: 12px; color: var(--ink-muted); }
.bot-now .bot-dots { margin-top: 12px; justify-content: flex-start; }
@keyframes bot-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bot-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.bot-dots i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  font-style: normal; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.bot-dots i.e { color: var(--even); background: color-mix(in srgb, var(--even) 15%, transparent); }
.bot-dots i.o { color: var(--odd); background: color-mix(in srgb, var(--odd) 15%, transparent); }
/* Over/Under and Matches/Differs: a digit that would have won the side wears
   the side's colour, one that would have lost is plain. */
.bot-dots i.w.t-a { color: var(--even); background: color-mix(in srgb, var(--even) 15%, transparent); }
.bot-dots i.w.t-b { color: var(--odd); background: color-mix(in srgb, var(--odd) 15%, transparent); }
.bot-dots i.x { color: var(--ink-faint); background: var(--surface-2); }

.b-chip { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.b-chip--a { color: var(--even); background: color-mix(in srgb, var(--even) 14%, transparent); }
.b-chip--b { color: var(--odd); background: color-mix(in srgb, var(--odd) 14%, transparent); }

/* ── the trades ────────────────────────────────────────────────────── */

.bot-trades { display: flex; flex-direction: column; min-height: 0; padding-bottom: 8px; container: trades / inline-size; }
.bot-log-head, .bot-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 70px minmax(0, 1fr) minmax(96px, 140px) 80px 84px 90px;
}
.bot-log-head {
  margin: 12px 0 0; padding: 0 calc(10px + var(--sb, 0px)) 8px 10px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--ink-muted); white-space: nowrap;
}
.bot-log-head span { overflow: hidden; text-overflow: ellipsis; }
.bot-log-head .r { text-align: right; }

/* The list scrolls inside the card: a slim rounded thumb on the card's own
   surface, inset from the edge, no arrows, brighter under the pointer. */
.bot-log-wrap {
  position: relative; flex: 1; min-height: 0; margin: 0 -6px 0 0; padding-right: 6px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
/* Firefox has no ::-webkit-scrollbar; it gets the standard thin bar. (Set
   for Chrome too, these would switch off the styling below.) */
@supports not selector(::-webkit-scrollbar) {
  .bot-log-wrap, .bot-side { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}
.bot-log-wrap::-webkit-scrollbar { width: 10px; }
.bot-log-wrap::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.bot-log-wrap::-webkit-scrollbar-thumb { background: var(--sb-thumb); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; min-height: 40px; }
.bot-log-wrap::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hi); }
.bot-log-wrap::-webkit-scrollbar-button { display: none; height: 0; }

.bot-log { margin: 0; padding: 0; list-style: none; }
.bot-row {
  padding: 9px 10px; border-bottom: 1px solid var(--line); border-radius: 0;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.bot-row:last-child { border-bottom: 0; }
.bot-row:hover { background: var(--surface-2); }
.bot-row { position: relative; }

/* Each trade wears a thin bar on its left in its result's colour. */
.bot-row::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--line-hi); transform-origin: center;
}
.bot-row.is-won::before { background: var(--real); }
.bot-row.is-lost::before { background: var(--danger); }

/* A new trade comes in fast from the right, hits the left edge a touch past
   it, and settles; at the hit its bar flares and a wash of its colour fades
   off to the right. */
.bot-row.is-new { animation: bot-row-in .66s both; }
@keyframes bot-row-in {
  0%   { transform: translateX(104%); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  12%  { opacity: 1; }
  52%  { transform: translateX(-9px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  70%  { transform: translateX(3px); }
  86%  { transform: translateX(-1px); }
  100% { transform: none; opacity: 1; }
}
.bot-row.is-new::before { animation: bot-row-bar .66s both; }
@keyframes bot-row-bar {
  0%, 48% { transform: scaleY(.35); opacity: .5; }
  56%     { transform: scaleY(1.3); opacity: 1; box-shadow: 0 0 10px 1px currentColor; }
  100%    { transform: none; opacity: 1; box-shadow: none; }
}
.bot-row.is-won.is-new::before { color: var(--real); }
.bot-row.is-lost.is-new::before { color: var(--danger); }
.bot-row.is-new::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, var(--real-tint), transparent 70%);
  animation: bot-row-wash .9s both;
}
.bot-row.is-lost.is-new::after { background: linear-gradient(90deg, rgba(217, 45, 32, 0.14), transparent 70%); }
@keyframes bot-row-wash { 0%, 48% { opacity: 0; } 56% { opacity: 1; } 100% { opacity: 0; } }
.br-t { color: var(--ink-muted); }
.br-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-s { min-width: 0; display: flex; }
.br-k { text-align: right; color: var(--ink-muted); }
.br-p, .br-c { text-align: right; font-weight: 700; white-space: nowrap; }
.bot-row.is-won .br-p { color: var(--real); }
.bot-row.is-lost .br-p { color: var(--danger); }

/* A wait the run is in (bot.js waitOf): Deriv's rate limit, a payout, the prices, the line,
   a check, Safe's pause. A radar keeps pulsing and a line sweeps under it until it trades again. */
.bot-wait[hidden] { display: none; }
.bot-wait {
  position: relative; display: flex; align-items: center; gap: 14px; margin: 8px 6px 4px; padding: 14px 16px 17px;
  border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line)); border-radius: 14px; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ok) 10%, var(--surface)), var(--surface) 70%);
  animation: bot-wait-in .35s ease-out both;
}
.bot-wait-orb { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; }
.bot-wait-orb i { position: absolute; inset: 0; border: 2px solid var(--ok); border-radius: 50%; opacity: 0; animation: bot-wait-ring 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.bot-wait-orb i:nth-child(2) { animation-delay: .8s; }
.bot-wait-orb i:nth-child(3) { animation-delay: 1.6s; }
.bot-wait-orb b { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 70%, transparent); animation: bot-wait-core 1.2s ease-in-out infinite alternate; }
.bot-wait-t { display: grid; gap: 3px; min-width: 0; text-align: left; }
.bot-wait-t strong { font-size: 13.5px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.bot-wait-t span { font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.bot-wait-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: color-mix(in srgb, var(--ok) 14%, transparent); }
.bot-wait-bar i { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--ok), transparent); animation: bot-wait-sweep 1.7s ease-in-out infinite; }
@keyframes bot-wait-ring { 0% { transform: scale(.32); opacity: .95; } 100% { transform: scale(1.22); opacity: 0; } }
@keyframes bot-wait-core { from { transform: scale(.82); } to { transform: scale(1.08); } }
@keyframes bot-wait-sweep { from { left: -38%; } to { left: 100%; } }
@keyframes bot-wait-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bot-wait-orb i, .bot-wait-orb b, .bot-wait-bar i { animation-duration: 4s; } }
.bot-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px; text-align: center; color: var(--ink-muted);
}
.bot-empty svg { width: 58px; height: 58px; padding: 14px; border-radius: 50%; background: var(--surface-2); color: var(--ink-faint); }
.bot-empty p { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.bot-empty span { max-width: 280px; font-size: 13px; line-height: 1.5; }

/* Deriv's cashier at the trades' foot, as small buttons on the card's own surfaces;
   on phones and tablets the MT5 button too (it leaves the header there, below). */
.bot-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.bot-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 4px 12px;
  border: 1px solid var(--line-hi); border-radius: 9px; background: var(--surface); color: var(--ink);
  font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.bot-link:hover { background: var(--surface-2); }
/* A tap shows the moment the finger lands, whatever the page is busy with: pressed in. */
.bot-link { touch-action: manipulation; }
.bot-link:active { transform: scale(0.97); background: var(--surface-2); transition-duration: 0s; }
.bot-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* The WhatsApp and Telegram channels: their full-colour logos, square, so they fit the row as it is. */
.bot-link--app { flex: none; width: 30px; padding: 0; }
.bot-link--app svg { width: 18px; height: 18px; }
/* Transfer funds: straight to the Deriv portfolio, where the move to Options is made. The
   sentence on why sits at the row's end (under it where there is no room). */
.bot-link--move { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.bot-link--move svg { flex: none; }
.bot-links-note { flex: 1 1 250px; align-self: center; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-muted); text-align: right; }
@media (min-width: 641px) { .bot-links-note { padding-right: 56px; } }   /* clear of the chat button at the corner */
@media (max-width: 640px) { .bot-links-note { flex-basis: 100%; font-size: 11px; text-align: left; } }
/* Deriv's cashier: on phones small, just below the header (the foot keeps the rest); bigger
   screens keep it at the foot of the trades (owner, Oct 18). */
.bot-links.bot-links--top { display: none; }
@media (max-width: 640px) {
  .bot-links.bot-links--top { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 0 10px; padding: 0; border: 0; }
  .bot-links.bot-links--top .bot-link { flex: 1 1 0; min-height: 0; padding: 6px 8px; font-size: 12px; }
  .bot-links:not(.bot-links--top) .bot-link--dep, .bot-links:not(.bot-links--top) .bot-link--move,
  .bot-links:not(.bot-links--top) a[href*="dashboard/withdraw"] { display: none; }
}
.bot-link svg { flex: none; }
.bot-link--dep { color: var(--real); border-color: color-mix(in srgb, var(--real) 45%, transparent); }
.bot-link--mt5 img { display: block; height: 13px; width: auto; }
.bot-link--mt5 .lt { display: none; }
:root[data-theme="light"] .bot-link--mt5 .dk { display: none; }
:root[data-theme="light"] .bot-link--mt5 .lt { display: block; }
.bot-link--mt5 { display: none; }   /* wide screens: it is in the header */

/* ── short wide screens: everything a little tighter so it still fits ── */

@media (min-width: 1001px) and (max-height: 860px) {
  .bot-card { padding: 15px 16px; }
  .bot-side { gap: 10px; }
  .bot-set h1 { margin: 8px 0 0; font-size: 21px; }
  .bot-lede { display: none; }
  .bot-fields { margin-top: 12px; gap: 8px; }
  .bot-in { height: 40px; }
  .bot-go { height: 44px; margin-top: 10px; }
  .bot-risk-note { margin-top: 8px; gap: 4px; }
  .bot-risk-line { padding: 5px 9px 5px 10px; }
  .bot-pl { margin-top: 8px; }
  .bot-pl-v { font-size: 26px; }
  .bot-stats { margin-top: 10px; }
  .bot-stats > div { padding: 7px 10px; }
}

/* ── one column ────────────────────────────────────────────────────── */

/* Shorter still (a 768-pixel laptop): the title goes, the tabs say it. */
@media (min-width: 1001px) and (max-height: 760px) {
  .bot-set h1 { display: none; }
  .bot-fields { margin-top: 10px; }
  .bot-f { gap: 4px; }
  .bot-in { height: 38px; }
  .bot-go { height: 42px; margin-top: 8px; }
  .bot-note { margin-top: 6px; }
  .bot-pl-v { font-size: 22px; }
  .bot-card { padding-top: 13px; padding-bottom: 13px; }
  .bot-pl { margin-top: 6px; }
  .bot-stats { margin-top: 8px; }
  .bot-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 6px 10px; }
  .bot-stats dd { font-size: 13.5px; margin: 0; }
}

/* The trades follow their own card's width. Narrower: the figures shrink
   before the market name goes. Narrower still: two-line rows. */
@container trades (max-width: 780px) {
  .bot-log-head, .bot-row { gap: 8px; grid-template-columns: 62px minmax(0, 1fr) minmax(88px, 120px) 66px 72px 76px; }
  .bot-row { font-size: 12.5px; }
}
@container trades (max-width: 600px) {
  .bot-log-head { display: none; }
  .bot-log-wrap { margin-top: 8px; }
  .bot-row { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 4px; font-size: 13px; }
  .br-m { grid-column: 1; grid-row: 1; font-weight: 600; }
  .br-p { grid-column: 2; grid-row: 1; }
  .br-t { grid-column: 1; grid-row: 2; font-size: 12px; }
  .br-c { grid-column: 2; grid-row: 2; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
  .br-s { grid-column: 1; grid-row: 3; justify-self: start; }
  .br-k { grid-column: 2; grid-row: 3; font-size: 12px; }
}

@media (max-width: 1000px) {
  .bot-grid { grid-template-columns: minmax(0, 1fr); }
  .bot-log-wrap { height: min(62vh, 560px); min-height: 280px; flex: none; }
  /* Phones and tablets: the MT5 button at the trades' foot, not the header; the cards
     closer together; the trades card a smaller share; room under it for the support button. */
  .tnav .tmt5 { display: none; }
  .bot-link--mt5 { display: inline-flex; }
  .bot-links .bot-link { flex: 1 1 0; }
  .bot-links .bot-link--app { flex: none; }
  .bot { margin-top: 10px; }
  .bot-grid, .bot-side, .bot-main { gap: 10px; }
  .bot-log-wrap { height: min(48vh, 440px); min-height: 220px; }
  .tmain:has(> .bot:not([hidden])) { padding-bottom: 84px; }
}
/* Phones: five in the row that held three, at its size — MT5 shows its mark, as the header
   does when it is tight; Deposit and Withdraw a little tighter around their words. */
@media (max-width: 440px) {
  .bot-links { gap: 5px; }
  .bot-links .bot-link--mt5 { flex: none; width: 30px; padding: 0; }
  .bot-link--mt5 img { width: 16px; height: 15px; object-fit: cover; object-position: left center; }
  .bot-links .bot-link:not(.bot-link--mt5):not(.bot-link--app) { padding: 4px 6px; gap: 4px; font-size: 11.5px; }
}
/* The narrowest phones: the same five, a little smaller still, so the row stays one line. */
@media (max-width: 359px) {
  .bot-links { gap: 4px; }
  .bot-links .bot-link--mt5, .bot-links .bot-link--app { width: 28px; }
  .bot-links .bot-link:not(.bot-link--mt5):not(.bot-link--app) { padding: 4px 4px; gap: 3px; font-size: 10.5px; }
  .bot-links .bot-link:not(.bot-link--mt5):not(.bot-link--app) svg { width: 11px; height: 11px; }
}
/* A finger on the trades must still move the page. `overscroll-behavior: contain` kept every
   swipe that started on the list inside it — with few trades, or the list at its end, the
   swipe moved nothing, and the page could only be scrolled from above or below the card. On
   phones, tablets and any touch screen the list now hands the swipe to the page at its ends
   (and passes it straight on when it has nothing to scroll); with a mouse on a wide screen it
   keeps it, as the one-screen layout wants. */
@media (max-width: 1000px), (pointer: coarse) {
  .bot-log-wrap { overscroll-behavior: auto; }
}
@media (max-width: 640px) {
  .bot { margin-top: 10px; }
  .bot-card { padding: 15px; border-radius: 16px; }
  /* Each tab as wide as its words need: the longest label takes two lines, not three. */
  .bot-types { grid-auto-columns: auto; }
  .bot-type { min-width: auto; padding: 5px 4px; }
  .bot-set h1 { margin: 10px 0 4px; font-size: 20px; }
  .bot-lede { font-size: 13px; line-height: 1.5; }
  .bot-fields { gap: 9px; margin-top: 14px; }
  .bot-in { height: 44px; }
  .bot-go { height: 48px; margin-top: 12px; }
  .bot-pl-v { font-size: 26px; }
  .bot-now-side { font-size: 22px; }
  .bot-now-p b { font-size: 26px; }
  .bot-dots i { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
}
@media (max-width: 380px) {
  .bot-card { padding: 12px; }
  .bot-type { font-size: 11.5px; }
  .bot-note { gap: 4px 10px; }
  .bot-min, .bot-keep { font-size: 11.5px; }
}

/* ══ the popups ═══════════════════════════════════════════════════════ */

.bm-root {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --even: var(--code);
  --odd: var(--violet);
}
.bm-root[hidden], .bm-view[hidden] { display: none; }
.bm-back { position: absolute; inset: 0; background: rgba(6, 8, 12, 0.58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: bm-fade .2s ease-out; }
.bm {
  position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 32px 24px 22px; border: 1px solid var(--line-hi); border-radius: 24px;
  background: var(--raise); color: var(--ink); text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: bm-pop .32s cubic-bezier(.2, .9, .3, 1.15);
  scrollbar-width: none;
}
.bm::-webkit-scrollbar { display: none; }
.bm-x {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-muted); cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.bm-x:hover { color: var(--ink); }
.bm-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bm h2 { margin: 16px 0 6px; font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.bm-step { margin: 0 auto; max-width: 330px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); min-height: 21px; }
.bm-actions { display: flex; gap: 10px; margin-top: 20px; }
.bm-actions .btn { flex: 1; justify-content: center; border-radius: 13px; padding-inline: 14px; }
.bm-actions .btn-line:hover { border-color: var(--ink-faint); background: var(--surface-2); }
@keyframes bm-fade { from { opacity: 0; } }
@keyframes bm-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* Scanning: a radar that pings outwards, then a bar that eases to 100%. */
.bm-radar {
  position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto;
  border-radius: 50%; color: var(--blue);
  background: radial-gradient(circle, var(--real-tint) 0 55%, transparent 56%);
}
.bm-radar i { position: absolute; inset: 0; border: 2px solid var(--blue); border-radius: 50%; opacity: 0; animation: bm-ping 2.1s cubic-bezier(.2, .6, .4, 1) infinite; }
.bm-radar i:nth-child(2) { animation-delay: .7s; }
.bm-radar i:nth-child(3) { animation-delay: 1.4s; }
.bm-radar svg { position: relative; animation: bm-look 2.4s ease-in-out infinite; }
@keyframes bm-ping { 0% { transform: scale(.45); opacity: .75; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes bm-look { 0%, 100% { transform: translate(-3px, -2px) rotate(-8deg); } 50% { transform: translate(3px, 2px) rotate(8deg); } }

.bm-bar { position: relative; height: 10px; margin: 22px 4px 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bm-bar i {
  position: relative; display: block; width: 0; height: 100%; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 70%, var(--code)), var(--blue));
  box-shadow: 0 0 14px color-mix(in srgb, var(--blue) 55%, transparent);
}
.bm-bar i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
  transform: translateX(-100%); animation: bm-shine 1.3s ease-in-out infinite;
}
@keyframes bm-shine { to { transform: translateX(100%); } }
.bm-pct { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Found: a green ring that draws itself, then the tick. */
.bm-tick { display: block; width: 80px; height: 80px; margin: 0 auto; overflow: visible; animation: bm-tickpop .5s .75s cubic-bezier(.2, .9, .3, 1.4) both; }
.bm-tick circle { fill: var(--real-tint); stroke: var(--real); stroke-width: 2.6; stroke-dasharray: 151; stroke-dashoffset: 151; transform: rotate(-90deg); transform-origin: center; animation: bm-draw .6s cubic-bezier(.65, 0, .45, 1) forwards; }
.bm-tick path { fill: none; stroke: var(--real); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: bm-draw .35s .55s cubic-bezier(.65, 0, .45, 1) forwards; }
@keyframes bm-draw { to { stroke-dashoffset: 0; } }
@keyframes bm-tickpop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

.bm-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 16px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2);
}
.bm-pick-m { font-size: 15px; font-weight: 700; color: var(--ink); }
.bm-pick-side { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.bm-pick-side--a { color: var(--even); }
.bm-pick-side--b { color: var(--odd); }
.bm-pick-s { font-size: 13px; color: var(--ink-muted); }
.bm-dots { justify-content: center; margin-top: 8px; }

.bm-live {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 15px; border-radius: 999px;
  background: var(--real-tint); color: var(--real); font-size: 14px; font-weight: 700;
}
.bm-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--real); animation: bot-beat 1.6s ease-in-out infinite; }
.bm-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 0; }
.bm-sum > div { min-width: 0; padding: 8px 4px; border-radius: 12px; background: var(--surface-2); }
.bm-sum dt { font-size: 11px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-sum dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bm-erricon {
  display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%;
  font-size: 34px; font-weight: 800; color: var(--danger); background: rgba(217, 45, 32, 0.12);
  animation: bm-shake .45s ease-in-out;
}
@keyframes bm-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* Take profit: confetti and a trophy. */
.bm-win { position: relative; }
.bm-confetti { position: absolute; inset: -32px -24px -22px; overflow: hidden; pointer-events: none; border-radius: 24px; }
.bm-confetti i {
  position: absolute; top: -14px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; opacity: 0;
  background: var(--c); animation: bm-fall var(--t, 2.6s) cubic-bezier(.25, .6, .45, 1) var(--d) 2 both;
}
.bm-confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
.bm-confetti i:nth-child(1)  { --x: 6%;  --c: #3ddc97; --d: 0s;   --r: 380deg; }
.bm-confetti i:nth-child(2)  { --x: 13%; --c: #ffb020; --d: .3s;  --r: -300deg; --t: 2.9s; }
.bm-confetti i:nth-child(3)  { --x: 19%; --c: #7dd3fc; --d: .9s;  --r: 260deg; }
.bm-confetti i:nth-child(4)  { --x: 25%; --c: #b794ff; --d: .15s; --r: -420deg; --t: 2.4s; }
.bm-confetti i:nth-child(5)  { --x: 31%; --c: #ff6a6a; --d: .6s;  --r: 340deg; }
.bm-confetti i:nth-child(6)  { --x: 37%; --c: #3ddc97; --d: 1.1s; --r: -280deg; --t: 3s; }
.bm-confetti i:nth-child(7)  { --x: 43%; --c: #ffb020; --d: .45s; --r: 400deg; }
.bm-confetti i:nth-child(8)  { --x: 49%; --c: #7dd3fc; --d: 0.05s; --r: -360deg; --t: 2.7s; }
.bm-confetti i:nth-child(9)  { --x: 55%; --c: #b794ff; --d: .75s; --r: 300deg; }
.bm-confetti i:nth-child(10) { --x: 61%; --c: #ff6a6a; --d: .25s; --r: -390deg; --t: 2.5s; }
.bm-confetti i:nth-child(11) { --x: 67%; --c: #3ddc97; --d: 1s;   --r: 320deg; }
.bm-confetti i:nth-child(12) { --x: 73%; --c: #ffb020; --d: .5s;  --r: -260deg; --t: 2.8s; }
.bm-confetti i:nth-child(13) { --x: 79%; --c: #7dd3fc; --d: .1s;  --r: 410deg; }
.bm-confetti i:nth-child(14) { --x: 85%; --c: #b794ff; --d: .85s; --r: -330deg; --t: 3.1s; }
.bm-confetti i:nth-child(15) { --x: 91%; --c: #ff6a6a; --d: .35s; --r: 290deg; }
.bm-confetti i:nth-child(16) { --x: 96%; --c: #3ddc97; --d: .65s; --r: -400deg; --t: 2.6s; }
.bm-confetti i:nth-child(17) { --x: 3%;  --c: #7dd3fc; --d: 1.25s; --r: 350deg; }
.bm-confetti i:nth-child(18) { --x: 52%; --c: #ffb020; --d: 1.4s; --r: -310deg; --t: 2.9s; }
@keyframes bm-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(18px, 460px, 0) rotate(var(--r)); }
}
.bm-trophy {
  position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%;
  color: #ffb020; background: rgba(255, 176, 32, 0.14); box-shadow: 0 0 0 10px rgba(255, 176, 32, 0.06);
  animation: bm-trophy .7s cubic-bezier(.2, .9, .3, 1.4) both;
}
@keyframes bm-trophy { 0% { transform: scale(.3) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bm-amount { margin-top: 14px; font-size: 38px; font-weight: 800; letter-spacing: -0.03em; color: var(--real); font-variant-numeric: tabular-nums; animation: bot-rise .5s .3s ease-out both; }
.bm-win-sum { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }

/* Stop loss and top-up: a calm badge, no celebration. */
.bm-badge {
  display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto; border-radius: 50%;
  animation: bm-badge .55s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes bm-badge { from { transform: scale(.4); opacity: 0; } }
.bm-badge--loss { color: var(--danger); background: rgba(217, 45, 32, 0.12); box-shadow: 0 0 0 10px rgba(217, 45, 32, 0.05); }
.bm-badge--fund { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--blue) 6%, transparent); }
.bm-amount--loss { color: var(--danger); }
.bm-fund-note { margin: 12px auto 0; max-width: 330px; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--amber); }
.bm-actions a.btn { text-decoration: none; }

/* The watch's reading in a popup: a half dial filled to the figure in its colour, a needle
   that swings to it as the popup opens, the figure below. */
@property --watch { syntax: "<number>"; inherits: true; initial-value: 0; }
.bm-watch {
  --wc: var(--ink-faint);
  display: grid; justify-items: center; gap: 4px; width: 132px; margin: 16px auto 0;
  transition: --watch .9s cubic-bezier(.2, .8, .2, 1);
  animation: shalo-dial-in 1.1s .15s cubic-bezier(.2, .8, .2, 1) backwards;
}
.bm-watch[data-watch="off"] { display: none; }
.bm-watch[data-watch="green"] { --wc: var(--real); }
.bm-watch[data-watch="yellow"] { --wc: var(--amber); }
.bm-watch[data-watch="red"] { --wc: var(--danger); }
.bm-watch[data-watch="warm"] { --wc: var(--ink-muted); }
.bm-dial { position: relative; width: 132px; height: 66px; overflow: hidden; }
.bm-dial::before {
  content: ""; position: absolute; left: 0; top: 0; width: 132px; height: 132px; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--wc) 0 calc(var(--watch) * 180deg), var(--surface-2) 0 180deg, transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 77%); mask: radial-gradient(closest-side, transparent 76%, #000 77%);
}
.bm-watch[data-watch="red"] .bm-dial::before { animation: shalo-dial-blink 1.4s 1.2s ease-in-out infinite; }
.bm-dial i {
  position: absolute; left: calc(50% - 1.5px); bottom: 0; width: 3px; height: 60px; border-radius: 3px; background: var(--ink);
  transform-origin: 50% 100%; transform: rotate(calc(var(--watch) * 180deg - 90deg));
}
.bm-dial i::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--ink); }
.bm-watch-pct { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--wc); font-variant-numeric: tabular-nums; }
@keyframes shalo-dial-in { from { --watch: 0; } }
@keyframes shalo-dial-blink { 50% { opacity: .45; } }

/* Opening a real account (trading.js): the badge in Deriv's red, the reason, the three steps,
   and the way there in a deep red that keeps its white words readable (4.8:1). */
.bm-badge--real { color: #ff6b74; background: rgba(255, 68, 79, 0.14); box-shadow: 0 0 0 10px rgba(255, 68, 79, 0.05); }
.bm-real-why { margin: 0 auto 6px; max-width: 340px; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.bm-real-steps { display: grid; gap: 7px; max-width: 330px; margin: 14px auto 0; padding: 0; list-style: none; counter-reset: step; text-align: left; }
.bm-real-steps li { display: flex; align-items: center; gap: 9px; counter-increment: step; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.bm-real-steps li::before {
  content: counter(step); display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 68, 79, 0.16); color: #ff6b74; font-size: 11px; font-weight: 800;
}
:root[data-theme="light"] .bm-badge--real, :root[data-theme="light"] .bm-real-steps li::before { color: #b4232c; }   /* readable on the light card */
.bm-actions--real { flex-direction: column; }
.bm-actions .btn.bm-real-go { gap: 8px; background: #d92b36; border-color: #d92b36; color: #fff; }
.bm-actions .btn.bm-real-go:hover { background: #d92b36; filter: brightness(1.07); }

@media (max-width: 420px) {
  .bm { padding: 28px 18px 18px; border-radius: 22px; }
  .bm-sum { grid-template-columns: repeat(2, 1fr); }
  .bm-pick-side { font-size: 30px; }
  .bm-actions .btn { padding-inline: 10px; font-size: 15px; }
  /* Ten digits on one line, always. */
  .bot-dots { flex-wrap: nowrap; gap: 4px; }
  .bot-dots i { width: 22px; height: 22px; border-radius: 6px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .bot-state--run i, .bot-now-k i, .bot-now, .bot-row.is-new, .bot-row.is-new::before, .bot-row.is-new::after,
  .bm, .bm-back, .bm-radar i, .bm-radar svg, .bm-bar i::after, .bm-erricon, .bm-trophy, .bm-badge, .bm-amount, .bm-tick,
  .bot-watch, .bm-watch, .bm-dial::before { animation: none; }
  .bm-tick circle, .bm-tick path { animation: none; stroke-dashoffset: 0; }
  .bm-confetti { display: none; }
}

/* What went wrong (bot.js mistakes): the run's figures past the risk guide, as points, inside
   the stop-loss and top-up popups, shown in full (the popup grows to hold them, nothing scrolls
   inside it), then the note as a green tip. While they show, the badge sits beside the title
   and the rest is set closer. */
.bm-why[hidden] { display: none; }
.bm-why { margin: 12px 0 0; display: grid; gap: 8px; text-align: left; }
.bm-why-box { padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent); background: var(--surface); }
.bm-why-h { margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--danger); }
.bm-why ul { margin: 0; padding: 0 0 0 15px; display: grid; gap: 4px; list-style: disc outside; }
.bm-why li { display: list-item; font-size: 12.5px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.bm-why li::marker { color: var(--danger); }
.bm-why-tip { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ok) 36%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.bm-why-tip-i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.bm-why-tip p { margin: 0; font-size: 12px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.bm-why-tip b { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ok); }
/* the compact card: badge beside the title, the rest closer */
#bmLoss.has-why, #bmFund.has-why { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; column-gap: 10px; }
#bmLoss.has-why > *, #bmFund.has-why > * { grid-column: 1 / -1; }
#bmLoss.has-why > .bm-badge, #bmFund.has-why > .bm-badge { grid-column: 2; width: 38px; height: 38px; margin: 0; box-shadow: none; }
#bmLoss.has-why > .bm-badge svg, #bmFund.has-why > .bm-badge svg { width: 20px; height: 20px; }
#bmLoss.has-why > h2, #bmFund.has-why > h2 { grid-column: 3; margin: 0; font-size: 19px; text-align: left; }
#bmLoss.has-why .bm-step, #bmFund.has-why .bm-step { margin-top: 8px; font-size: 13px; line-height: 1.45; min-height: 0; }
#bmLoss.has-why .bm-amount { margin-top: 6px; font-size: 28px; }
#bmLoss.has-why .bm-win-sum { font-size: 12px; }
#bmFund.has-why .bm-fund-note { margin-top: 8px; font-size: 12px; line-height: 1.4; }
#bmLoss.has-why .bm-actions, #bmFund.has-why .bm-actions { margin-top: 12px; }
.bm:has(> #bmLoss.has-why:not([hidden])), .bm:has(> #bmFund.has-why:not([hidden])) { padding-top: 24px; }
@media (max-width: 420px) {
  .bm-why-box, .bm-why-tip { padding: 9px 10px; }
  .bm-why li { font-size: 12px; }
  .bm-why-tip p { font-size: 11.5px; }
  #bmLoss.has-why > h2, #bmFund.has-why > h2 { font-size: 17px; }
}
/* A short screen: the popup with its points set closer still, so all of it shows at once. */
@media (max-height: 680px) {
  .bm:has(> #bmLoss.has-why:not([hidden])), .bm:has(> #bmFund.has-why:not([hidden])) { padding-top: 18px; padding-bottom: 14px; }
  .bm-why { margin-top: 8px; gap: 6px; }
  .bm-why-box, .bm-why-tip { padding: 8px 10px; }
  .bm-why-tip-i { width: 24px; height: 24px; }
  #bmLoss.has-why .bm-step, #bmFund.has-why .bm-step { margin-top: 6px; }
  #bmFund.has-why .bm-fund-note { margin-top: 6px; }
  #bmLoss.has-why .bm-actions, #bmFund.has-why .bm-actions { margin-top: 10px; }
}