/* ============================================================
   IAW live agent console — futuristic refresh on top of the
   base panel styles in clx-aiworkflows-panel.php. Adds:
     - white cards with a soft neutral shadow + faint orange border
     - status chip + pulsing dot per card
     - running shimmer on the progress bar (replaces the static gradient)
     - telemetry row with an animated sparkline
     - pulsing dot in the panel header badge + footer eyebrow labels
   Enqueued only on /it-consulting-service/. No JS.
   ============================================================ */

/* Grid: dotted bg + tighter rhythm */
.iaw-grid {
  position: relative;
  background-image: radial-gradient(rgba(15, 23, 42, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  padding: 24px 14px 14px;
  border-radius: 16px;
  margin-bottom: 18px;
}

/* Slot card — white over the existing gray */
.iaw-slot {
  background: #ffffff !important;
  border: 1px solid rgba(234, 88, 12, 0.10) !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06),
              0 1px 2px rgba(15, 23, 42, 0.04) !important;
  border-radius: 14px !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.iaw-slot:hover {
  transform: translateY(-3px);
  border-color: rgba(234, 88, 12, 0.28) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10),
              0 2px 4px rgba(15, 23, 42, 0.06) !important;
}
.iaw-slot:hover .iaw-slot__bar::after { animation-duration: 2.5s !important; }

/* Top row layout — chip + key share the right side */
.iaw-slot__top { display: flex; align-items: center; justify-content: space-between; }
.iaw-slot__top .iaw-top-right { display: inline-flex; align-items: center; }

/* Status chip */
.iaw-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #ea580c;
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(234, 88, 12, 0.18);
  padding: 3px 8px; border-radius: 999px;
  margin-right: 8px;
}
.iaw-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ea580c;
  box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.55);
  animation: iaw-pulse 1.6s infinite;
}
.iaw-status.queued { color:#475569; background:rgba(71,85,105,0.08); border-color:rgba(71,85,105,0.18); }
.iaw-status.queued .dot { background:#475569; animation: none; }
.iaw-status.synced { color:#0f766e; background:rgba(15,118,110,0.08); border-color:rgba(15,118,110,0.18); }
.iaw-status.synced .dot { background:#0f766e; animation: none; }

@keyframes iaw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(234, 88, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

/* Live progress bar — running shimmer replaces the static gradient */
.iaw-slot__bar-wrap {
  position: relative; height: 6px; border-radius: 999px;
  overflow: hidden; background: #fdece4;
}
.iaw-slot__bar { background: transparent !important; height: 100% !important; width: 100% !important; position: relative; }
.iaw-slot__bar::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, rgba(234,88,12,0) 0%, #fb923c 50%, #ea580c 100%);
  border-radius: 999px;
  animation: iaw-run 5.5s linear infinite;
}
@keyframes iaw-run {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* Telemetry footer row */
.iaw-telemetry {
  margin-top: 10px;
  display: flex; align-items: center; gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: #64748b;
}
.iaw-telemetry .sep { color: #cbd5e1; }
.iaw-spark { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.iaw-spark span {
  width: 3px; background: #fb923c; border-radius: 1px; opacity: .85;
  animation: iaw-spark 2s ease-in-out infinite;
}
.iaw-spark span:nth-child(1) { animation-delay: 0s; }
.iaw-spark span:nth-child(2) { animation-delay: .25s; }
.iaw-spark span:nth-child(3) { animation-delay: .5s; }
.iaw-spark span:nth-child(4) { animation-delay: .75s; }
.iaw-spark span:nth-child(5) { animation-delay: 1s; }
@keyframes iaw-spark {
  0%, 100% { height: 4px; }
  50%      { height: 12px; }
}

/* Panel header badge — pulsing orange dot before the text */
.iaw-badge { display: inline-flex; align-items: center; gap: 8px; }
.iaw-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #ea580c; box-shadow: 0 0 0 0 rgba(234,88,12,.55);
  animation: iaw-pulse 1.6s infinite;
}

/* Footer callouts — white cards + pulsing eyebrow dots */
.iaw-footer { margin-top: 0 !important; gap: 18px; }
.iaw-footer__col {
  background: #ffffff !important;
  border: 1px solid rgba(234, 88, 12, 0.10) !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06),
              0 1px 2px rgba(15, 23, 42, 0.04) !important;
  border-radius: 14px !important;
}
.iaw-footer__label { display: inline-flex; align-items: center; gap: 8px; }
.iaw-footer__label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #ea580c; box-shadow: 0 0 0 0 rgba(234,88,12,.55);
  animation: iaw-pulse 1.8s infinite;
}

/* Reduced motion — kill the pulse/run/spark animations, keep static look */
@media (prefers-reduced-motion: reduce) {
  .iaw-status .dot,
  .iaw-badge::before,
  .iaw-footer__label::before,
  .iaw-slot__bar::after,
  .iaw-spark span { animation: none !important; }
}