/* ========== AGENTS PAGE — TAXONOMY-BASED REDESIGN ========== */

/* ---- Subtle animations ---- */
@keyframes float1 { 0%,100%{transform:translateY(0) rotate(var(--rot,0deg))} 50%{transform:translateY(-8px) rotate(var(--rot,0deg))} }
@keyframes float2 { 0%,100%{transform:translateY(0) rotate(var(--rot,0deg))} 50%{transform:translateY(-5px) rotate(var(--rot,0deg))} }

/* ---- Hero ---- */
.agents-hero { padding:140px var(--pad) 28px; }
.agents-hero__label { font-size:1.04vw; font-weight:500; opacity:.4; margin-bottom:14px; display:block; }
.agents-hero__title { font-size:4.5vw; font-weight:500; line-height:1.08; letter-spacing:-.03em; }
.agents-hero__title em { font-style:italic; font-weight:900; }

/* ---- Scroll ---- */
.agents-section { padding:36px 0 80px; }
.agents-scroll {
  display:flex; gap:28px; overflow-x:auto;
  padding:0 var(--pad) 28px; scrollbar-width:none; cursor:grab; user-select:none;
  scroll-padding:0 calc(50vw - 165px);
}
.agents-scroll::-webkit-scrollbar { display:none; }
.agents-scroll.is-dragging { cursor:grabbing; }
.agents-scroll::after  { content:''; flex:0 0 calc(50vw - 165px); }
.agents-scroll::before { content:''; flex:0 0 calc(50vw - 165px - var(--pad)); }

/* ---- Card ---- */
.agent-card { flex:0 0 330px; transition:transform .5s ease,opacity .5s ease; transform:scale(.92); opacity:.45; }
.agent-card.active { transform:scale(1); opacity:1; }
.agent-card__visual { width:100%; aspect-ratio:4/5; border-radius:22px; position:relative; overflow:hidden; margin-bottom:20px; --accent:#845ef7; }
.agent-card__name { font-size:1.35vw; font-weight:600; line-height:1.25; margin-bottom:10px; }
.agent-card__desc { font-size:.94vw; line-height:1.55; opacity:.5; }
.agent-cat {
  position:absolute; top:14px; right:14px; z-index:10;
  background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.45));
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.5);
  padding:4px 10px; border-radius:100px; font-size:.5rem; font-weight:600; color:rgba(0,0,0,.35);
  box-shadow:0 2px 8px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---- Gradients ---- */
.grad-peach    { background:radial-gradient(ellipse at 20% 0%,rgba(254,202,202,.5) 0%,transparent 55%),radial-gradient(ellipse at 85% 100%,rgba(254,215,170,.45) 0%,transparent 55%),radial-gradient(ellipse at 50% 60%,rgba(255,241,230,.4) 0%,transparent 70%),#fef7f2; }
.grad-mint     { background:radial-gradient(ellipse at 15% 10%,rgba(167,243,208,.45) 0%,transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(196,237,208,.4) 0%,transparent 55%),#f0faf4; }
.grad-sky      { background:radial-gradient(ellipse at 25% 5%,rgba(147,197,253,.45) 0%,transparent 55%),radial-gradient(ellipse at 80% 95%,rgba(199,210,254,.4) 0%,transparent 55%),#f0f4fe; }
.grad-lavender { background:radial-gradient(ellipse at 20% 10%,rgba(196,181,253,.45) 0%,transparent 55%),radial-gradient(ellipse at 80% 85%,rgba(245,208,254,.4) 0%,transparent 55%),#f5f3ff; }
.grad-sunset   { background:radial-gradient(ellipse at 25% 0%,rgba(253,224,71,.4) 0%,transparent 55%),radial-gradient(ellipse at 85% 100%,rgba(254,202,156,.45) 0%,transparent 55%),#fffbf0; }
.grad-rose     { background:radial-gradient(ellipse at 20% 5%,rgba(251,168,211,.45) 0%,transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(253,164,175,.4) 0%,transparent 55%),#fef2f8; }
.grad-sage     { background:radial-gradient(ellipse at 20% 10%,rgba(214,211,199,.5) 0%,transparent 55%),radial-gradient(ellipse at 80% 85%,rgba(196,181,159,.35) 0%,transparent 55%),#faf8f5; }
.grad-ocean    { background:radial-gradient(ellipse at 25% 0%,rgba(103,194,215,.4) 0%,transparent 55%),radial-gradient(ellipse at 80% 95%,rgba(147,197,253,.35) 0%,transparent 55%),#f0fafb; }

/* ---- Glass panel ---- */
.mock {
  position:absolute; border-radius:16px; padding:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.58));
  backdrop-filter:blur(32px) saturate(1.4); -webkit-backdrop-filter:blur(32px) saturate(1.4);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 12px 40px rgba(0,0,0,.06),
    0 2px 8px rgba(0,0,0,.03),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---- Heatmap / Calendar / Timeline base ---- */
.heatmap { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.hm { aspect-ratio:1; border-radius:3px; background:var(--accent); }
.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; }
.cal-hd { font-size:.4rem; color:rgba(0,0,0,.3); line-height:18px; }
.cal-day { height:18px; border-radius:4px; background:rgba(0,0,0,.04); }
.cal-day--on { background:var(--accent); opacity:.3; }
.cal-day--hi { background:var(--accent); opacity:.5; }
.timeline { display:flex; flex-direction:column; }
.tl-item { display:flex; align-items:flex-start; gap:8px; }
.tl-track { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:12px; }
.tl-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); opacity:.35; flex-shrink:0; }
.tl-dot--on { opacity:1; }
.tl-line { width:1.5px; height:18px; background:rgba(0,0,0,.08); }
.tl-body { padding-bottom:4px; }

/* ---- Typography ---- */
.t { line-height:1.35; }
.t-xs { font-size:.48rem; } .t-sm { font-size:.55rem; } .t-base { font-size:.62rem; }
.t-lg { font-size:.75rem; } .t-xl { font-size:.95rem; } .t-2xl { font-size:1.2rem; }
.t-b { font-weight:700; } .t-s { font-weight:600; }
.t-dim { color:rgba(0,0,0,.3); } .t-body { color:rgba(0,0,0,.5); } .t-dark { color:rgba(0,0,0,.65); }
.t-accent { color:var(--accent); } .t-red { color:#dc2626; } .t-green { color:#16a34a; } .t-orange { color:#ea580c; }

/* ---- Layout ---- */
.r { display:flex; align-items:center; gap:8px; }
.r+.r { margin-top:6px; }
.c { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.f1 { flex:1; } .g4 { gap:4px; }
.mt4 { margin-top:4px; } .mt6 { margin-top:6px; } .mt8 { margin-top:8px; }
.mb6 { margin-bottom:6px; } .mb8 { margin-bottom:8px; }
.tc { text-align:center; }
.dv { height:1px; background:rgba(0,0,0,.06); margin:8px 0; }

/* ---- Components ---- */
.bar { height:7px; border-radius:4px; background:rgba(0,0,0,.07); }
.bar+.bar { margin-top:5px; } .bar--s { width:60%; } .bar--a { background:var(--accent); opacity:.2; }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dot--g { background:#22c55e; } .dot--o { background:#f97316; } .dot--r { background:#ef4444; } .dot--x { background:rgba(0,0,0,.12); } .dot--a { background:var(--accent); }
.chk { width:16px; height:16px; border-radius:5px; background:#22c55e; flex-shrink:0; position:relative; }
.chk::after { content:''; position:absolute; top:3px; left:5px; width:4px; height:7px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.chk--e { background:transparent; border:1.5px solid rgba(0,0,0,.15); } .chk--e::after { display:none; }
.chk--o { background:#f97316; }
.tag { display:inline-block; padding:3px 9px; border-radius:100px; font-size:.5rem; font-weight:600; white-space:nowrap; }
.tag--g { background:rgba(34,197,94,.12); color:#15803d; } .tag--o { background:rgba(249,115,22,.1); color:#c2410c; }
.tag--r { background:rgba(239,68,68,.1); color:#b91c1c; } .tag--b { background:rgba(59,130,246,.1); color:#1d4ed8; }
.tag--a { background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); }
.tag--m { background:rgba(0,0,0,.05); color:rgba(0,0,0,.4); }
.av { width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,.08); flex-shrink:0; }
.av--s { width:20px; height:20px; } .av--a { background:var(--accent); opacity:.3; }
.ico { width:28px; height:28px; border-radius:8px; background:var(--accent); opacity:.18; flex-shrink:0; }
.ico--s { width:22px; height:22px; border-radius:6px; }
.prog { height:5px; border-radius:3px; background:rgba(0,0,0,.06); overflow:hidden; }
.prog__f { height:100%; border-radius:3px; background:var(--accent); opacity:.55; }
.bub { padding:8px 12px; border-radius:12px; font-size:.55rem; line-height:1.35; color:rgba(0,0,0,.5); max-width:88%; }
.bub--l {
  background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.38));
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.45);
  border-bottom-left-radius:4px;
  box-shadow:0 2px 10px rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.4);
}
.bub--r {
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,rgba(255,255,255,.5)),color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.3)));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.4));
  border-bottom-right-radius:4px; margin-left:auto;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.stat { font-size:1.3rem; font-weight:800; line-height:1; color:var(--accent); }
.stat--s { font-size:.95rem; } .stat-l { font-size:.48rem; color:rgba(0,0,0,.3); margin-top:2px; }
.emo { font-size:1.6rem; line-height:1; } .emo--l { font-size:2.2rem; }
.agents-back { text-align:center; padding:50px var(--pad) 100px; }
.agents-back a { font-size:1.04vw; font-weight:500; opacity:.35; transition:opacity .3s; }
.agents-back a:hover { opacity:.7; }

/* ---- Responsive ---- */
@media (max-width:1024px) { .agent-card { flex:0 0 290px; } }
@media (max-width:768px) {
  .agents-hero { padding:120px var(--pad) 24px; }
  .agents-hero__label { font-size:3.5vw; } .agents-hero__title { font-size:8vw; }
  .agent-card { flex:0 0 260px; }
  .agent-card__name { font-size:4.5vw; } .agent-card__desc { font-size:3.5vw; }
}

/* =============================================
   BEHAVIOR ANIMATION SYSTEM
   ============================================= */

/* --- Keyframes --- */
@keyframes feedUp     { 0%{transform:translateY(0)} 100%{transform:translateY(-50%)} }
@keyframes beamDown   { 0%,5%{top:-5%} 80%{top:88%} 90%,100%{top:88%;opacity:0} }
@keyframes stampPop   { 0%{transform:scale(0) rotate(-10deg)} 65%{transform:scale(1.2) rotate(2deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes buildDrop  { 0%{transform:translateY(-18px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes typeReveal { 0%{width:0} 100%{width:100%} }
@keyframes blink      { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes flipY      { 0%,30%{transform:rotateY(0)} 50%,80%{transform:rotateY(180deg)} 100%{transform:rotateY(360deg)} }
@keyframes trackGrow  { 0%{transform:scaleY(0)} 100%{transform:scaleY(1)} }
@keyframes cellPop    { 0%{transform:scale(0)} 60%{transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes alertBurst { 0%{transform:scale(0);opacity:0} 60%{transform:scale(1.15);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes alertGlow  { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.35)} 100%{box-shadow:0 0 0 14px rgba(239,68,68,0)} }
@keyframes tabOpen    { 0%{transform:scale(.85) translateY(8px);opacity:0} 100%{transform:scale(1) translateY(0);opacity:1} }
@keyframes typingDot  { 0%,80%,100%{transform:translateY(0);opacity:.3} 40%{transform:translateY(-5px);opacity:.8} }
@keyframes lineGrowY  { 0%{transform:scaleY(0)} 100%{transform:scaleY(1)} }
@keyframes checkPop   { 0%{transform:scale(0) rotate(-20deg)} 60%{transform:scale(1.2) rotate(3deg)} 100%{transform:scale(1) rotate(0)} }

/* --- Initial hidden states (body.anim set by JS) --- */
body.anim .build-el   { transform:translateY(-18px); opacity:0; }
body.anim .type-line   { width:0; overflow:hidden; white-space:nowrap; }
body.anim .scan-flag   { transform:scale(0); }
body.anim .track-bar   { transform-origin:bottom; transform:scaleY(0); }
body.anim .track-mark  { transform:scale(0); }
body.anim .alert-pop   { transform:scale(0); opacity:0; }
body.anim .lookup-tab  { transform:scale(.85) translateY(8px); opacity:0; }
body.anim .tl-dot      { transform:scale(0); }
body.anim .tl-line     { transform:scaleY(0); transform-origin:top; }
body.anim .chk         { transform:scale(0); }
body.anim .cal-day--on,
body.anim .cal-day--hi { transform:scale(0); }
body.anim .hm          { transform:scale(0); }

/* ---- 1. Feed Scan ---- */
.feed-vp { position:absolute; inset:16px; overflow:hidden; border-radius:16px; }
.feed-track { will-change:transform; }
.agent-card.active .feed-track { animation:feedUp var(--dur,8s) linear infinite; }
.fi {
  padding:10px 14px; margin-bottom:8px; border-radius:10px;
  background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.45));
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 12px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.5);
  position:relative; display:flex; align-items:center; gap:8px;
}
.fi-stamp { position:absolute; right:10px; top:50%; transform:translateY(-50%) scale(0) rotate(-10deg); padding:3px 10px; border-radius:100px; font-size:.48rem; font-weight:700; white-space:nowrap; z-index:2; }
.fi-stamp--r { background:rgba(239,68,68,.12); color:#dc2626; }
.fi-stamp--g { background:rgba(34,197,94,.12); color:#16a34a; }
.fi-stamp--o { background:rgba(249,115,22,.12); color:#c2410c; }
.fi-stamp--b { background:rgba(37,99,235,.1); color:#1d4ed8; }
.agent-card.active .fi-stamp { animation:stampPop .45s ease-out forwards; animation-delay:var(--d,1s); }
.feed-scanline { position:absolute; left:0; right:0; top:42%; height:2px; z-index:5; pointer-events:none; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.25; }

/* ---- 2. Compose ---- */
.cursor { display:inline-block; width:2px; height:13px; background:var(--accent); vertical-align:middle; margin-left:2px; opacity:0; }
.agent-card.active .cursor { animation:blink .8s steps(1) infinite; }
.agent-card.active .type-line { animation:typeReveal 1.2s steps(18) forwards; animation-delay:var(--d,0s); }

/* ---- 3. Flip Card ---- */
.flip-stage { perspective:600px; }
.flip-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.agent-card.active .flip-inner { animation:flipY 3.5s ease-in-out infinite; }
.flip-face {
  position:absolute; inset:0; backface-visibility:hidden; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.6));
  backdrop-filter:blur(32px) saturate(1.4); -webkit-backdrop-filter:blur(32px) saturate(1.4);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 10px 36px rgba(0,0,0,.06),
    0 2px 8px rgba(0,0,0,.03),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.flip-face--back { transform:rotateY(180deg); }

/* ---- 4. Scan & Flag ---- */
.scan-beam { position:absolute; left:0; right:0; height:3px; z-index:3; pointer-events:none; top:-5%; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.5; }
.agent-card.active .scan-beam { animation:beamDown 3.5s ease-in-out infinite; }
.scan-row { padding:7px 0; position:relative; border-radius:4px; }
.agent-card.active .scan-flag { animation:stampPop .4s ease-out forwards; animation-delay:var(--d,1.5s); }

/* ---- 5. Build ---- */
.agent-card.active .build-el { animation:buildDrop .5s ease-out forwards; animation-delay:var(--d,0s); }

/* ---- 6. Track ---- */
.agent-card.active .track-bar { animation:trackGrow .6s ease-out forwards; animation-delay:var(--d,0s); }
.agent-card.active .track-mark { animation:cellPop .3s ease-out forwards; animation-delay:var(--d,0s); }
.agent-card.active .cal-day--on,
.agent-card.active .cal-day--hi { animation:cellPop .3s ease-out forwards; animation-delay:calc(var(--i,0)*50ms); }
.agent-card.active .hm { animation:cellPop .3s ease-out forwards; animation-delay:calc(var(--i,0)*40ms); }
.agent-card.active .tl-dot { animation:cellPop .4s ease-out forwards; animation-delay:calc(var(--i,0)*400ms); }
.agent-card.active .tl-line { animation:lineGrowY .3s ease-out forwards; animation-delay:calc(var(--i,0)*400ms + 150ms); }
.agent-card.active .chk { animation:checkPop .35s ease-out forwards; animation-delay:calc(var(--i,0)*250ms); }

/* ---- 7. Alert ---- */
.agent-card.active .alert-pop { animation:alertBurst .5s ease-out 2s forwards; }
.agent-card.active .alert-ring { animation:alertGlow 1s ease-out 2.3s infinite; }

/* ---- 9. Context Lookup ---- */
.agent-card.active .lookup-tab { animation:tabOpen .4s ease-out forwards; animation-delay:var(--d,0s); }

/* ---- Typing indicator ---- */
.typing { display:inline-flex; gap:4px; padding:8px 14px; background:rgba(0,0,0,.05); border-radius:12px 12px 12px 4px; }
.typing span { width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.3; animation:typingDot 1.4s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay:.2s; }
.typing span:nth-child(3) { animation-delay:.4s; }

/* ---- SVG (JS-controlled) ---- */
.svg-draw { transition:stroke-dashoffset 1.8s ease-out; }
.svg-fill { transition:opacity 1s ease-out 1s; }
.svg-ring { transition:stroke-dashoffset 2s ease-out; }

/* =============================================
   ENHANCEMENT: 5 PROACTIVE FEATURES
   ============================================= */

/* ---- 2. Breathing Pulse on Inactive Cards ---- */
@keyframes breathe { 0%,100%{opacity:.42} 50%{opacity:.52} }
body.anim .agent-card:not(.active) {
  animation:breathe 3s ease-in-out infinite;
}
body.anim .agent-card.active { animation:none; }

/* ---- 3. Push Notification Bubble ---- */
.push-notif {
  position:absolute; top:14px; left:14px; right:50px; z-index:10;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.68));
  backdrop-filter:blur(32px) saturate(1.5); -webkit-backdrop-filter:blur(32px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7); border-radius:14px;
  padding:10px 14px; display:flex; align-items:center; gap:8px;
  box-shadow:
    0 8px 28px rgba(0,0,0,.08),
    0 1px 4px rgba(0,0,0,.03),
    inset 0 1px 0 rgba(255,255,255,.7);
  transform:translateY(-20px); opacity:0;
}
.push-notif__icon {
  width:28px; height:28px; border-radius:8px; background:var(--accent); opacity:.2;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:.7rem;
}
.push-notif__text { flex:1; min-width:0; }
.agent-card.active .push-notif {
  animation:pushSlide .5s ease-out forwards;
  animation-delay:var(--push-d,.3s);
}
@keyframes pushSlide {
  0%{transform:translateY(-20px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

/* ---- 4. Accumulation Layer (feed bottom) ---- */
.feed-accum {
  position:absolute; bottom:0; left:0; right:0; z-index:6; pointer-events:none;
  display:flex; flex-direction:column-reverse;
}
.feed-accum__layer {
  height:4px; border-radius:2px; margin:1px 8px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
}
.agent-card.active .feed-accum__layer {
  animation:trackGrow .4s ease-out forwards;
  animation-delay:var(--d,0s);
  /* reuse trackGrow for scaleY, but we need scaleX here */
  animation-name:accumGrow;
}
@keyframes accumGrow { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }

/* ---- 5. Reasoning Chain ---- */
.reason-chain {
  position:absolute; bottom:70px; left:16px; right:16px; z-index:8;
  display:flex; align-items:center; gap:0;
}
.reason-step {
  display:flex; align-items:center; gap:0; opacity:0; transform:translateX(-5px);
}
.reason-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0;
}
.reason-label {
  font-size:.42rem; font-weight:600; color:var(--accent); white-space:nowrap; padding:0 4px;
}
.reason-line {
  width:12px; height:1.5px; background:var(--accent); opacity:.3; flex-shrink:0;
}
.agent-card.active .reason-step {
  animation:reasonIn .3s ease-out forwards;
  animation-delay:var(--d,0s);
}
@keyframes reasonIn { 0%{opacity:0;transform:translateX(-5px)} 100%{opacity:1;transform:translateX(0)} }