/* -------- qa-widget.css (tema uyumlu gri + Poppins + taşma fix) -------- */

/* Google Fonts – Poppins (temanda zaten varsa silebilirsin) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/* Yalnızca widget alanını etkile */
#qa-root{
  display:block;
  max-width:100%;
  width:100%;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#555;
  overflow-x:hidden;                 /* yatay taşmayı kesin kapat */
}
#qa-root *, #qa-root *::before, #qa-root *::after{
  box-sizing:border-box;             /* tüm çocuklarda güvenli ölçü */
}

/* Kutu */
#qa-root .qa-container{
  width:100%;                        /* ebeveynine tam sığ */
  max-width:720px;                   /* üst sınır */
  margin:24px auto;
  border:1px solid #e4e4e7;
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:12px;
  overflow:hidden;                   /* iç taşma bariyeri */
}

/* Medya ve görseller asla taşmasın */
#qa-root img,
#qa-root video,
#qa-root canvas,
#qa-root svg{
  max-width:100%;
  height:auto;
  display:block;
}

/* Mesaj alanı – iç scroll yok (tek sayfa scroll) */
#qa-root .qa-messages{
  max-height:none;
  overflow:visible;
  padding:6px 2px;
  margin-bottom:8px;
  color:#555;
  overflow-wrap:anywhere;            /* uzun kelimeleri kır */
  word-break:break-word;
}
#qa-root .qa-messages::after{
  content:""; display:block; clear:both;
}

/* Balonlar */
#qa-root .qa-bubble{
  display:inline-block;
  clear:both;
  padding:10px 12px;
  margin:6px 0;
  border-radius:12px;
  line-height:1.35;
  max-width:100%;                    /* kutu dışına taşma olmasın */
  white-space:pre-line;              /* \n -> yeni satır */
  overflow-wrap:anywhere;
  word-break:break-word;
  color:#555;
  font-family:inherit;
}
#qa-root .qa-user{
  float:right;
  background:#e6f0ff;
  border-bottom-right-radius:4px;
}
#qa-root .qa-user::before{ content:"❓ - "; margin-right:4px; }
#qa-root .qa-bot{
  float:left;
  background:#f6f6f6;
  border-bottom-left-radius:4px;
}

/* Form */
#qa-root .qa-form{ display:flex; gap:8px; margin-top:8px; flex-wrap:nowrap; }
#qa-root .qa-input{
  flex:1 1 auto;
  min-width:0;                       /* flex taşma fix */
  height:42px;
  border-radius:10px;
  border:1px solid #d1d5db;
  padding:0 12px;
  font-size:15px;
  color:#555;
  font-family:inherit;
}
#qa-root .qa-input::placeholder{ color:#777; }
#qa-root .qa-btn{
  flex:0 0 auto;
  height:42px;
  border-radius:10px;
  border:1px solid #0c6e6d;
  background:#0c6e6d;
  color:#fff;
  padding:0 14px;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;                /* buton taşmasın */
}
#qa-root .qa-btn:disabled{ opacity:.6; cursor:default }

/* “En yakın cevaplar” alanı */
#qa-root .qa-suggestions{ clear:both; margin:6px 0 2px; color:#555; }
#qa-root .qa-sug-title{
  font-weight:600;
  margin:4px 0 6px;
  color:#555;
}
#qa-root .qa-sug-title::before{ content:"🔎 "; margin-right:4px }

/* Liste — bullet/ok yok */
#qa-root .qa-suggestions ul,
#qa-root .qa-suggestions li{ list-style:none; margin:0; padding:0; }
#qa-root .qa-suggestions li{ margin-bottom:10px; }

/* details/summary — yalnızca yeşil ok; ❓ metinde/JS'te */
#qa-root .qa-suggestions summary::-webkit-details-marker,
#qa-root .qa-suggestions summary::marker{ display:none; content:none; }
#qa-root .qa-suggestions summary{
  position:relative;
  padding-left:26px;
  cursor:pointer;
  color:#555;
  font-family:inherit;
}
#qa-root .qa-suggestions details > summary::before{
  content:"▸";
  position:absolute;
  left:0; top:0;
  line-height:1;
  font-size:16px;
  color:#0c6e6d;
  font-weight:bold;
}
#qa-root .qa-suggestions details[open] > summary::before{
  content:"▾";
  color:#0c6e6d;
}

/* Öneri cevap kartı */
#qa-root .qa-sug-answer{
  background:#fff;
  border:1px solid #eee;
  border-radius:8px;
  padding:8px;
  margin-top:6px;
  color:#555;
  font-family:inherit;
}
#qa-root .qa-sug-answer::before{ content:"✅ "; margin-right:4px }

/* Focus */
#qa-root .qa-input:focus, #qa-root .qa-btn:focus{
  outline:2px solid #0c6e6d; outline-offset:2px;
}

/* Üst görsel – küçük ve responsive */
.qa-page-img{
  display:block;
  margin:24px auto 10px auto;
  width:40%;
  max-width:160px;
  height:auto;
}
@media (max-width: 480px){
  .qa-page-img{
    width:55%;
    max-width:120px;
    margin:16px auto 8px auto;
  }
}

/* Responsive iyileştirmeler */
@media (max-width: 640px){
  #qa-root .qa-container{ padding:10px; margin:16px auto; }
  #qa-root .qa-input{ height:40px; font-size:14px; }
  #qa-root .qa-btn{ height:40px; padding:0 12px; }
  #qa-root .qa-bubble{ font-size:14px; }
}
.qa-no-icon::before {
  display: none !important;
}