/* =========================================================
   Roiatek AI · showcase.css
   The three animated showpieces:
   1. Hero AI agent engine
   2. Reference architecture (racks, servers, data flows)
   3. Real estate chat agent
   ========================================================= */

.sec-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.sec-head--center .lede { margin-inline: auto; text-wrap: balance; }

/* =================== 1. HERO AGENT ENGINE =================== */
.engine {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 600;
}
.engine-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.engine-links .mesh {
  fill: none;
  stroke: rgba(140, 170, 255, 0.16);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}
.engine-links .link {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  opacity: 0.6;
  animation: dash-flow 1.6s linear infinite;
}
.enode { fill: var(--c); stroke: color-mix(in srgb, var(--c) 35%, transparent); stroke-width: 6; }
.enode--core { fill: #fff; stroke: rgba(255, 255, 255, 0.25); stroke-width: 5; }
.epulse { fill: #fff; stroke: var(--c); stroke-width: 4; stroke-opacity: 0.6; }
.epulse--back { fill: var(--c); stroke-opacity: 0.35; }
@keyframes dash-flow { to { stroke-dashoffset: -24; } }

/* Core: glass orb + rotating LED ring + slow orbit */
.engine-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(196 / 640 * 100%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.core-orbit,
.core-glow,
.core-ring { position: absolute; border-radius: 50%; }
.core-orbit {
  inset: 0;
  border: 1px dashed rgba(150, 180, 255, 0.35);
  animation: spin 40s linear infinite;
}
.core-orbit::before,
.core-orbit::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.core-orbit::before { top: -5px; left: calc(50% - 4.5px); background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.core-orbit::after { bottom: 12%; right: 4%; background: var(--magenta); box-shadow: 0 0 12px var(--magenta); }
.core-glow {
  inset: 12%;
  background: radial-gradient(circle, rgba(61, 139, 255, 0.35), transparent 70%);
  box-shadow: 0 0 60px rgba(34, 228, 245, 0.25), 0 0 110px rgba(140, 92, 255, 0.3);
}
.core-ring {
  inset: 11%;
  padding: 2px;
  background: conic-gradient(var(--cyan), var(--blue), var(--violet), var(--magenta), var(--amber), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 7s linear infinite;
}
.core-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0%, #a8f7ff 9%, #36b9ff 30%, #3f55dc 58%, #2b1b70 100%);
  box-shadow:
    inset -12px -16px 30px rgba(24, 0, 70, 0.65),
    inset 6px 8px 16px rgba(255, 255, 255, 0.35),
    0 0 36px rgba(61, 139, 255, 0.7);
  animation: breathe 4.5s ease-in-out infinite;
}
.core-orb .ico {
  width: 40%;
  height: 40%;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}
.core-base {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  height: 22%;
  border-radius: 50%;
  border: 1px solid rgba(120, 170, 255, 0.35);
  background: radial-gradient(closest-side, rgba(61, 139, 255, 0.4), rgba(140, 92, 255, 0.12) 70%, transparent);
  transform: translateY(42%);
}
.core-label {
  position: absolute;
  bottom: -14%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  background: rgba(8, 20, 52, 0.92);
  border: 1px solid rgba(140, 170, 255, 0.35);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.8);
}
.core-label strong { font-family: var(--font-display); font-stretch: 108%; font-size: 0.8125rem; font-weight: 650; }
.core-label small { font-size: 0.6875rem; color: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

/* Agent pods: glowing tiles with labels, in the style of a pipeline diagram */
.engine-pods { position: absolute; inset: 0; }
.pod {
  position: absolute;
  left: calc(var(--x) / 640 * 100%);
  top: calc(var(--y) / 600 * 100%);
  width: 170px;
  margin-left: -85px;
  margin-top: -31px; /* centre of the tile sits exactly on the link end */
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.pod .itile { margin-bottom: 10px; animation: tile-glow 3.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes tile-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -14px 22px -10px color-mix(in srgb, var(--tone) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--tone) 10%, transparent), 0 0 18px color-mix(in srgb, var(--tone) 40%, transparent), 0 12px 26px -12px rgba(0, 0, 0, 0.8); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -14px 22px -10px color-mix(in srgb, var(--tone) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--tone) 18%, transparent), 0 0 34px color-mix(in srgb, var(--tone) 70%, transparent), 0 12px 26px -12px rgba(0, 0, 0, 0.8); }
}
.pod-name {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.pod-task {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--text-2);
  background: rgba(8, 20, 52, 0.88);
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
}
.pod-led {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 8px var(--tone);
  animation: led-blink 1.8s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes led-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Live activity ticker */
.engine-feed {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 18px auto 0;
  padding: 8px 14px 8px 8px;
  border-radius: var(--r-pill);
  background: rgba(10, 24, 62, 0.75);
  border: 1px solid var(--line-strong);
}
.feed-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green);
  background: rgba(70, 224, 138, 0.1);
}
.feed-live .dot { width: 7px; height: 7px; }
.feed-track { height: 1.5rem; overflow: hidden; flex: 1; min-width: 0; }
.feed-track ul { animation: feed 14s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.feed-track li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-track li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 8px var(--tone);
}
@keyframes feed {
  0%, 21% { transform: translateY(0); }
  25%, 46% { transform: translateY(-1.5rem); }
  50%, 71% { transform: translateY(-3rem); }
  75%, 96% { transform: translateY(-4.5rem); }
  100% { transform: translateY(-6rem); }
}

/* Pause everything in the hero when it is off screen */
.hero.is-paused .engine *,
.hero.is-paused .engine *::before,
.hero.is-paused .engine *::after,
.hero.is-paused .feed-track ul,
.hero.is-paused .dot--live { animation-play-state: paused; }

/* =================== 2. ARCHITECTURE =================== */
.arch {
  padding-bottom: clamp(72px, 7vw, 104px);
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(61, 107, 255, 0.16), transparent 70%),
    linear-gradient(180deg, transparent, rgba(10, 24, 66, 0.7) 20%, rgba(10, 24, 66, 0.7) 85%, transparent);
}
.arch::before,
.arch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 228, 245, 0.5) 30%, rgba(140, 92, 255, 0.5) 70%, transparent);
}
.arch::before { top: 0; }
.arch::after { bottom: 0; }

