/* ============================================================
   WIDGET D'ASSISTANCE KGN : bulle flottante + panneau FAQ
   Bas à gauche (le bouton "retour en haut" reste à droite).
   ============================================================ */

.kgn-widget{ position:fixed; left:22px; bottom:22px; z-index:800; font-family:var(--sans); }

.kgn-bubble{
  position:relative; width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg, var(--green-700), var(--green-900));
  color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
  transition:transform .2s ease;
}
.kgn-bubble:hover{ transform:translateY(-3px); }
.kgn-bubble svg{ width:26px; height:26px; }
.kgn-bubble .kgn-icon-close{ display:none; }
.kgn-widget.open .kgn-bubble .kgn-icon-chat{ display:none; }
.kgn-widget.open .kgn-bubble .kgn-icon-close{ display:block; }
.kgn-bubble-dot{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:var(--gold-400); border:2px solid var(--bg);
}
.kgn-widget.open .kgn-bubble-dot{ display:none; }

/* ---------- Bulle d'accroche (première visite) ---------- */
.kgn-teaser{
  position:absolute; left:0; bottom:74px; width:240px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:16px 18px;
  opacity:0; transform:translateY(10px) scale(.96); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.kgn-teaser.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.kgn-teaser p{ margin:0; font-size:0.86rem; color:var(--ink); line-height:1.5; }
.kgn-teaser strong{ color:var(--green-900); }
.kgn-teaser-close{
  position:absolute; top:6px; right:8px; background:none; border:none; cursor:pointer;
  color:var(--ink-faint); font-size:0.9rem; line-height:1; padding:4px;
}
.kgn-widget.open .kgn-teaser{ display:none; }

/* ---------- Panneau ---------- */
.kgn-panel{
  position:absolute; left:0; bottom:74px; width:340px; max-height:min(560px, 72vh);
  background:var(--paper); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.kgn-widget.open .kgn-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.kgn-panel-header{
  background:linear-gradient(135deg, var(--green-900), var(--green-950));
  color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px;
}
.kgn-panel-avatar{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.kgn-panel-avatar svg{ width:20px; height:20px; color:var(--gold-400); }
.kgn-panel-title{ font-family:var(--serif); font-weight:600; font-size:1rem; }
.kgn-panel-status{ font-size:0.78rem; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:6px; }
.kgn-dot-online{ width:7px; height:7px; border-radius:50%; background:#58B592; display:inline-block; }

.kgn-panel-body{ flex:1; overflow-y:auto; padding:20px 18px; }
.kgn-view{ display:none; }
.kgn-view.active{ display:block; }

.kgn-intro-hero{ text-align:center; margin-bottom:18px; }
.kgn-intro-hero .kgn-panel-avatar{ width:52px; height:52px; margin:0 auto 12px; background:var(--green-100); }
.kgn-intro-hero .kgn-panel-avatar svg{ color:var(--green-700); width:26px; height:26px; }
.kgn-intro-hero h3{ font-size:1.05rem; margin-bottom:6px; }
.kgn-intro-hero p{ font-size:0.86rem; margin:0; }

.kgn-topic-grid{ display:grid; gap:9px; }
.kgn-topic-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; font-family:inherit; font-size:0.88rem; font-weight:600; color:var(--green-950);
  cursor:pointer; transition:background-color .15s ease, border-color .15s ease;
}
.kgn-topic-btn:hover{ background:var(--green-100); border-color:var(--green-100); }
.kgn-topic-btn span.emoji{ font-size:1.1rem; flex-shrink:0; }

.kgn-answer-back{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  color:var(--green-700); font-weight:700; font-size:0.82rem; padding:0 0 14px; font-family:inherit;
}
.kgn-answer-back svg{ width:14px; height:14px; }
.kgn-answer h4{ font-size:0.98rem; margin-bottom:8px; }
.kgn-answer p, .kgn-answer li{ font-size:0.86rem; color:var(--ink-soft); line-height:1.55; }
.kgn-answer ul{ margin:0 0 12px; padding-left:18px; }
.kgn-answer li{ margin-bottom:4px; }

.kgn-panel-footer{
  padding:14px 18px; border-top:1px solid var(--line); background:var(--paper);
}
.kgn-panel-footer .btn{ width:100%; justify-content:center; padding:11px 20px; font-size:0.88rem; }

@media (max-width:480px){
  .kgn-widget{ left:14px; bottom:14px; }
  .kgn-panel, .kgn-teaser{ width:calc(100vw - 28px); }
}