/* ══════════════════════════════════════════════════════════════════════════
   EVIE — the one thing worth interrupting for.

   A bot that stops itself has finished doing what it was told, and the person
   who set it is usually not looking at the tab. A line in a status bar is not
   enough for that; this is.

   It fires on exactly two outcomes and no others: the take profit was reached,
   or the stop loss was. Both are targets the user typed in — a run that ends
   any other way says so in the status line, as before.

   The colours are the trade colours, so the card agrees with the ledger it is
   summarising: green for the run that made money, red for the one that did
   not. They are declared here rather than borrowed, because the Eviematic Ai
   page loads no other stylesheet that carries them.
   ══════════════════════════════════════════════════════════════════════════ */

.tpop {
  --tpop-win:  #15a34a;
  --tpop-loss: #dc2626;

  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.tpop[hidden] { display: none; }

:root[data-theme="dark"] .tpop {
  --tpop-win:  #22c55e;
  --tpop-loss: #ef4444;
}

/* Whichever outcome this is, in one place: everything below paints from it. */
.tpop--win  { --tpop: var(--tpop-win); }
.tpop--loss { --tpop: var(--tpop-loss); }
.tpop--real { --tpop: #d92b36; }   /* no real account yet: Deriv's own red, as the header button */

/* The no-real-account card's second line and its three steps, numbered in the card's colour. */
.tpop-p--more { margin-top: 6px; }
/* Its words are longer than a result's: a little wider, and on a short screen the card scrolls
   inside itself so its buttons are always reachable. */
.tpop--real .tpop-p { max-width: 36ch; }
.tpop--real .tpop-card { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.tpop-steps {
  counter-reset: tpop; display: grid; gap: 9px; margin: 16px 0 0; padding: 13px 14px;
  list-style: none; text-align: left; background: var(--surface-2); border-radius: 12px;
}
.tpop-steps li { counter-increment: tpop; display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.tpop-steps li::before {
  content: counter(tpop); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--tpop) 14%, transparent); color: var(--tpop); font-size: 11.5px; font-weight: 700;
}

.tpop-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.tpop.is-in .tpop-back { opacity: 1; }

.tpop-card {
  position: relative;
  width: min(100%, 400px);
  padding: clamp(24px, 4vw, 30px);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  /* The one line of colour on the card's own edge: enough to say which of the
     two this is before a word of it is read. */
  border-top: 3px solid var(--tpop);
  border-radius: var(--radius, 16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1.2, 0.4, 1);
}
.tpop.is-in .tpop-card { opacity: 1; transform: none; }

/* The platform's own mark, ringed in the outcome's colour. */
.tpop-mark {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tpop) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tpop) 34%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .tpop-mark { background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-hi); }
}
.tpop-mark svg { display: block; border-radius: 9px; }

.tpop-k {
  margin: 16px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tpop);
}