/* Five layers, introduced as a connected row of tiles */
.arch-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 46px;
  max-width: 1000px;
  margin: -16px auto 0;
}
.arch-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 124px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.arch-steps li + li::before {
  content: "";
  position: absolute;
  top: 22px;
  right: calc(100% + 4px);
  width: 38px;
  height: 2px;
  background: linear-gradient(90deg, var(--text-2) 0 5px, transparent 5px) repeat-x;
  background-size: 9px 2px;
  opacity: 0.7;
  animation: step-run 0.9s linear infinite;
}
.arch-steps li + li::after {
  content: "";
  position: absolute;
  top: 18px;
  right: calc(100% + 2px);
  border: 5px solid transparent;
  border-left: 6px solid var(--text-2);
  opacity: 0.8;
}
.arch-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 34px auto clamp(32px, 4vw, 48px);
  padding: 10px 18px;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--r-pill);
  font-size: 0.9688rem;
  color: var(--text-2);
  background: rgba(70, 224, 138, 0.07);
  border: 1px solid rgba(70, 224, 138, 0.3);
}
.arch-note .ico { color: var(--green); }
@keyframes step-run { to { background-position: 9px 0; } }

.arch-wrap {
  width: min(1480px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.arch-frame {
  position: relative;
  padding: clamp(14px, 2vw, 28px);
  border-radius: var(--r-lg);
  background:
    linear-gradient(rgba(130, 165, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(130, 165, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(180deg, rgba(14, 32, 82, 0.85), rgba(8, 19, 52, 0.9));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--navy-700) transparent;
}
.arch-frame:focus-visible { outline-offset: 4px; }
.arch-svg { width: 100%; min-width: 1060px; height: auto; overflow: visible; }
.arch-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--text-3);
}

/* SVG text */
.a-t { font-family: var(--font-body); fill: var(--text); font-size: 13px; }
.a-t--b { font-size: 13.5px; font-weight: 600; }
.a-t--s { font-size: 11px; fill: var(--text-2); }
.a-t--hi { fill: #d6e2ff; }
.a-t--lane { font-size: 12.5px; font-weight: 600; fill: var(--text-3); letter-spacing: 0.02em; }
.a-t--title { font-family: var(--font-display); font-stretch: 108%; font-size: 17px; font-weight: 650; }
.a-t--rack { font-family: var(--font-display); font-stretch: 106%; font-size: 13px; font-weight: 650; }
.a-t--unit { font-size: 11px; font-weight: 500; fill: #cfdcff; }
.a-t--tag { font-size: 10.5px; font-weight: 600; fill: #fff; }

.a-ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--cyan); }
.a-ico--lg { color: var(--cyan); stroke-width: 1.4; }
.a-ico--core { color: #b9c8ff; }

/* Boxes */
.a-box {
  fill: url(#a-front);
  stroke: color-mix(in srgb, var(--c) 55%, transparent);
  stroke-width: 1.2;
}
.a-panel { fill: url(#a-front); stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 1.2; }
.a-panel--core { fill: url(#a-core); stroke: none; }
.a-led-border { fill: none; stroke: url(#a-led); stroke-width: 2; }
.a-chip { fill: rgba(5, 12, 34, 0.7); stroke: rgba(130, 165, 255, 0.25); }
.a-chip--pill { fill: rgba(140, 92, 255, 0.14); stroke: rgba(140, 92, 255, 0.45); }
.a-chip--gov { fill: rgba(70, 224, 138, 0.08); stroke: rgba(70, 224, 138, 0.35); }
.a-agent { fill: rgba(6, 14, 40, 0.75); stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 1.2; }
.a-glyph { fill: color-mix(in srgb, var(--c) 18%, #0b1a44); stroke: color-mix(in srgb, var(--c) 60%, transparent); }
.a-gov { fill: rgba(10, 30, 50, 0.75); stroke: rgba(70, 224, 138, 0.4); stroke-width: 1.2; stroke-dasharray: 6 5; }
.a-tag { fill: color-mix(in srgb, var(--c) 30%, #0a1638); stroke: var(--c); stroke-width: 1; }

/* Lines, pulses and LED nodes */
.a-line { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; opacity: 0.75; }
.a-line--flow { stroke-dasharray: 6 7; animation: dash-flow 1.2s linear infinite; }
.a-line--gov { stroke-dasharray: 2 6; opacity: 0.55; }
.a-pulse { fill: #fff; stroke: var(--c); stroke-width: 5; stroke-opacity: 0.55; }
.a-node { fill: var(--c); }
.a-halo { fill: var(--c); opacity: 0.18; animation: halo 2.4s ease-in-out infinite; }
.a-led { fill: var(--c); animation: led-blink 1.6s steps(2, jump-none) infinite; }
@keyframes halo {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.32; }
}

/* Server racks */
.r-top { fill: #1d3478; stroke: rgba(130, 165, 255, 0.35); stroke-width: 1; }
.r-side { fill: #0a1638; stroke: rgba(130, 165, 255, 0.25); stroke-width: 1; }
.r-vent { stroke: rgba(130, 165, 255, 0.22); stroke-width: 1; }
.r-front { fill: url(#a-front); stroke: color-mix(in srgb, var(--c) 70%, transparent); stroke-width: 1.4; }
.r-head { fill: rgba(5, 12, 34, 0.65); }
.r-rail { fill: rgba(130, 165, 255, 0.18); }
.r-unit { fill: #0f2459; stroke: rgba(130, 165, 255, 0.22); stroke-width: 1; }
.r-bay { fill: rgba(130, 165, 255, 0.22); }
.r-gpu { fill: #4c7dff; opacity: 0.85; animation: led-blink 2.2s ease-in-out infinite; }
.r-foot { fill: #0a1638; stroke: rgba(130, 165, 255, 0.25); }
.r-load-bg { fill: rgba(255, 255, 255, 0.08); }
.r-load {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: left center;
  animation: load 3s ease-in-out infinite alternate;
}
@keyframes load {
  from { transform: scaleX(0.2); }
  to { transform: scaleX(1); }
}

.arch.is-paused * { animation-play-state: paused !important; }

/* Legend and deployment options */
.arch-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 28px;
}
.arch-legend li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-2);
}
.arch-legend li::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
}
.deploy-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.deploy-row li {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20, 42, 98, 0.5), rgba(9, 20, 52, 0.5));
}
.deploy-row h3 { font-size: 1.0625rem; }
.deploy-row p { margin-top: 6px; font-size: 0.9375rem; color: var(--text-2); }

/* =================== 3. REAL ESTATE CHAT AGENT =================== */
.chat { overflow-x: clip; }
.chat-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
  column-gap: 76px;
  align-items: center;
}
.chat-side,
.chat-side-list { display: grid; gap: 22px; }
.chat-side--right { display: grid; gap: 22px; }

.feat {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22, 46, 106, 0.55), rgba(10, 22, 56, 0.55));
}
.feat h3 { font-size: 1.0313rem; }
.feat p { margin-top: 5px; font-size: 0.9063rem; line-height: 1.5; color: var(--text-2); }

/* Circuit links from features to the phone, like the reference artwork */
.chat-side--left .feat::after,
.chat-side--right .feat::after,
.lead-slot::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 76px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(34, 228, 245, 0.7) 0 5px, transparent 5px 10px);
  background-size: 20px 1px;
  animation: link-run 1.2s linear infinite;
}
.chat-side--left .feat::after { right: -77px; }
.chat-side--right .feat::after,
.lead-slot::after { left: -77px; animation-direction: reverse; }
.chat-side--left .feat::before,
.chat-side--right .feat::before,
.lead-slot::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber), 0 0 3px #fff inset;
}
.chat-side--left .feat::before { right: -81px; }
.chat-side--right .feat::before,
.lead-slot::before { left: -81px; }
.lead-slot { position: relative; }
@keyframes link-run { to { background-position: 20px 0; } }

/* Phone */
.phone-wrap { position: relative; display: grid; place-items: center; }
.phone-wrap::before {
  content: "";
  position: absolute;
  inset: 8% -20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(238, 63, 166, 0.22), rgba(61, 107, 255, 0.12) 55%, transparent);
  pointer-events: none;
}
.phone {
  width: 340px;
  height: 660px;
  padding: 11px;
  border-radius: 48px;
  background: linear-gradient(160deg, #18264d, #070d24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.led--warm::before {
  background: conic-gradient(from var(--led-angle), var(--amber), var(--magenta), var(--violet), var(--cyan), var(--amber));
  padding: 2px;
}
.led--warm::after {
  box-shadow: 0 0 36px -6px rgba(255, 181, 71, 0.45), 0 0 80px -16px rgba(238, 63, 166, 0.55);
}
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 38px;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(61, 107, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #0c1b45, #071130);
}
.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.phone-notch { width: 92px; height: 24px; border-radius: 14px; background: #03081a; }
.phone-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.phone-sig i { width: 3px; border-radius: 1px; background: var(--text); }
.phone-sig i:nth-child(1) { height: 4px; }
.phone-sig i:nth-child(2) { height: 7px; }
.phone-sig i:nth-child(3) { height: 10px; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 12px 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.chat-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--cyan), var(--blue) 50%, var(--violet));
  box-shadow: 0 0 16px -2px rgba(34, 228, 245, 0.6);
}
.chat-avatar .ico { width: 20px; height: 20px; }
.chat-who { display: grid; line-height: 1.25; }
.chat-who strong { font-size: 0.875rem; }
.chat-who small { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--green); }
.chat-who .dot { width: 6px; height: 6px; }

.chat-thread {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 12px 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px);
  mask-image: linear-gradient(180deg, transparent 0, #000 36px);
  transition: opacity 0.5s var(--ease);
}
.chat-thread.is-fading { opacity: 0; }
.msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 0.8rem;
  line-height: 1.45;
}
.msg--user {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, #2f6bff, #7a4dff);
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 18px -8px rgba(122, 77, 255, 0.8);
}
.msg--bot {
  align-self: flex-start;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 5px;
}
.msg[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-body); font-size: 0.84rem; text-align: right; }
.prop {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
  padding: 7px;
  border-radius: 12px;
  background: rgba(5, 11, 31, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.prop-img {
  display: grid;
  place-items: end center;
  height: 52px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}
.prop-img .ico { width: 34px; height: 34px; margin-bottom: -3px; stroke-width: 1.3; }
.prop-img--a { background: linear-gradient(180deg, #ffb36b 0%, #e463d2 55%, #3a3a9e 100%); }
.prop-img--b { background: linear-gradient(180deg, #5ef0ff 0%, #4f7dff 55%, #23246e 100%); }
.prop-info { display: grid; align-content: center; gap: 1px; line-height: 1.3; }
.prop-info strong { font-size: 0.78rem; }
.prop-info small { font-size: 0.7rem; color: var(--text-2); }
.prop-info em { font-style: normal; font-size: 0.74rem; font-weight: 600; color: var(--cyan); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick span {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  border: 1px solid rgba(34, 228, 245, 0.5);
  color: var(--cyan);
  transition: background-color 0.3s, color 0.3s;
}
.chat-thread:has(.msg--pick.is-shown) .quick .is-pick,
.no-anim .quick .is-pick { background: var(--cyan); color: #03112b; }

.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-2);
  animation: typing 1s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-4px); opacity: 1; }
}

.chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 12px 16px;
  padding: 6px 6px 6px 16px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.chat-input b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #03112b;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.chat-input .ico { width: 16px; height: 16px; }

/* Step-by-step playback (JS adds .js to <html>) */
.js [data-chat] [data-step] { display: none; }
.js [data-chat] [data-step].is-shown { display: block; animation: msg-in 0.4s var(--ease) both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Live lead card */
.lead-card {
  padding: 20px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(24, 48, 108, 0.75), rgba(10, 22, 58, 0.8));
}
.lead-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.lead-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-stretch: 106%; font-weight: 650; }
.lead-badge {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--green);
  background: rgba(70, 224, 138, 0.12);
  border: 1px solid rgba(70, 224, 138, 0.4);
  transition: opacity 0.4s;
}
.lead-fields { display: grid; gap: 10px; }
.lead-fields div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.875rem;
  transition: opacity 0.5s var(--ease);
}
.lead-fields dt { color: var(--text-3); }
.lead-fields dd { font-weight: 500; }
.lead-ok { color: var(--green); }
.js .lead-card[data-live] [data-lead-field] { opacity: 0.22; }
.js .lead-card[data-live] [data-lead-field].is-on { opacity: 1; }
.js .lead-card[data-live] .lead-badge { opacity: 0; }
.js .lead-card[data-live].is-done .lead-badge { opacity: 1; }

/* =================== RESPONSIVE =================== */
@media (max-width: 1200px) {
  .chat-stage { column-gap: 48px; }
  .chat-side--left .feat::after,
  .chat-side--right .feat::after { width: 48px; }
  .chat-side--left .feat::after { right: -49px; }
  .chat-side--right .feat::after,
  .lead-slot::after { left: -49px; width: 48px; }
  .chat-side--left .feat::before { right: -53px; }
  .chat-side--right .feat::before,
  .lead-slot::before { left: -53px; }
}

@media (max-width: 1080px) {
  .chat-stage {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .phone-wrap { grid-column: 1 / -1; order: -1; margin-bottom: 28px; }
  .chat-side--left .feat::after,
  .chat-side--right .feat::after,
  .chat-side--left .feat::before,
  .chat-side--right .feat::before,
  .lead-slot::after,
  .lead-slot::before { display: none; }
  .chat-side--right { align-content: start; }
}

@media (max-width: 860px) {
  .arch-hint { display: flex; }
  .arch-steps { gap: 22px 10px; }
  .arch-steps li { width: calc(33.333% - 10px); font-size: 0.875rem; }
  .arch-steps li + li::before,
  .arch-steps li + li::after { display: none; }
  .arch-note { border-radius: var(--r-md); text-align: left; }
  .deploy-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Agent engine becomes a core plus a grid of agents */
  .engine {
    aspect-ratio: auto;
    display: grid;
    gap: 10px;
  }
  .engine-links { display: none; }
  .engine-core {
    position: relative;
    left: auto;
    top: auto;
    width: 190px;
    margin: 6px auto 34px;
    transform: none;
  }
  .engine-pods {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .pod {
    position: static;
    width: auto;
    margin: 0;
    padding: 16px 8px 14px;
    border-radius: var(--r-md);
    background: rgba(10, 24, 62, 0.6);
    border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  }
  .pod .itile { --s: 50px; }
  .pod-name { font-size: 0.8125rem; }
  .pod-task { white-space: normal; font-size: 0.66rem; }
  .engine-feed { margin-top: 14px; }
  .feed-track li { font-size: 0.75rem; }

  .chat-stage { grid-template-columns: 1fr; }
  .phone { width: min(320px, 100%); height: 620px; }
}