/* =========================================================
   Kudbee Quant — Trade Story widget
   A self-contained, animated "how we read a trade" centerpiece.
   Matches the site's design tokens (see assets/css/style.css).
   New file — does not touch any existing page.
   ========================================================= */

.trade-story {
  /* Local tokens (mirror the site, but self-contained so the widget
     works even if embedded before style.css loads). */
  --ts-bg:        #0a0e17;
  --ts-bg-2:      #0d1320;
  --ts-surface:   rgba(255, 255, 255, 0.04);
  --ts-surface-2: rgba(255, 255, 255, 0.06);
  --ts-border:    rgba(255, 255, 255, 0.09);
  --ts-border-2:  rgba(255, 255, 255, 0.14);
  --ts-honey:     #F5A623;
  --ts-honey-lt:  #FFD45E;
  --ts-mint:      #2DD4BF;
  --ts-text:      #EAF0FA;
  --ts-muted:     #9AA6BC;
  --ts-muted-2:   #6A7488;
  --ts-radius:    18px;
  --ts-radius-sm: 12px;
  --ts-ease:      cubic-bezier(.22, 1, .36, 1);
  --ts-font-head: 'Space Grotesk', system-ui, sans-serif;
  --ts-font-body: 'Inter', system-ui, sans-serif;
  --ts-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Agent accent colors */
  --ts-liquidity: #ff8a3c;
  --ts-pvsra:     #3ddc84;
  --ts-structure: #2DD4BF;
  --ts-reviewer:  #FFD45E;
  --ts-risk:      #8b9dff;

  position: relative;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  overflow: hidden;
  font-family: var(--ts-font-body);
  color: var(--ts-text);
  -webkit-font-smoothing: antialiased;
}

/* ----- Header strip ----- */
.ts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ts-border);
  position: relative;
  z-index: 4;
}
.ts-head__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ts-font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.ts-head__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ts-mint);
  box-shadow: 0 0 10px 1px var(--ts-mint);
  animation: ts-pulse 2.4s var(--ts-ease) infinite;
}
.ts-head__badge {
  font-family: var(--ts-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ts-honey-lt);
  background: rgba(245,166,35,.10);
  border: 1px solid rgba(245,166,35,.25);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
@keyframes ts-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.82); }
}

/* playback controls (step ◀ · play/pause · step ▶) */
.ts-head__right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ts-ctls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ts-ctl {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  border-radius: 8px;
  color: var(--ts-muted);
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  cursor: pointer;
  transition: color .2s var(--ts-ease), border-color .2s var(--ts-ease),
              background .2s var(--ts-ease);
}
.ts-ctl--step { width: 24px; height: 24px; }
.ts-ctl:hover { color: var(--ts-text); border-color: var(--ts-border-2); }
.ts-ctl:focus-visible { outline: 2px solid var(--ts-mint); outline-offset: 2px; }
.ts-ctl svg { fill: currentColor; display: block; }
.ts-ctl:disabled {
  opacity: .35;
  cursor: default;
  color: var(--ts-muted);
  border-color: var(--ts-border);
}

/* "explained →" link under the homepage card (page chrome, not the widget) */
.trade-story__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ts-mint);
  transition: color .2s var(--ts-ease), gap .2s var(--ts-ease);
}
.trade-story__more:hover { color: var(--ts-text); gap: 9px; }

/* ----- Stage (canvas + bubble layer) ----- */
.ts-stage {
  position: relative;
  width: 100%;
  /* height set responsively below */
  height: 420px;
}
.ts-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ----- Agent layer ----- */
.ts-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ----- Agent bubble ----- */
.ts-bubble {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 196px;
  max-width: 64%;
  padding: 10px 12px;
  background: linear-gradient(160deg, rgba(20,28,44,.92), rgba(13,19,32,.92));
  border: 1px solid var(--ts-border-2);
  border-left: 2px solid var(--ts-accent, var(--ts-honey));
  border-radius: var(--ts-radius-sm);
  box-shadow: 0 14px 36px -14px rgba(0,0,0,.75),
              0 0 22px -6px var(--ts-accent, var(--ts-honey));
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .55s var(--ts-ease), transform .55s var(--ts-ease);
  will-change: opacity, transform;
  --ts-accent: var(--ts-honey);
}
.ts-bubble.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ts-bubble.is-out {
  opacity: 0;
  transform: translateY(-8px) scale(.97);
}

.ts-bubble__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ts-bubble__avatar {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  font-size: 14px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ts-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ts-accent) 40%, transparent);
}
.ts-bubble__name {
  font-family: var(--ts-font-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--ts-text);
}
.ts-bubble__tag {
  margin-left: auto;
  font-family: var(--ts-font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ts-accent);
  opacity: .9;
}
.ts-bubble__note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ts-muted);
}
.ts-bubble__note strong { color: var(--ts-text); font-weight: 600; }

/* thinking dots */
.ts-think {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}
.ts-think span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ts-accent);
  opacity: .35;
  animation: ts-think 1.3s var(--ts-ease) infinite;
}
.ts-think span:nth-child(2) { animation-delay: .18s; }
.ts-think span:nth-child(3) { animation-delay: .36s; }
@keyframes ts-think {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* connector: a small dot + line pointing toward the candle/level */
.ts-bubble__pin {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ts-accent);
  box-shadow: 0 0 10px 1px var(--ts-accent);
  opacity: 0;
  transition: opacity .4s var(--ts-ease);
}
.ts-bubble.is-in .ts-bubble__pin { opacity: 1; }
.ts-bubble__line {
  position: absolute;
  height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--ts-accent) 70%, transparent);
  transform-origin: left center;
  opacity: 0;
  transition: opacity .4s var(--ts-ease);
}
.ts-bubble.is-in .ts-bubble__line { opacity: .8; }

/* accent variants */
.ts-bubble--liquidity { --ts-accent: var(--ts-liquidity); }
.ts-bubble--pvsra     { --ts-accent: var(--ts-pvsra); }
.ts-bubble--structure { --ts-accent: var(--ts-structure); }
.ts-bubble--reviewer  { --ts-accent: var(--ts-reviewer); }
.ts-bubble--risk      { --ts-accent: var(--ts-risk); }

/* +3R result tag */
.ts-result {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  font-family: var(--ts-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: #06281f;
  background: linear-gradient(135deg, var(--ts-mint), #5eead4);
  border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(45,212,191,.6);
  opacity: 0;
  transform: translateY(8px) scale(.95);
  transition: opacity .55s var(--ts-ease), transform .55s var(--ts-ease);
  white-space: nowrap;
}
.ts-result.is-in { opacity: 1; transform: translateY(0) scale(1); }
.ts-result__r { font-weight: 700; }
.ts-result__ill { font-family: var(--ts-font-body); font-size: 10px; opacity: .75; }

/* ----- Caption / a11y ----- */
.ts-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-top: 1px solid var(--ts-border);
  position: relative;
  z-index: 4;
}
.ts-foot__icon {
  flex: none;
  font-size: 13px;
  opacity: .8;
}
.ts-caption {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ts-muted-2);
}
.ts-caption strong { color: var(--ts-muted); font-weight: 600; }

.ts-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Responsive ----- */
@media (max-width: 720px) {
  .ts-stage { height: 360px; }
  .ts-bubble { width: 168px; padding: 9px 11px; }
  .ts-bubble__note { font-size: 11px; }
}
@media (max-width: 560px) {
  .trade-story { border-radius: 14px; }
  .ts-head { padding: 11px 14px; }
  .ts-head__title { font-size: 13px; }
  .ts-stage { height: 320px; }
  .ts-bubble {
    width: 148px;
    max-width: 72%;
    padding: 8px 10px;
  }
  .ts-bubble__name { font-size: 11.5px; }
  .ts-bubble__note { font-size: 10.5px; line-height: 1.4; }
  .ts-bubble__tag { display: none; }
  .ts-foot { padding: 10px 14px; }
  .ts-caption { font-size: 11px; }
}
@media (max-width: 380px) {
  .ts-stage { height: 300px; }
  .ts-bubble { width: 134px; }
}

/* ----- Setup chips (clickable scenario switch) ----- */
.ts-setups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 18px 2px;
  position: relative;
  z-index: 4;
}
.ts-chip {
  font-family: var(--ts-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ts-muted);
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color .25s var(--ts-ease), border-color .25s var(--ts-ease),
              background .25s var(--ts-ease);
}
.ts-chip:hover { color: var(--ts-text); border-color: var(--ts-border-2); }
.ts-chip:focus-visible { outline: 2px solid var(--ts-mint); outline-offset: 2px; }
.ts-chip.is-active {
  color: var(--ts-honey-lt);
  background: rgba(245,166,35,.10);
  border-color: rgba(245,166,35,.35);
}

