/**
 * FIXEO AI REQUEST ENGINE — CSS
 * File: css/fixeo-ai-request-engine.css
 * Version: aire-v1a — 2026-06-11
 * Namespace: .faire-* (Fixeo AI Request Engine)
 * ─────────────────────────────────────────────────────────────
 * Append-only. Does NOT override existing request-form.css rules.
 * All selectors are namespaced faire-* to prevent collisions.
 * ─────────────────────────────────────────────────────────────
 */

/* ── CSS variables (inherit from existing :root when available) ── */
:root {
  --faire-pink:   #E1306C;
  --faire-green:  #20C997;
  --faire-amber:  #FCA735;
  --faire-blue:   #5B8CFF;
  --faire-surface: rgba(255,255,255,0.05);
  --faire-border:  rgba(255,255,255,0.10);
  --faire-text:    rgba(255,255,255,0.90);
  --faire-muted:   rgba(255,255,255,0.45);
}

/* ════════════════════════════════════════════════════════════
   AI CHIP ROW
   Appears below the #request-problem input as the user types.
   ════════════════════════════════════════════════════════════ */
#faire-chips {
  display: none;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
  margin-bottom: 2px;
  animation: faire-fadein .18s ease-out;
}
#faire-chips.visible { display: flex; }

.faire-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
  transition: all .15s;
}

/* Category chip — blue */
.faire-chip-category {
  background: rgba(91,140,255,0.12);
  color: #7ba8ff;
  border-color: rgba(91,140,255,0.28);
}

/* Urgency chip — red/amber (depends on severity) */
.faire-chip-urgent {
  background: rgba(225,48,108,0.15);
  color: #ff6b9d;
  border-color: rgba(225,48,108,0.32);
  animation: faire-urgent-pulse 1.8s ease-in-out infinite;
}

/* Price chip — amber */
.faire-chip-price {
  background: rgba(252,167,53,0.12);
  color: #ffd070;
  border-color: rgba(252,167,53,0.28);
}

/* City chip — green */
.faire-chip-city {
  background: rgba(32,201,151,0.12);
  color: #5eddc5;
  border-color: rgba(32,201,151,0.28);
}

/* Match preview chip — subtle */
.faire-chip-match {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.12);
}

@keyframes faire-urgent-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(225,48,108,0.3); }
  50%      { box-shadow: 0 0 0 5px rgba(225,48,108,0); }
}

/* ════════════════════════════════════════════════════════════
   URGENCY ALERT BANNER
   Appears above submit when urgency is detected.
   ════════════════════════════════════════════════════════════ */
#faire-urgency-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(225,48,108,0.10);
  border: 1px solid rgba(225,48,108,0.28);
  margin-top: 10px;
  margin-bottom: 2px;
  animation: faire-fadein .2s ease-out;
}
#faire-urgency-banner.visible { display: flex; }

.faire-urgency-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--faire-pink);
  flex-shrink: 0;
  animation: faire-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes faire-dot-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .35; }
}

.faire-urgency-text {
  font-size: .82rem;
  font-weight: 700;
  color: #ff6b9d;
  flex: 1;
}

.faire-urgency-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  font-size: .85rem;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
}
.faire-urgency-dismiss:hover { color: rgba(255,255,255,0.6); }

/* ════════════════════════════════════════════════════════════
   PRICE ESTIMATE STRIP
   Shown below chips when category is detected.
   ════════════════════════════════════════════════════════════ */
#faire-price-strip {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(252,167,53,0.06);
  border: 1px solid rgba(252,167,53,0.15);
  margin-top: 8px;
  font-size: .8rem;
  color: rgba(255,255,255,0.6);
  animation: faire-fadein .2s ease-out;
}
#faire-price-strip.visible { display: flex; }

.faire-price-amount {
  font-weight: 800;
  color: #ffc94d;
  font-size: .88rem;
  white-space: nowrap;
}

.faire-price-label {
  font-size: .7rem;
  color: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   MATCH PREVIEW (artisan count)
   Shown below chips: "3 artisans compatibles à Fès"
   ════════════════════════════════════════════════════════════ */
#faire-match-preview {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: rgba(255,255,255,0.55);
  margin-top: 7px;
  animation: faire-fadein .22s ease-out;
}
#faire-match-preview.visible { display: flex; }

.faire-match-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--faire-green);
  flex-shrink: 0;
}
.faire-match-count {
  font-weight: 800;
  color: #5eddc5;
}

/* ════════════════════════════════════════════════════════════
   AI DISPATCH EXPERIENCE (post-submission)
   Replaces the generic #request-success or augments it.
   ════════════════════════════════════════════════════════════ */
#faire-dispatch {
  display: none;
  flex-direction: column;
  gap: 0;
  margin: 0 0 16px;
  animation: faire-fadein .25s ease-out;
}
#faire-dispatch.visible { display: flex; }

.faire-dispatch-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.faire-dispatch-step:last-child { border-bottom: none; }

.faire-dispatch-step.done {
  opacity: 1;
  transform: translateY(0);
}

.faire-dispatch-step.active {
  opacity: 1;
  transform: translateY(0);
}

.faire-dispatch-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
  transition: all .3s;
}

.faire-dispatch-step.done .faire-dispatch-icon {
  background: rgba(32,201,151,0.15);
  color: var(--faire-green);
}

.faire-dispatch-step.active .faire-dispatch-icon {
  background: rgba(225,48,108,0.12);
  color: var(--faire-pink);
  animation: faire-dispatch-spin .8s linear infinite;
}

@keyframes faire-dispatch-spin {
  to { transform: rotate(360deg); }
}

.faire-dispatch-step.waiting .faire-dispatch-icon {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.2);
}

.faire-dispatch-label {
  font-size: .84rem;
  font-weight: 600;
  transition: color .3s;
}

.faire-dispatch-step.done .faire-dispatch-label   { color: rgba(255,255,255,0.85); }
.faire-dispatch-step.active .faire-dispatch-label { color: #fff; }
.faire-dispatch-step.waiting .faire-dispatch-label { color: rgba(255,255,255,0.25); }

.faire-dispatch-check {
  margin-left: auto;
  font-size: .85rem;
  flex-shrink: 0;
}

.faire-dispatch-step.done .faire-dispatch-check {
  color: var(--faire-green);
}

/* ════════════════════════════════════════════════════════════
   SUBMIT BUTTON ENHANCEMENT
   Replaces generic "Envoyer ma demande" label contextually.
   ════════════════════════════════════════════════════════════ */
.faire-submit-enhanced {
  /* No override of existing .btn.btn-primary styles */
  /* We only change text — button keeps its existing CSS */
}

/* ════════════════════════════════════════════════════════════
   SUGGESTION PILLS (autocomplete hints under problem input)
   ════════════════════════════════════════════════════════════ */
#faire-suggestions {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#faire-suggestions.visible { display: flex; }

.faire-suggestion {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  color: rgba(255,255,255,0.65);
  font-size: .75rem;
  padding: 4px 12px;
  cursor: pointer;
  transition: all .12s;
}
.faire-suggestion:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
.faire-suggestion:active {
  transform: scale(.96);
}

/* ════════════════════════════════════════════════════════════
   UTILITY
   ════════════════════════════════════════════════════════════ */
@keyframes faire-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: ensure chips wrap cleanly */
@media (max-width: 480px) {
  .faire-chip { font-size: .73rem; padding: 4px 9px; }
  #faire-price-strip { flex-wrap: wrap; gap: 6px; }
  #faire-match-preview { font-size: .75rem; }
}