.tpop-t {
  margin: 6px 0 0;
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.tpop-p {
  margin: 9px auto 0;
  max-width: 30ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* What the run actually did. Three figures, no more: this is a summary of a
   session, not a second copy of the ledger. */
.tpop-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding: 14px 10px;
  background: var(--surface-2);
  border-radius: 12px;
}
.tpop-fig { min-width: 0; }
.tpop-fig dt {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tpop-fig dd {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.tpop-fig--profit dd { color: var(--tpop); }

/* Two buttons when the card has somewhere to send them: the way out on top,
   and a plain dismissal under it. */
.tpop-actions { display: grid; gap: 8px; margin-top: 20px; }
.tpop-actions .tpop-go { margin-top: 0; }

.tpop-quit {
  width: 100%;
  padding: 11px 20px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.tpop-quit:hover { color: var(--ink); border-color: var(--tpop); }

/* The deposit button is a link, so it needs the button's own box. */
a.tpop-go { display: block; text-align: center; text-decoration: none; }

.tpop-go {
  width: 100%;
  margin-top: 20px;
  padding: 12px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: #fff;
  background: var(--tpop);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.12s ease;
}
.tpop-go:hover { filter: brightness(1.07); }
.tpop-go:active { transform: translateY(1px); }

@media (max-width: 380px) {
  .tpop { padding: 12px; }
  .tpop-figs { gap: 8px; padding: 12px 8px; }
  .tpop-fig dd { font-size: 14px; }
}

/* Somebody who asked for less movement gets the card without the movement. */
@media (prefers-reduced-motion: reduce) {
  .tpop-back, .tpop-card { transition: none; }
  .tpop-card { transform: none; }
}

/* What went wrong (risk.js mistakes): what the run did past the risk guide, as points, on the
   stop-loss and insufficient-balance cards, shown in full (the card grows to hold them, nothing
   scrolls inside it), then the note as a green tip. While they show, the mark sits smaller and
   the rest closer; on a short screen closer still, so all of the card shows at once. */
.tpop-why[hidden] { display: none; }
.tpop-why { margin: 12px 0 0; display: grid; gap: 8px; text-align: left; }
.tpop-why-box { padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--tpop) 30%, transparent); background: var(--surface-2); }
.tpop-why-h { margin: 0 0 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tpop); }
.tpop-why ul { margin: 0; padding: 0 0 0 15px; display: grid; gap: 4px; list-style: disc outside; }
.tpop-why li { display: list-item; font-size: 12.5px; line-height: 1.42; color: var(--ink); overflow-wrap: anywhere; }
.tpop-why li::marker { color: var(--tpop); }
.tpop-why-tip { --tip: var(--tpop-win); display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--tip) 34%, transparent); background: color-mix(in srgb, var(--tip) 9%, var(--surface-2)); }
.tpop-why-tip-i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--tip) 16%, transparent); color: var(--tip); }
.tpop-why-tip p { margin: 0; font-size: 11.5px; line-height: 1.42; font-weight: 600; color: var(--ink); }
.tpop-why-tip b { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tip); }
/* Never past the screen: on the very smallest the card itself can be moved (no bar shows). */
.tpop.has-why { padding: 12px; }
.tpop.has-why .tpop-card { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.tpop.has-why .tpop-card::-webkit-scrollbar { display: none; }
/* While the points show: the mark beside its kicker and title, the room going to the points. */
.tpop.has-why .tpop-card { display: grid; grid-template-columns: 1fr auto auto 1fr; column-gap: 12px; align-items: center; }
.tpop.has-why .tpop-card > * { grid-column: 1 / -1; }
.tpop.has-why .tpop-card > .tpop-mark { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.tpop.has-why .tpop-card > .tpop-k { grid-column: 3; grid-row: 1; margin: 0; text-align: left; align-self: end; }
.tpop.has-why .tpop-card > .tpop-t { grid-column: 3; grid-row: 2; margin: 0; text-align: left; align-self: start; }
.tpop.has-why .tpop-card { padding-top: 20px; padding-bottom: 20px; }
.tpop.has-why .tpop-mark { width: 42px; height: 42px; border-radius: 13px; }
.tpop.has-why .tpop-mark svg { width: 26px; height: 26px; }
.tpop.has-why .tpop-k { margin-top: 10px; }
.tpop.has-why .tpop-t { margin-top: 3px; font-size: 1.12rem; }
.tpop.has-why .tpop-p { margin-top: 5px; line-height: 1.45; max-width: none; }
.tpop.has-why .tpop-figs { margin-top: 10px; padding: 9px 10px; }
.tpop.has-why .tpop-fig dd { font-size: 14px; margin-top: 2px; }
.tpop.has-why .tpop-actions, .tpop.has-why .tpop-card > .tpop-go { margin-top: 12px; }
.tpop.has-why .tpop-actions { grid-template-columns: 1fr 1fr; }   /* side by side: the room goes to the points */
@media (max-width: 480px) { .tpop.has-why .tpop-t { font-size: 1rem; } }
@media (max-height: 680px) {
  .tpop.has-why .tpop-card { padding-top: 16px; padding-bottom: 14px; }
  .tpop-why { gap: 6px; margin-top: 8px; }
  .tpop-why-box, .tpop-why-tip { padding: 8px 10px; }
  .tpop-why-tip-i { width: 22px; height: 22px; }
  .tpop.has-why .tpop-mark { width: 36px; height: 36px; }
  .tpop.has-why .tpop-k { margin-top: 6px; }
  .tpop.has-why .tpop-figs { margin-top: 8px; padding: 7px 10px; }
  .tpop.has-why .tpop-actions, .tpop.has-why .tpop-card > .tpop-go { margin-top: 10px; }
}
@media (max-height: 600px) {
  .tpop-why li { font-size: 11.5px; line-height: 1.38; }
  .tpop-why-tip p { font-size: 11px; line-height: 1.38; }
}

/* A running bot's wait (alert.js wait): Deriv's rate limit, the line coming back, a contract
   update, the last trade settling. Three dots keep rising in turn in a soft pink glow, a light
   sweeps under the card, until it trades again. */
.bot-wait[hidden] { display: none; }
.bot-wait {
  --w: #ff3d87;
  position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px 14px 15px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--w) 30%, var(--line)); border-radius: 14px; text-align: left;
  background: linear-gradient(120deg, color-mix(in srgb, var(--w) 9%, var(--surface)), var(--surface) 75%);
  animation: bot-wait-in .35s ease-out both;
}
.bot-wait::after { content: ""; position: absolute; left: -40%; bottom: 0; width: 40%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--w), transparent); animation: bot-wait-sweep 1.8s ease-in-out infinite; }
.bot-wait-mark { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--w) 14%, transparent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--w) 40%, transparent); animation: bot-wait-glow 2s ease-out infinite; }
.bot-wait-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--w); animation: bot-wait-dot 1.2s ease-in-out infinite; }
.bot-wait-mark i:nth-child(2) { animation-delay: .15s; }
.bot-wait-mark i:nth-child(3) { animation-delay: .3s; }
.bot-wait-t { display: grid; gap: 2px; min-width: 0; }
.bot-wait-t strong { font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.bot-wait-t span { font-size: 11.5px; line-height: 1.4; color: var(--ink-muted); }
@keyframes bot-wait-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-6px); opacity: 1; } }
@keyframes bot-wait-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--w) 40%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes bot-wait-sweep { from { left: -40%; } 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::after, .bot-wait-mark, .bot-wait-mark i { animation-duration: 4s; } }