/* Institut 80 : Slaye, l'assistante du site (bulle et fenêtre de discussion) */
.sl-root { --sl-navy: #0f172a; --sl-blue: #1e86ce; --sl-green: #5fb825; --sl-ink: #0f172a; --sl-ink2: #475569; --sl-ink3: #64748b;
  --sl-line: #e2e8f0; --sl-bg: #f8fafc; --sl-card: #ffffff; --sl-grad: linear-gradient(120deg, #5fb825 0%, #1e86ce 100%);
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483000; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; color: var(--sl-ink); }
.sl-root *, .sl-root *::before, .sl-root *::after { box-sizing: border-box; }

/* Bouton d'ouverture */
.sl-launch { display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--sl-navy); color: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .35); font: 700 15px/1 inherit; font-family: inherit; position: relative; transition: transform .15s; }
.sl-launch:hover { transform: translateY(-2px); }
.sl-launch:focus-visible { outline: 3px solid var(--sl-blue); outline-offset: 3px; }
.sl-launch-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--sl-grad); display: grid; place-items: center; }
.sl-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #dc2626; color: #fff; font-size: 12px; display: grid; place-items: center; }
.sl-open .sl-launch { display: none; }

/* Fenêtre */
.sl-panel { position: absolute; right: 0; bottom: 0; width: 380px; max-width: calc(100vw - 36px); height: min(620px, calc(100vh - 40px)); display: flex; flex-direction: column;
  background: var(--sl-bg); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(15, 23, 42, .35); border: 1px solid var(--sl-line); }
.sl-panel[hidden] { display: none; }
.sl-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--sl-navy); color: #fff; position: relative; }
.sl-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sl-grad); }
.sl-av { width: 38px; height: 38px; border-radius: 50%; background: var(--sl-grad); display: grid; place-items: center; font: 800 15px/1 inherit; font-family: inherit; flex: none; }
.sl-humain .sl-av { font-size: 11px; }
.sl-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl-nom { font-size: 15px; }
.sl-sous { font-size: 12px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-wa, .sl-x { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #cbd5e1; background: transparent; border: 0; cursor: pointer; text-decoration: none; font-size: 24px; line-height: 1; }
.sl-wa:hover, .sl-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sl-wa { color: #4ade80; }

/* Messages */
.sl-msgs { flex: 1; overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.sl-m { max-width: 88%; display: flex; flex-direction: column; gap: 3px; }
.sl-txt { padding: 9px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; word-wrap: break-word; }
.sl-txt p { margin: 0 0 6px; } .sl-txt p:last-child { margin-bottom: 0; }
.sl-txt ul { margin: 2px 0 6px; padding-left: 18px; } .sl-txt li { margin: 2px 0; }
.sl-txt a { color: var(--sl-blue); font-weight: 600; word-break: break-all; }
.sl-bot { align-self: flex-start; } .sl-bot .sl-txt { background: var(--sl-card); border: 1px solid var(--sl-line); border-top-left-radius: 4px; }
.sl-agent { align-self: flex-start; } .sl-agent .sl-txt { background: #ecfdf5; border: 1px solid #bbf7d0; border-top-left-radius: 4px; }
.sl-qui { font-size: 11.5px; color: #15803d; font-weight: 700; padding-left: 4px; }
.sl-moi { align-self: flex-end; } .sl-moi .sl-txt { background: var(--sl-blue); background-image: var(--sl-grad); color: #fff; border-top-right-radius: 4px; }
.sl-moi .sl-txt a { color: #fff; }
.sl-typing .sl-txt { display: flex; gap: 4px; padding: 12px 14px; }
.sl-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: sl-dot 1s infinite ease-in-out; }
.sl-typing span:nth-child(2) { animation-delay: .15s; } .sl-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sl-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Boutons de choix */
.sl-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 4px; }
.sl-chip { border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; border-radius: 999px; padding: 7px 12px; font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; text-align: left; }
.sl-chip:hover { background: #dbeafe; }

/* Petits formulaires dans la discussion */
.sl-carte { background: var(--sl-card); border: 1px solid var(--sl-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sl-carte label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--sl-ink2); }
.sl-carte input, .sl-carte select { width: 100%; padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 9px; font: 14px inherit; font-family: inherit; color: var(--sl-ink); background: #fff; }
.sl-carte input:focus, .sl-carte select:focus { outline: 2px solid var(--sl-blue); outline-offset: 0; border-color: var(--sl-blue); }
.sl-carte .sl-chk { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--sl-ink); }
.sl-carte .sl-chk input { width: auto; }
.sl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-btn { border: 0; border-radius: 10px; padding: 10px 14px; background: var(--sl-blue); background-image: var(--sl-grad); color: #fff; font: 700 14px inherit; font-family: inherit; cursor: pointer; }
.sl-btn:disabled { opacity: .6; cursor: wait; }
.sl-lien { font-size: 13px; color: #15803d; font-weight: 600; }
.sl-err { margin: 0; color: #dc2626; font-size: 13px; }

/* Saisie */
.sl-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 6px; background: var(--sl-card); border-top: 1px solid var(--sl-line); }
.sl-in { flex: 1; resize: none; border: 1px solid #cbd5e1; border-radius: 12px; padding: 10px 12px; font: 14.5px/1.35 inherit; font-family: inherit; max-height: 110px; color: var(--sl-ink); background: #fff; }
.sl-in:focus { outline: 2px solid var(--sl-blue); outline-offset: 0; border-color: var(--sl-blue); }
.sl-send { width: 42px; height: 42px; border-radius: 12px; border: 0; background: var(--sl-blue); background-image: var(--sl-grad); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.sl-note { margin: 0; padding: 0 12px 10px; background: var(--sl-card); font-size: 11px; color: var(--sl-ink3); text-align: center; }

@media (max-width: 560px) {
  .sl-root { right: 12px; bottom: 12px; }
  .sl-launch-lab { display: none; }
  .sl-launch { padding: 8px; }
  .sl-open { inset: 0; right: 0; bottom: 0; }
  .sl-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; border-radius: 0; border: 0; }
  .sl-2 { grid-template-columns: 1fr; }
}