/*
 * Think Macro — AI Agents Page
 * page-agents.css
 *
 * Page-specific styles for /ai-agents/ only.
 * Shared components live in tm-styles.css.
 */

/* ── HERO WIDGET (orbital hub) ────────────────────────── */
.hero-widget { display:flex; align-items:center; justify-content:center; height:500px; position:relative; }
.hub-wrap { position:relative; width:220px; height:220px; display:flex; align-items:center; justify-content:center; }
.ring { position:absolute; border-radius:50%; border:1px solid; }
.ring-1 { inset:0; border-color:var(--teal-border); animation:spin 12s linear infinite; }
.ring-2 { inset:-32px; border-color:rgba(65,190,176,.07); }
.ring-3 { inset:-64px; border-color:rgba(65,190,176,.04); border-style:dashed; }
@keyframes spin { to{transform:rotate(360deg)} }
.orb { width:96px; height:96px; border-radius:50%; background:radial-gradient(circle at 38% 38%,#41BEB0,#006F87); display:flex; align-items:center; justify-content:center; position:relative; z-index:2; box-shadow:0 0 40px rgba(65,190,176,.45),0 0 80px rgba(65,190,176,.2); animation:orb-glow 3s ease-in-out infinite; }
@keyframes orb-glow { 0%,100%{box-shadow:0 0 40px rgba(65,190,176,.45),0 0 80px rgba(65,190,176,.2)} 50%{box-shadow:0 0 60px rgba(65,190,176,.65),0 0 120px rgba(65,190,176,.3)} }

.acard { position:absolute; background:rgba(10,18,30,.96); border:1px solid var(--teal-border); border-radius:12px; padding:10px 14px; display:flex; align-items:center; gap:10px; backdrop-filter:blur(8px); opacity:0; transform:translateY(10px); animation:card-in 7s ease-in-out infinite; min-width:210px; box-shadow:0 8px 32px rgba(0,0,0,.4); }
.acard-icon { width:30px; height:30px; border-radius:8px; background:var(--teal-glow); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.acard-body { flex:1; }
.acard-title { font-size:12px; font-weight:600; color:var(--white); }
.acard-meta { font-size:10px; color:var(--steel); }
.acard-pill { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--teal); background:rgba(65,190,176,.1); padding:2px 7px; border-radius:20px; white-space:nowrap; }
.acard-1{top:10px;right:-60px;animation-delay:0s}
.acard-2{top:90px;right:-80px;animation-delay:1.8s}
.acard-3{bottom:90px;right:-60px;animation-delay:3.6s}
.acard-4{top:60px;left:-90px;animation-delay:.9s}
.acard-5{bottom:50px;left:-70px;animation-delay:2.7s}
@keyframes card-in { 0%{opacity:0;transform:translateY(12px)} 8%{opacity:1;transform:translateY(0)} 72%{opacity:1;transform:translateY(0)} 88%{opacity:0;transform:translateY(-8px)} 100%{opacity:0;transform:translateY(-8px)} }

/* ── CHAT WIDGET ──────────────────────────────────────── */
.chat-widget { background:var(--navy-2); border:1px solid var(--teal-border); border-radius:20px; overflow:hidden; box-shadow:0 32px 96px rgba(0,0,0,.6), 0 0 0 1px rgba(65,190,176,.12), 0 0 80px rgba(65,190,176,.05); transition:box-shadow .3s, transform .3s; }
.chat-widget:hover { box-shadow:0 40px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(65,190,176,.2), 0 0 120px rgba(65,190,176,.09); transform:translateY(-3px); }
.chat-head { background:#080F1C; padding:13px 18px; border-bottom:1px solid var(--teal-border); display:flex; align-items:center; gap:9px; }
.chat-head-dot { width:8px; height:8px; border-radius:50%; background:var(--teal); animation:blink 2s infinite; }
.chat-head-title { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal); }
.chat-head-sub { font-size:10px; color:var(--steel); margin-left:auto; }
.chat-body { padding:18px; display:flex; flex-direction:column; gap:12px; min-height:280px; }
.cmsg { max-width:82%; }
.cmsg.user { align-self:flex-end; }
.cmsg.agent { align-self:flex-start; }
.cmsg-who { font-size:9px; font-weight:600; letter-spacing:.06em; margin-bottom:4px; text-transform:uppercase; }
.cmsg.user .cmsg-who { color:var(--steel); text-align:right; }
.cmsg.agent .cmsg-who { color:var(--teal); }
.cmsg-bubble { padding:11px 15px; border-radius:16px; font-size:13px; line-height:1.6; }
.cmsg.user .cmsg-bubble { background:rgba(58,66,82,.45); color:var(--mist); border-radius:16px 16px 4px 16px; }
.cmsg.agent .cmsg-bubble { background:rgba(65,190,176,.08); color:var(--white); border:1px solid var(--teal-border); border-radius:16px 16px 16px 4px; }
.cmsg { opacity:0; animation:msg-in .4s ease forwards; }
.cmsg:nth-child(1){animation-delay:.3s}
.cmsg:nth-child(2){animation-delay:1.4s}
.cmsg:nth-child(3){animation-delay:2.6s}
.cmsg:nth-child(4){animation-delay:3.6s}
@keyframes msg-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }