/* ═══════════════════════════════════════════════════════════════
   BENTO GRID UI ILLUSTRATIONS (Pure CSS & SVG Constructs)
   These replace static images with scalable, high-fidelity code.
═══════════════════════════════════════════════════════════════ */

/* ── 1. KYC DOCUMENT CONSTRUCT ── */
.ui-kyc-card {
  width: 140px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.ui-kyc-photo { 
  width: 100%; 
  height: 80px; 
  background: var(--bg-sunken); 
  border-radius: var(--rad-sm); 
  margin-bottom: var(--space-3);
  position: relative;
  overflow: hidden;
}

/* Subtle scanning animation */
.ui-kyc-photo::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--cb-blue-500);
  box-shadow: 0 0 8px var(--cb-blue-500);
  animation: scanLine 2.5s infinite linear;
}

@keyframes scanLine {
  0% { transform: translateY(-5px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(85px); opacity: 0; }
}

.ui-kyc-line { 
  height: 6px; 
  background: var(--ink-200); 
  border-radius: var(--rad-full); 
  margin-bottom: 6px; 
  width: 70%; 
}

.ui-kyc-badge { 
  background: var(--success-soft); 
  color: var(--success); 
  font-size: 8px; 
  font-weight: 800; 
  padding: 4px 8px; 
  border-radius: var(--rad-full); 
  display: inline-block; 
  margin-top: var(--space-2);
  letter-spacing: var(--track-wider);
}

/* ── 2. VOIP CALL PILL CONSTRUCT ── */
.ui-call-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--ink-800);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--rad-full);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.ui-call-av { 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  background: var(--cb-blue-600); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: var(--white); 
  font-weight: 800; 
  font-size: var(--text-sm);
  position: relative;
}

/* Audio waveform bars next to avatar */
.ui-call-av::before, .ui-call-av::after {
  content: '';
  position: absolute;
  width: 3px;
  background: var(--success);
  border-radius: 2px;
  right: -12px;
  animation: audioWave 1s infinite alternate ease-in-out;
}
.ui-call-av::before { height: 8px; top: 16px; animation-delay: 0.1s;}
.ui-call-av::after { height: 16px; right: -18px; top: 12px; animation-delay: 0.3s;}

@keyframes audioWave {
  0% { transform: scaleY(0.5); opacity: 0.6; }
  100% { transform: scaleY(1.2); opacity: 1; }
}

.ui-call-text { color: var(--white); }
.ui-call-name { font-size: var(--text-sm); font-weight: 700; margin-bottom: 2px; letter-spacing: var(--track-tight); }
.ui-call-time { font-size: 11px; color: var(--success); font-family: var(--font-mono); }

.ui-call-end { 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  background: var(--error); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-left: var(--space-2);
  transition: transform var(--dur-fast);
}
.ui-call-end:hover { transform: scale(1.05); }
.ui-call-end svg { stroke: var(--white); width: 18px; height: 18px; stroke-width: 2.5; stroke-linecap: round; }

/* ── 3. DARK MAP TRACKING CONSTRUCT ── */
.ui-map-canvas {
  width: 100%;
  height: 140px;
  background: #0f172a; /* Deep slate */
  border-radius: var(--rad-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.ui-map-canvas svg { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0.4;
}

.ui-map-dot {
  position: absolute; 
  top: 50%; left: 50%; 
  transform: translate(-50%,-50%);
  width: 16px; height: 16px; 
  border-radius: 50%; 
  background: var(--cb-blue-500);
  box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2);
  animation: pulseBlueMap 2s infinite;
  z-index: 2;
}

/* Agent Avatar moving on map */
.ui-map-agent {
  position: absolute;
  top: 60%; left: 30%;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--ink-800);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: var(--ink-primary);
  z-index: 3;
  animation: moveAgent 10s infinite alternate ease-in-out;
}

@keyframes moveAgent {
  0% { top: 60%; left: 30%; }
  50% { top: 40%; left: 60%; }
  100% { top: 50%; left: 50%; }
}

@keyframes pulseBlueMap {
  0%, 100% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 0 16px rgba(59, 130, 246, 0.05); }
}

/* ── 4. PRIVACY MASK CONSTRUCT ── */
.ui-privacy-bubble {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: var(--space-4) var(--space-6);
  border-radius: 20px 20px 20px 4px;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shadow-md);
}

.ui-privacy-text { 
  font-family: var(--font-mono); 
  font-size: var(--text-base); 
  font-weight: 700; 
  letter-spacing: var(--track-widest); 
  color: var(--ink-primary);
  display: flex;
  align-items: center;
}

.ui-privacy-mask { 
  display: inline-block; 
  width: 80px; 
  height: 10px; 
  background: var(--ink-300); 
  border-radius: var(--rad-sm); 
  margin-left: var(--space-3); 
  position: relative;
  overflow: hidden;
}

.ui-privacy-mask::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── 5. ENCRYPTION RING CONSTRUCT ── */
.ui-lock-circle {
  width: 80px; height: 80px; 
  border-radius: 50%;
  background: rgba(255,255,255,0.05); 
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

/* Spinning dashed ring */
.ui-lock-circle::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.3);
  animation: spinSlow 10s linear infinite;
}

.ui-lock-circle svg { 
  stroke: var(--white); 
  width: 32px; height: 32px; 
  stroke-width: 2; 
  stroke-linecap: round; 
  stroke-linejoin: round;
}

@keyframes spinSlow {
  100% { transform: rotate(360deg); }
}

/* ── 6. SPEED/SETTLEMENT PROGRESS CONSTRUCT ── */
.ui-speed-wrapper {
  display: flex;
  flex-direction: column;
}

.ui-speed-val { 
  font-size: var(--text-5xl); 
  font-weight: 900; 
  letter-spacing: var(--track-tightest); 
  font-family: var(--font-mono); 
  color: var(--ink-primary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ui-speed-val span {
  font-size: var(--text-sm);
  color: var(--success);
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}

.ui-speed-track {
  width: 100%; height: 6px; 
  background: var(--bg-sunken); 
  border-radius: var(--rad-full); 
  position: relative; 
  overflow: hidden;
  margin-top: var(--space-4);
}

.ui-speed-bar {
  position: absolute; top: 0; left: 0; height: 100%; 
  width: 85%; 
  background: var(--cb-blue-600); 
  border-radius: var(--rad-full);
}