/* =========================================================
   Weedily — AI Toolbar (pills)
   - Pas de fond ni liseret pour la toolbar
   - Couleurs par service (ChatGPT, Perplexity, Grok, Google AI, Claude, DeepSeek, Prompt)
   - Accessibilité (focus visible), hover, toast, modale
   ========================================================= */

/* ---------- Variables couleurs par service ---------- */
:root{
  --c-chatgpt:#10A37F;   /* vert ChatGPT */
  --c-perplexity:#7C3AED;/* violet Perplexity */
  --c-grok:#000000;      /* noir Grok */
  --c-google:#1A73E8;    /* bleu Google */
  --c-claude:#FF7A1A;    /* orange Claude */
  --c-deepseek:#0EA5E9;  /* cyan DeepSeek */
  --c-prompt:#F59E0B;    /* ambre Prompt */
}

/* ---------- Base toolbar (fond + bord supprimés) ---------- */
.ai-toolbar.ai-pills{
  position: relative;
  display: block;
  padding: .5rem 0;
  border: none;              /* suppression liseret */
  background: transparent;   /* suppression fond */
  box-shadow: none;
}

/* Titre sobre au-dessus des pills */
.ai-toolbar .ai-title{
  font: 700 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  margin: 0 0 .5rem 0;
  letter-spacing: .2px;
}

/* Rangée flexible des pills */
.ai-pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ---------- Style commun des pills ---------- */
.ai-pill{
  display: inline-block;
  padding: .55rem .9rem;
  border-radius: 999px;
  text-decoration: none;
  font: 700 13px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  border: none;                 /* pas de bord */
  color: #fff;                  /* texte blanc par défaut */
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transition: transform .06s ease, filter .1s ease, box-shadow .12s ease;
  will-change: transform, filter;
  outline: none;
  cursor: pointer;              /* aussi pour le bouton Prompt */
}

/* Survol & focus clavier */
.ai-pill:hover,
.ai-pill:focus-visible{
  transform: translateY(-1px);
  filter: brightness(.92);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
}

/* Anneau de focus plus visible (accessibilité) */
.ai-pill:focus-visible{
  box-shadow:
    0 0 0 3px rgba(255,255,255,.6),
    0 8px 28px rgba(0,0,0,.18);
}

/* ---------- Couleurs par service ---------- */
#ai-chatgpt.ai-pill   { background: var(--c-chatgpt); }
#ai-perplexity.ai-pill{ background: var(--c-perplexity); }
#ai-grok.ai-pill      { background: var(--c-grok); }
#ai-gemini.ai-pill    { background: var(--c-google); }
#ai-claude.ai-pill    { background: var(--c-claude); }
#ai-deepseek.ai-pill  { background: var(--c-deepseek); }
#ai-prompt-open.ai-pill{ background: var(--c-prompt); }

/* ---------- Toast (petit message d’info) ---------- */
.ai-toolbar .ai-toast{
  display: inline-block;
  margin-left: .5rem;
  font-size: 12px;
  opacity: 0;
  transition: opacity .25s ease;
}
.ai-toolbar.show-toast .ai-toast{ opacity: 1; }

/* ---------- Modale Prompt ---------- */
.ai-modal[hidden]{ display: none !important; }
.ai-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ai-modal-card{
  width: min(720px, 95vw);
  background: #fff;
  color: #111;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.ai-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  border-bottom: 1px solid #eee;
}
.ai-modal-body{ padding: 1rem; }
.ai-modal-foot{
  padding: .8rem 1rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}
.ai-close{
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Zone de texte du prompt */
#ai-prompt-text{
  width: 100%;
  font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: .75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  color: #111;
}

/* Bouton "Copier" dans la modale : on réutilise la couleur Prompt */
.ai-btn-copy{
  display: inline-block;
  padding: .55rem .9rem;
  border-radius: 10px;
  border: none;
  background: var(--c-prompt);
  color: #fff;
  font: 700 13px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  cursor: pointer;
}
.ai-btn-copy:hover,
.ai-btn-copy:focus-visible{
  filter: brightness(.92);
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark){
  .ai-toolbar .ai-title{ color: #eaeaea; }

  .ai-modal-card{
    background: #151515;
    color: #eee;
  }
  #ai-prompt-text{
    background: #111;
    border-color: #333;
    color: #eee;
  }
}