/* The live example answer (api/agentdemo.py), on / and /connect. Literal
   colours so it reads the same under landing.css and styles.css. */
.ad-card { position: relative; border: 1px solid #2a3037; border-radius: 18px; padding: 18px 20px; color: #e8eaed;
  background: linear-gradient(180deg, #0d1014, #090b0e); font: 14.5px/1.5 Archivo, system-ui, sans-serif; min-width: 0;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(198,242,78,.05), 0 0 70px rgba(198,242,78,.07); }
.ad-lbl { display: flex; align-items: center; font: 600 11.5px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #8fd4a0; margin: 0 0 12px; }
.ad-dot { width: 7px; height: 7px; border-radius: 50%; background: #c6f24e; margin-right: 9px; box-shadow: 0 0 8px #c6f24e; }
.ad-who { display: inline-block; font: 700 11px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #0b0c0f;
  background: #b4bbc2; border-radius: 5px; padding: 2px 6px; margin-right: 8px; vertical-align: 1px; }
.ad-q { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); font-weight: 600; }
.ad-a .ad-who { background: #c6f24e; }
.ad-a { padding: 10px 12px; border-radius: 10px; border: 1px solid #1d2126; }
.ad-lead { display: inline; margin: 0; color: #b4bbc2; }
.ad-rows { list-style: none; margin: 10px 0 0; padding: 0; }
.ad-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid #1d2126; }
.ad-n { font-weight: 700; overflow-wrap: anywhere; }
.ad-r { grid-column: 1; grid-row: 2; color: #a0a8b0; font-size: 13px; overflow-wrap: anywhere; }
.ad-v { grid-column: 2; grid-row: 1; font: 700 14px "JetBrains Mono", monospace; color: #c6f24e; text-align: right; }
.ad-d { grid-column: 2; grid-row: 2; font: 12px "JetBrains Mono", monospace; color: #a0a8b0; text-align: right; white-space: nowrap; }
.ad-src { grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 700 11.5px "JetBrains Mono", monospace; letter-spacing: .08em;
  color: #e8eaed; border: 1px solid #3a4149; border-radius: 6px; padding: 6px 8px; text-decoration: none; }
.ad-src { transition: border-color .2s, color .2s, background .2s, box-shadow .2s; }
.ad-src:hover { border-color: #c6f24e; color: #c6f24e; background: rgba(198,242,78,.08); box-shadow: 0 0 16px rgba(198,242,78,.25); }
/* web/agentfx.js: the typed question's caret and the agent's "thinking" dots;
   both exist only while the script plays the card */
.ad-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: #c6f24e; animation: adBlink .9s steps(1) infinite; }
@keyframes adBlink { 50% { opacity: 0; } }
.ad-think { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: 1px; }
.ad-think i { width: 6px; height: 6px; border-radius: 50%; background: #c6f24e; animation: adDot 1s ease-in-out infinite; }
.ad-think i:nth-child(2) { animation-delay: .15s; } .ad-think i:nth-child(3) { animation-delay: .3s; }
@keyframes adDot { 50% { opacity: .25; transform: translateY(-3px); } }
.ad-src:focus-visible { outline: 2px solid #c6f24e; outline-offset: 2px; }
.ad-note { margin: 10px 0 0; font-size: 12.5px; color: #a0a8b0; }
.cn-demo { margin: 0 0 18px; }
@media (max-width: 520px) {
  .ad-card { padding: 14px 12px; }
  .ad-a { padding: 10px; }
  .ad-n { overflow-wrap: normal; }
  .ad-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .ad-v { grid-column: 2; grid-row: 1; }
  .ad-r { grid-column: 1 / -1; grid-row: 2; }
  .ad-d { grid-column: 1; grid-row: 3; text-align: left; }
  .ad-src { grid-column: 2; grid-row: 3; align-self: center; justify-self: end; }
}
/* the card follows the pointer on a desktop (web/agentfx.js .tilt) */
.ad-card.tilt { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }