/* Meta AI: DM threads, the order page, the "Ordered" card on the Reel. Everything is under .ig and prefixed agent-. */
.ig {
  --agent-ai: linear-gradient(in oklab 135deg, #00C2FF 0%, #7A5CFF 50%, #FF4FA3 100%);
  --agent-bubble: #26292E;
  --agent-rule: #FFFFFF1A;
  --agent-red: #ED4956;
  --agent-green: #58C322;
}

/* type */
.ig .agent-name { font: 600 16px/19px var(--ig-text); }
.ig .agent-item { font: 600 14px/17px var(--ig-text); }
.ig .agent-strong { font: 600 13px/17px var(--ig-text); }
.ig .agent-price { font: 600 17px/22px var(--ig-display); }
.ig .agent-title { font: 600 15px/18px var(--ig-text); }
.ig .agent-nav-title { font: 600 17px/22px var(--ig-text); }
.ig .agent-small { font: 400 13px/18px var(--ig-text); }
.ig .agent-was { text-decoration: line-through 1px; text-underline-position: from-font; }

/* marks */
.ig .agent-ring { position: relative; flex-shrink: 0; border-radius: 50%; background: var(--agent-ai); }
.ig .agent-ring::after { content: ''; position: absolute; inset: var(--ring); border-radius: 50%; background: #000; }
.ig .agent-check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; }

/* thread chrome: header, composer */
.ig .agent-head { left: 0; top: 54px; width: 402px; height: 60px; gap: 10px; padding: 0 16px 0 8px; border-bottom: 1px solid var(--agent-rule); }
.ig .agent-composer { left: 0; top: 796px; width: 402px; height: 78px; display: flex; padding: 8px 12px 0; background: #000; }
.ig .agent-composer > .row { width: 378px; height: 44px; flex-shrink: 0; gap: 10px; padding: 0 6px; border-radius: 22px; background: var(--agent-bubble); }
.ig .agent-cam { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 16px; background: var(--ig-blue); }
.ig .agent-ph { font: 400 15px/18px var(--ig-text); color: var(--ig-muted); }
.ig .agent-sp { width: 4px; height: 4px; flex-shrink: 0; }

/* messages: bottom-aligned above the composer */
.ig .agent-msgs { left: 0; top: 114px; width: 402px; height: 682px; justify-content: flex-end; padding: 12px 16px 10px 12px; }
.ig .agent-time { justify-content: center; padding-bottom: 8px; font: 600 12px/15px var(--ig-text); color: var(--ig-muted); }
.ig .agent-me { justify-content: flex-end; align-items: stretch; }
.ig .agent-ai { align-items: flex-end; gap: 8px; }
.ig .agent-slot { width: 24px; height: 24px; flex-shrink: 0; }
.ig .agent-bubble { max-width: 270px; padding: 10px 14px; border-radius: 20px; background: var(--agent-bubble); font: 400 15px/20px var(--ig-text); }
.ig .agent-bubble.me { background: var(--ig-blue); }
.ig .agent-share { width: 248px; flex-shrink: 0; padding: 8px; border-radius: 16px; background: var(--agent-bubble); }
.ig .agent-card { width: 310px; flex-shrink: 0; gap: 12px; padding: 12px; border-radius: 18px; background: var(--agent-bubble); }
.ig .agent-rule { padding-top: 10px; border-top: 1px solid var(--agent-rule); }

/* the order page */
.ig .agent-nav { left: 0; top: 54px; width: 402px; height: 48px; justify-content: space-between; padding: 0 16px 0 8px; }
.ig .agent-order { left: 0; top: 102px; width: 402px; }
.ig .agent-sum { padding: 12px 16px 18px; border-bottom: 1px solid var(--agent-rule); }
.ig .agent-step { display: flex; gap: 14px; }
.ig .agent-step .rail { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 24px; flex-shrink: 0; }
.ig .agent-step .rail > i { flex: 1 1 0%; width: 2px; border-radius: 1px; background: linear-gradient(#fff, #fff) no-repeat 0 0 / 100% 0%, #FFFFFF2E; }
.ig .agent-step.done .rail > i { background-size: 100% 100%; }
/* as the order moves (agent.js, STAGES): a step's line fills down from its check, and the next step lights */
.ig .agent-step .rail > i { transition: background-size .4s cubic-bezier(.23, 1, .32, 1) .12s; }
.ig :is(.agent-step-title, .agent-step .t-meta, .agent-todo) { transition: color .2s, border-color .2s; }
.ig .agent-step .body { gap: 2px; padding-bottom: 22px; }
.ig .agent-step.last .body { padding-bottom: 4px; }
.ig .agent-step-title { font: 600 15px/20px var(--ig-text); }
.ig .agent-step.now .t-meta { color: var(--ig-soft); }
.ig .agent-step.next .agent-step-title { color: var(--ig-muted); }
.ig .agent-todo { width: 20px; height: 20px; flex-shrink: 0; border-radius: 10px; border: 2px solid #FFFFFF59; }
.ig .agent-todo.agent-now { border-color: #fff; }   /* the step the order is at */
.ig .agent-facts { padding: 24px 16px 0; }
.ig .agent-fact { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--agent-rule); font: 400 14px/18px var(--ig-text); }
.ig .agent-fact:last-child { border-bottom: 1px solid var(--agent-rule); }

/* taps */
/* the thread clips under the header as new messages push it up */
.ig .agent-msgs { overflow: clip; }
/* Meta AI typing */
.ig .agent-typing { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; }
.ig .agent-typing > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ig-muted); animation: agent-typing 1.2s ease-in-out infinite; }
.ig .agent-typing > i:nth-child(2) { animation-delay: .15s; }
.ig .agent-typing > i:nth-child(3) { animation-delay: .3s; }
@keyframes agent-typing { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
@keyframes agent-typing-fade { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ig .agent-typing > i { animation-name: agent-typing-fade; } }
/* the composer, typing: Send takes the place of the mic and gallery */
.ig .agent-in { height: 20px; margin: 0; padding: 0; border: 0; outline: 0; background: none; color: #fff; caret-color: var(--ig-blue);
  user-select: text; -webkit-user-select: text; cursor: text !important; }
.ig .agent-in::placeholder { color: var(--ig-muted); opacity: 1; }
.ig .agent-send { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 16px; background: var(--ig-blue); }
.ig .agent-composer .has-text > :is(svg, .agent-sp) { display: none; }
.ig .agent-composer .has-text > .agent-send { display: flex; }
/* a cancelled order's item */
.ig .agent-gone { opacity: .5; }
/* sheets: the cancel confirm, Change color, the menus */
.ig .agent-ask { gap: 10px; padding: 6px 16px 0; }
.ig .agent-menu { padding: 0 16px; }
.ig .agent-act { display: flex; align-items: center; height: 52px; border-bottom: 1px solid var(--agent-rule); font: 400 16px/20px var(--ig-text); }
.ig .agent-act:last-child { border-bottom: 0; color: var(--ig-muted); }
/* press feedback */
.device .scr:not(.out) .ig :is(.agent-share, .agent-sum, .agent-act, .agent-send, .agent-cam, .agent-head > .col, .agent-card .row:has(> .ph)) { transition: opacity .12s; }
.device .scr:not(.out) .ig :is(.agent-share, .agent-sum, .agent-act, .agent-send, .agent-cam, .agent-head > .col, .agent-card .row:has(> .ph)):active { opacity: .6; transition: none; }

/* 3.1 A's finger (agent.js press): the tap marker (kit.css .ig-tap), pressing Buy once for the viewer, its ring leaving it */
.ig .agent-finger { width: 44px; height: 44px; border-radius: 22px; background: #FFFFFF40; border: 2px solid #FFFFFFCC; z-index: 9; pointer-events: none; }
.ig .agent-finger > i { position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #FFFFFFCC; opacity: 0; }