/* TradeNav interactive layer — period switcher, agent personality cards, killswitch, marquee */

/* Period buttons become clickable */
.tn-period{cursor:pointer;}
.tn-period > div{transition:all 200ms cubic-bezier(.2,.7,.2,1);cursor:pointer;}
.tn-period > div:hover:not(.on){color:#F0ECFF;background:rgba(255,255,255,.04);}
.tn-period > div.on{box-shadow:0 0 12px rgba(145,105,255,.45);}

/* Live status pulse */
.tn-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#30E0A1;box-shadow:0 0 8px #30E0A1;animation:tnpulse 1.6s infinite;}
@keyframes tnpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(1.2);}}

/* ───── AGENTS AS FEATURES ───── */
.tn-section-head{display:flex;justify-content:space-between;align-items:baseline;margin:14px 4px 6px;}
.tn-section-head .h{font-size:13px;font-weight:700;color:#F0ECFF;letter-spacing:-.2px;}
.tn-section-head .sub{font-size:9px;color:#5A5274;font-weight:500;font-family:"SF Mono",ui-monospace,monospace;letter-spacing:.5px;}

.tn-agents-v2{display:flex;flex-direction:column;gap:7px;}
.tn-agent-row{
  display:grid;grid-template-columns:34px 1fr auto;gap:10px;
  padding:10px 11px;border-radius:12px;background:#161228;border:1px solid #2A2444;
  cursor:pointer;transition:all 240ms cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden;
  align-items:center;
}
.tn-agent-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--agent-color, #9169FF);opacity:.85;
}
.tn-agent-row:hover{border-color:rgba(145,105,255,.5);transform:translateX(2px);}
.tn-agent-row.on{background:#1C1730;border-color:var(--agent-color,#9169FF);box-shadow:0 0 18px rgba(145,105,255,.18);}
.tn-agent-row.dimmed{opacity:.4;}

.tn-agent-glyph{
  width:34px;height:34px;border-radius:50%;
  background:var(--agent-color, #9169FF);
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-weight:700;font-size:18px;color:#0E0C1A;
  box-shadow:0 0 12px var(--agent-color, #9169FF);
}
.tn-agent-info{min-width:0;}
.tn-agent-id-row{display:flex;align-items:center;gap:8px;}
.tn-agent-name{font-size:12px;font-weight:700;color:#F0ECFF;letter-spacing:.5px;}
.tn-agent-llm{font-size:8px;font-weight:600;letter-spacing:.5px;padding:2px 5px;border-radius:3px;background:rgba(145,105,255,.14);color:#c4b5fd;text-transform:uppercase;}
.tn-agent-tagline{font-size:10px;color:#9B93B8;font-weight:500;margin-top:2px;line-height:1.3;}

.tn-agent-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.tn-agent-pl{font-family:"SF Mono",monospace;font-size:13px;font-weight:700;letter-spacing:-.2px;line-height:1;font-variant-numeric:tabular-nums;}
.tn-agent-pl.up{color:#30E0A1;}
.tn-agent-pl.dn{color:#FF4560;}
.tn-agent-status-pill{font-size:8px;font-weight:700;letter-spacing:.5px;padding:2px 6px;border-radius:3px;}
.tn-agent-status-pill.live{background:rgba(48,224,161,.14);color:#30E0A1;}
.tn-agent-status-pill.idle{background:#1C1730;color:#5A5274;}

/* Agent expanded detail */
.tn-agent-detail{
  grid-column:1/-1;
  margin-top:8px;padding-top:8px;
  border-top:1px dashed rgba(154,93,222,.22);
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  animation:tnfade 240ms cubic-bezier(.2,.7,.2,1);
}
@keyframes tnfade{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:translateY(0);}}
.tn-detail-cell{padding:6px 8px;background:rgba(2,6,23,.4);border-radius:6px;}
.tn-detail-cell .label{font-size:7.5px;letter-spacing:.8px;color:#5A5274;text-transform:uppercase;font-weight:600;}
.tn-detail-cell .value{font-size:11px;color:#F0ECFF;font-weight:600;margin-top:2px;line-height:1.3;}
.tn-detail-cell .value.mono{font-family:"SF Mono",monospace;}
.tn-detail-cell .value.profit{color:#30E0A1;}
.tn-detail-cell .value.loss{color:#FF4560;}

/* Sparkline (now smaller, decorative) */
.tn-mini-spark{position:absolute;right:74px;top:50%;transform:translateY(-50%);width:48px;height:14px;opacity:.35;pointer-events:none;}

/* ───── MARQUEE TICKER ───── */
.tn-ticker{
  margin-top:10px;padding:7px 10px;
  border:1px solid #2A2444;border-radius:9px;background:#161228;
  display:flex;align-items:center;gap:8px;overflow:hidden;position:relative;
}
.tn-ticker .mkt{font-size:8px;font-weight:700;letter-spacing:.8px;color:#5A5274;flex-shrink:0;}
.tn-ticker-marquee{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.tn-ticker-track{display:flex;gap:14px;animation:tnticker 18s linear infinite;width:max-content;}
.tn-ticker .pair{display:flex;gap:3px;align-items:baseline;white-space:nowrap;}
.tn-ticker .pair .k{font-size:8.5px;color:#9B93B8;font-weight:600;}
.tn-ticker .pair .v{font-family:"SF Mono",monospace;font-size:9px;font-weight:600;}
.tn-ticker .pair .v.up{color:#30E0A1;}
.tn-ticker .pair .v.dn{color:#FF4560;}
.tn-ticker .pair .v.neu{color:#F0ECFF;}
@keyframes tnticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ───── ACTION ROW (paper trade button + killswitch) ───── */
.tn-action-row{margin-top:10px;display:flex;gap:8px;align-items:stretch;}
.tn-paper-btn{
  flex:1;padding:10px 12px;border-radius:11px;
  background:linear-gradient(180deg,#9169FF,#6B3FD4);color:#fff;
  font-family:-apple-system,sans-serif;font-size:11px;font-weight:700;letter-spacing:.4px;
  border:none;cursor:pointer;transition:all 200ms cubic-bezier(.2,.7,.2,1);
  text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 4px 14px rgba(145,105,255,.35);
}
.tn-paper-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(145,105,255,.5);}
.tn-paper-btn:active{transform:translateY(0);}
.tn-paper-btn.firing{background:#30E0A1;color:#0E0C1A;}

.tn-killswitch{
  display:flex;align-items:center;gap:8px;padding:8px 11px;
  border:1px solid #2A2444;border-radius:11px;background:#161228;cursor:pointer;
  transition:all 200ms;
}
.tn-killswitch:hover{border-color:rgba(255,69,96,.4);}
.tn-kill-toggle{
  width:32px;height:18px;border-radius:9px;background:#221B3A;padding:2px;
  display:flex;align-items:center;transition:background 240ms;
}
.tn-kill-toggle .knob{width:14px;height:14px;border-radius:50%;background:#5A5274;transition:transform 240ms cubic-bezier(.34,1.56,.64,1);}
.tn-killswitch.on .tn-kill-toggle{background:rgba(255,69,96,.4);}
.tn-killswitch.on .tn-kill-toggle .knob{background:#FF4560;transform:translateX(14px);box-shadow:0 0 8px #FF4560;}
.tn-killswitch .label{font-size:8.5px;font-weight:700;color:#9B93B8;letter-spacing:.5px;text-transform:uppercase;}

/* When killswitch is on, dim agents */
.tn-screen.killed .tn-agent-row{opacity:.35;}
.tn-screen.killed .tn-paper-btn{opacity:.4;pointer-events:none;background:#5A5274;}
.tn-screen.killed .tn-agent-status-pill.live{background:rgba(255,69,96,.14);color:#FF4560;}

/* Hint tooltip */
.tn-hint{
  font-size:8px;letter-spacing:.6px;color:#5A5274;text-align:center;
  margin-top:8px;font-family:"SF Mono",ui-monospace,monospace;text-transform:uppercase;
}
.tn-hint kbd{padding:1px 4px;background:rgba(145,105,255,.14);border:1px solid rgba(145,105,255,.3);border-radius:3px;color:#c4b5fd;font-size:8px;}

/* Toast for paper trade response */
.tn-toast{
  position:absolute;bottom:14px;left:50%;transform:translate(-50%,20px);
  padding:8px 14px;border-radius:999px;background:#0E0C1A;border:1px solid #30E0A1;
  color:#30E0A1;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 14px rgba(48,224,161,.3);
  opacity:0;pointer-events:none;transition:all 300ms cubic-bezier(.2,.7,.2,1);
  z-index:10;font-family:"SF Mono",ui-monospace,monospace;
}
.tn-toast.show{opacity:1;transform:translate(-50%,0);}