/*
  Panneau « Recherche IA · Auguste » (B2, R14/AC14.1) — styles du partial
  partagé shared/_ai_search_panel, migrés verbatim du mockup validé client
  (app/views/mockups/recruiter/talent_search.html.erb, bloc "AI card").
  Autonome : scopé .ts-ai-card avec sa propre palette, réutilisable sur les
  4 surfaces de recherche IA (tâches 004/005). Zéro CSS inline.
*/

.ts-ai-card {
  --ts-gold: var(--gold-500);
  --ts-gold-deep: var(--gold-600);
  --ts-gold-luminous: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-primary) 35%, var(--gold-200) 70%, var(--gold-100) 100%);
  --ts-cream: #F8F4ED;
  --ts-cream-border: #E8DDC4;
  --ts-ink: #0A0A0A;
  --ts-ink-soft: #5B5B5B;
  --ts-ink-mute: #8A8A8A;
  --ts-line: #ECECEC;
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(189,151,51,0.10) 0%, rgba(189,151,51,0) 60%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(232,204,110,0.08) 0%, rgba(232,204,110,0) 60%),
    linear-gradient(135deg, #FDF7EA 0%, #F8F1DF 100%);
  border: 1px solid rgba(163,133,67,0.22);
  border-radius: 22px;
  padding: 20px 22px 18px;
  margin: 0 auto;
  box-shadow: 0 4px 24px rgba(163,133,67,0.08);
  overflow: hidden;
}
.ts-ai-card > * { position: relative; z-index: 1; }
.ts-ai-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
/* Retour #1773 / #1889 : avatar Auguste (agent IA), portrait officiel du client. */
.ts-auguste-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
  border: 2.5px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box,
    linear-gradient(140deg,#F7ECC4,var(--gold-primary) 45%,var(--gold-deep) 70%,var(--gold-200)) border-box;
  box-shadow: 0 2px 12px rgba(184,145,42,0.35);
}
.ts-auguste-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gold-deep);
  background: #FBF4E2;
  border: 1px solid rgba(163,133,67,0.35);
  border-radius: var(--r-pill);
  padding: 4px 11px;
}
.ts-auguste-rule svg { width: 11px; height: 11px; }
.ts-ai-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ts-ink-mute);
  font-weight: 700;
}
.ts-ai-sub { font-size: 14.5px; color: var(--ts-ink); font-weight: 600; margin-top: 2px; letter-spacing: -0.01em; }
.ts-ai-quick-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ts-ink-mute);
  font-weight: 700;
  margin-bottom: 8px;
}
.ts-ai-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
/* #1895 : pills modernes (fond blanc, bord doré léger, icône lucide) */
.ts-ai-chip {
  background: #fff;
  border: 1px solid var(--ts-line);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ts-ink-soft);
  text-decoration: none;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(44,44,44,0.04);
}
.ts-ai-chip svg { width: 12px; height: 12px; color: var(--ts-gold); }
.ts-ai-chip:hover {
  border-color: var(--ts-cream-border);
  background: var(--ts-cream);
  color: var(--ts-gold-deep);
  transform: translateY(-1px);
}
/* #1962 : hauteur de la barre calée sur celle du bouton Rechercher (38px).
   Les trois règles de la barre sont scopées sous .ts-ai-card, à la différence
   du reste du fichier. Raison : lovable/recruiter-talent-search.css est une
   feuille de référence NON scopée qui redéfinit les mêmes classes .ts-ai-*
   (barre en textarea : input min-height 78px, bouton align-self stretch), et
   le layout charge TOUTES les feuilles sur TOUTES les pages. À spécificité
   égale, ses déclarations que nous ne redéclarions pas passaient : barre de
   88px au lieu de 46, bouton de 38px collé en haut à droite. */
.ts-ai-card .ts-ai-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(163,133,67,0.22);
  border-radius: var(--r-pill);
  padding: 4px 4px 4px 16px;
  box-shadow: 0 2px 12px rgba(163,133,67,0.06);
}
.ts-ai-card .ts-ai-input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 38px;
  align-self: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 38px;
  color: var(--ts-ink);
  outline: none;
}
.ts-ai-card .ts-ai-input::placeholder { color: var(--ts-ink-mute); font-style: italic; }
.ts-ai-card .ts-ai-launch {
  background: var(--ts-gold-luminous);
  color:var(--on-gold);text-shadow:var(--on-gold-shadow);
  border: none;
  border-radius: var(--r-pill);
  padding: 0 22px;
  height: 38px;
  min-width: 0;
  align-self: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(163,133,67,0.25);
  transition: filter 0.18s;
}
.ts-ai-card .ts-ai-launch:hover { filter: brightness(1.04); }
.ts-ai-hint { margin-top: 10px; font-size: 11px; color: var(--ts-ink-mute); text-align: center; font-style: italic; }

/* ═══ Déclaration rapatriée de app/assets/stylesheets/lovable/recruiter-talent-search.css ═══
   `@media (max-width:720px){ .ts-ai-input-wrap{flex-direction:column} }` : cette
   feuille de référence n'est plus servie sur les pages produit, et rien ne la
   remplaçait ici (ai_search.css n'avait aucune media query). Sur mobile la barre
   restait en ligne : champ de saisie réduit à ~130 px, placeholder tronqué, bouton
   collé. On empile de nouveau champ et bouton sous 720 px. Le rendu desktop est
   inchangé (la règle ne s'applique qu'en dessous du seuil). */
@media (max-width: 720px) {
  .ts-ai-card .ts-ai-input-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-radius: var(--r-md);
    padding: 10px;
  }
  .ts-ai-card .ts-ai-input { width: 100%; align-self: stretch; }
  .ts-ai-card .ts-ai-launch { align-self: stretch; width: 100%; }
}

/* ── État explicite de la recherche IA (audit engagements IA 06/08, écart E7) ──
   Bandeau rendu par shared/_ai_search_notice : moteur dégradé, résultats sous
   le seuil, ou aucune correspondance. Il remplace la page blanche muette. */
.ts-ai-notice {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 18px; padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--gold-200); background: #FFFDF8;
  font-family: 'Geist', system-ui, sans-serif; color: #3A342A;
}
.ts-ai-notice--degraded { border-color: #EBC9A6; background: #FDF6EE; }
.ts-ai-notice-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-500); margin-top: 1px; }
.ts-ai-notice-body { min-width: 0; }
.ts-ai-notice-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: #1E1C18; }
.ts-ai-notice-text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--n-700); }
.ts-ai-notice-cta {
  display: inline-block; margin-top: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px;
}
.ts-ai-notice-cta:hover { color: var(--gold-700); }
.ts-ai-notice-note { font-size: 12px; font-style: italic; color: var(--n-500); }