/*
  WIDGET DE CHAT SUPPORT — feuille de style externe
  ---------------------------------------------------------------------------
  Pourquoi un fichier externe et pas un <style> collé dans chaque page ?
  Le site applique une Content-Security-Policy stricte sans 'unsafe-inline'
  sur style-src. Un fichier CSS chargé via <link rel="stylesheet"> reste
  couvert par "style-src 'self'" sans rien changer à la CSP. Un <style> ou
  un attribut style="" inline aurait au contraire été bloqué par le
  navigateur (ou aurait exigé de recalculer un hash SHA-256, comme c'est
  déjà le cas pour les <script> inline de index.html / app / abonnements).

  ADAPTATION AUX COULEURS NATIVES DU SITE
  ---------------------------------------------------------------------------
  Le site a en réalité DEUX chartes différentes :
    - la page d'accueil (index.html) : --black / --charcoal / --gold / --red / --bone
    - toutes les autres pages (app, abonnements, jeu-responsable, pages
      légales…) : --bg / --card / --ink / --muted / --accent / --chip-active
  Plutôt que de choisir une seule palette (ce qui aurait détonné sur une
  moitié du site), chaque variable du widget ci-dessous va chercher en
  priorité la variable déjà définie par la page qui l'accueille, et ne
  retombe sur une valeur codée en dur que si aucune des deux chartes n'est
  présente. Résultat : le widget prend automatiquement les couleurs de la
  page sur laquelle il est posé, sans aucune configuration.
*/

:root{
  --sw-radius: 14px;
  --sw-font-body: 'Barlow Condensed','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sw-font-display: 'Oswald','Arial Narrow',sans-serif;
  --sw-font-mono: 'SF Mono','Roboto Mono',ui-monospace,monospace;

  /* fond du panneau : carte/panneau de la page, sinon charcoal (accueil) */
  --sw-panel: var(--card, var(--charcoal, #131b2e));
  /* fond du header / du bandeau de saisie : fond général de la page */
  --sw-panel-deep: var(--bg, var(--black, #0b1320));
  /* couleur d'accent (bouton, bulles utilisateur, focus) */
  --sw-accent: var(--chip-active, var(--gold, var(--accent, #f5b400)));
  --sw-accent-ink: var(--chip-active-text, var(--black, #1a1200));
  /* texte principal / texte atténué */
  --sw-text: var(--ink, var(--bone, #eef1f7));
  --sw-text-dim: var(--muted, var(--bone-dim, #8a93a6));
  /* liserés / séparateurs */
  --sw-line: var(--border, var(--charcoal-2, #1b2538));
  /* pastille "live" */
  --sw-live: var(--live, var(--red-bright, #16a34a));
}

#sw-launcher{
  position:fixed; right:22px; bottom:22px; z-index:99998;
  width:58px; height:58px; border-radius:50%;
  background:var(--sw-panel-deep);
  border:2px solid var(--sw-accent);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .18s ease;
}
#sw-launcher:hover{ transform:scale(1.06); }
#sw-launcher svg{ width:24px; height:24px; stroke:var(--sw-text); }
#sw-launcher-dot{
  position:absolute; top:-3px; right:-3px; width:13px; height:13px;
  border-radius:50%; background:var(--sw-live);
  box-shadow:0 0 0 2px var(--sw-panel-deep);
  animation:sw-pulse 1.6s infinite;
}
@keyframes sw-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--sw-live) 55%, transparent); }
  70%{ box-shadow:0 0 0 8px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

#sw-panel{
  position:fixed; right:22px; bottom:92px; z-index:99999;
  width:360px; max-width:92vw; height:520px; max-height:75vh;
  background:var(--sw-panel);
  border:1px solid var(--sw-line);
  border-radius:var(--sw-radius);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:var(--sw-font-body); color:var(--sw-text);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
#sw-panel.sw-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

#sw-header{
  background:var(--sw-panel-deep); padding:15px 18px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--sw-line);
}
#sw-header-title{
  display:flex; align-items:center; gap:9px;
  font-family:var(--sw-font-display); text-transform:uppercase;
  letter-spacing:.05em; color:var(--sw-text); font-size:15.5px;
}
#sw-header-live{
  width:8px; height:8px; border-radius:50%; background:var(--sw-live);
  animation:sw-pulse 1.6s infinite; flex-shrink:0;
}
#sw-header-sub{ font-size:11.5px; color:var(--sw-text-dim); margin-top:2px; }
#sw-close{
  background:none; border:none; color:var(--sw-text-dim); cursor:pointer;
  font-size:20px; line-height:1; padding:4px; font-family:inherit;
}
#sw-close:hover{ color:var(--sw-text); }

#sw-body{
  flex:1; overflow-y:auto; padding:16px 18px;
  display:flex; flex-direction:column; gap:10px;
}
#sw-body::-webkit-scrollbar{ width:6px; }
#sw-body::-webkit-scrollbar-thumb{ background:var(--sw-line); border-radius:3px; }

.sw-msg{
  max-width:85%; padding:10px 13px; border-radius:10px;
  font-size:13.5px; line-height:1.45;
}
.sw-msg-bot{
  background:var(--sw-line); color:var(--sw-text); align-self:flex-start;
  border-top-left-radius:2px;
}
.sw-msg-user{
  background:var(--sw-accent); color:var(--sw-accent-ink); align-self:flex-end;
  border-top-right-radius:2px; font-weight:600;
}

.sw-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.sw-chip{
  background:transparent; border:1px solid var(--sw-line); color:var(--sw-text-dim);
  padding:6px 10px; border-radius:20px; font-size:12px; cursor:pointer;
  font-family:var(--sw-font-body); transition:border-color .15s, color .15s;
}
.sw-chip:hover{ border-color:var(--sw-accent); color:var(--sw-text); }

#sw-ticket-banner{
  display:none; background:color-mix(in srgb, var(--sw-live) 12%, transparent);
  border:1px solid var(--sw-live);
  color:var(--sw-text); font-size:12px; border-radius:8px; padding:9px 11px;
  font-family:var(--sw-font-mono);
}

#sw-form{
  border-top:1px solid var(--sw-line); padding:12px 14px;
  display:flex; flex-direction:column; gap:8px; background:var(--sw-panel-deep);
}
#sw-form input, #sw-form textarea{
  width:100%; box-sizing:border-box; background:var(--sw-panel);
  border:1px solid var(--sw-line); color:var(--sw-text);
  border-radius:8px; padding:9px 11px; font-family:var(--sw-font-body);
  font-size:13px; resize:none; outline:none;
}
#sw-form input:focus, #sw-form textarea:focus{ border-color:var(--sw-accent); }
#sw-form-row{ display:flex; gap:8px; }
#sw-form-row input{ flex:1; min-width:0; }
#sw-send{
  align-self:flex-end; background:var(--sw-accent); color:var(--sw-accent-ink);
  border:none; font-family:var(--sw-font-display); text-transform:uppercase;
  letter-spacing:.04em; font-size:13px; padding:9px 18px; border-radius:8px;
  cursor:pointer; transition:filter .15s;
}
#sw-send:hover{ filter:brightness(1.08); }
#sw-send:disabled{ opacity:.5; cursor:default; }

@media (prefers-reduced-motion: reduce){
  #sw-launcher-dot, #sw-header-live{ animation:none; }
  #sw-panel{ transition:none; }
}

@media (max-width: 480px){
  #sw-panel{ right:12px; left:12px; width:auto; bottom:84px; }
  #sw-launcher{ right:16px; bottom:16px; }
}