/* ----- Main: chart stage + reasoning rail side by side ----- */
.ts-main {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.ts-stage {
  flex: 1 1 auto;
  min-width: 0;
}
.ts-rail {
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--ts-border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));
}
.ts-rail__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  font-family: var(--ts-font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-muted-2);
  border-bottom: 1px solid var(--ts-border);
}
.ts-rail__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ts-honey);
  box-shadow: 0 0 8px 1px var(--ts-honey);
}
.ts-rail__cursor {
  width: 7px; height: 13px;
  margin-left: 2px;
  background: var(--ts-honey-lt);
  opacity: .85;
  animation: ts-blink 1.1s steps(1) infinite;
}
@keyframes ts-blink { 0%, 50% { opacity: .85; } 50.01%, 100% { opacity: 0; } }
.ts-rail__feed {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: opacity .6s var(--ts-ease);
}
.ts-rail__feed.is-fading { opacity: 0; }

/* a streamed reasoning line */
.ts-think-row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ts-ease), transform .45s var(--ts-ease);
}
.ts-think-row.is-in { opacity: 1; transform: none; }
.ts-think-row__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}
.ts-think-row__time {
  font-family: var(--ts-font-mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  color: var(--ts-muted-2);
}
.ts-think-row__tag {
  font-family: var(--ts-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--ts-muted);
  background: var(--ts-surface-2);
  border: 1px solid var(--ts-border);
}
.ts-think-row__text {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ts-muted);
}
.ts-think-row__text strong { color: var(--ts-text); font-weight: 600; }

/* concept-tag accents */
.ts-tag--open       { color:#9AA6BC; border-color:rgba(154,166,188,.4); }
.ts-tag--drift,
.ts-tag--level      { color:#9AA6BC; border-color:rgba(154,166,188,.4); }
.ts-tag--session    { color:#8b9dff; border-color:rgba(139,157,255,.45); background:rgba(139,157,255,.08); }
.ts-tag--sweep      { color:#ff8a3c; border-color:rgba(255,138,60,.45); background:rgba(255,138,60,.08); }
.ts-tag--vector     { color:#3ddc84; border-color:rgba(61,220,132,.45); background:rgba(61,220,132,.08); }
.ts-tag--structure  { color:#2DD4BF; border-color:rgba(45,212,191,.45); background:rgba(45,212,191,.08); }
.ts-tag--confluence { color:#FFD45E; border-color:rgba(255,212,94,.45); background:rgba(255,212,94,.08); }
.ts-tag--backtest   { color:#c46bff; border-color:rgba(196,107,255,.45); background:rgba(196,107,255,.08); }
.ts-tag--risk       { color:#FFD45E; border-color:rgba(245,166,35,.45); background:rgba(245,166,35,.10); }
.ts-tag--result     { color:#5eead4; border-color:rgba(45,212,191,.5);  background:rgba(45,212,191,.10); }
.ts-tag--trend      { color:#8b9dff; border-color:rgba(139,157,255,.45); background:rgba(139,157,255,.08); }
.ts-tag--position   { color:#FFD45E; border-color:rgba(245,166,35,.45); background:rgba(245,166,35,.10); }

/* rail stacks below the chart on narrow screens */
@media (max-width: 720px) {
  .ts-main { flex-direction: column; }
  .ts-rail {
    flex: none;
    width: 100%;
    height: 172px;
    border-left: none;
    border-top: 1px solid var(--ts-border);
  }
  .ts-rail__feed { overflow-y: auto; }
}
@media (max-width: 560px) {
  .ts-setups { padding: 10px 14px 2px; }
  .ts-chip { font-size: 10.5px; padding: 4px 10px; }
  .ts-rail { height: 156px; }
  .ts-think-row__text { font-size: 11px; }
}

/* ----- Reduced motion: no animation, static composed frame ----- */
@media (prefers-reduced-motion: reduce) {
  .ts-head__dot { animation: none; }
  .ts-think span { animation: none; opacity: .7; }
  .ts-rail__cursor { animation: none; opacity: .6; }
  .ts-rail__feed { overflow-y: auto; }
  .ts-think-row { opacity: 1; transform: none; transition: none !important; }
  .ts-bubble,
  .ts-result,
  .ts-bubble__pin,
  .ts-bubble__line {
    transition: none !important;
  }
}