/* ============================================================
   KYZEL CLARITY AI™ — Master Integration CSS
   Powered by 4P3X Intelligent AI™ Created by Kyzel Kreates™
   Scoped to .kc-admin-* and .kyzel-clarity-embed selectors only.
   ============================================================ */

/* ── Admin panel ──────────────────────────────────────────── */
.kc-admin-panel { color: #f5f2e9; }
.kc-admin-grid  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.kc-admin-card {
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 24px);
  background: rgba(0,0,0,.35);
}
.kc-admin-card h4 {
  margin: 0 0 10px;
  color: #d4af37;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.kc-admin-card p  { margin: 0 0 10px; color: #c4c0b8; font-size: .9rem; line-height: 1.6; }
.kc-admin-card code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 6px; font-size: .82rem; color: #d4af37; }
.kc-admin-note  { color: #7e7a73 !important; font-size: .8rem !important; }
.kc-admin-btns  { display: flex; flex-wrap: wrap; gap: 10px; }
.kca-btn {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 10px 16px;
  background: rgba(255,255,255,.07);
  color: #e0dcd4;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 700;
}
.kca-btn:hover  { background: rgba(212,175,55,.12); }
.kca-warn       { border-color: rgba(255,90,90,.35) !important; color: #ff9090 !important; }
.kca-warn:hover { background: rgba(255,90,90,.12) !important; }

/* ── Embed widget ─────────────────────────────────────────── */
.kyzel-clarity-embed {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  max-width: 560px;
  margin: 0 auto;
}
.kc-embed-card {
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 20px;
  padding: clamp(20px,4vw,32px);
  background: radial-gradient(circle at top left, rgba(111,66,193,.18), transparent 40%),
              linear-gradient(135deg, rgba(7,7,10,.97), rgba(18,18,24,.94));
  color: #f5f2e9;
  box-shadow: 0 16px 56px rgba(0,0,0,.45);
}
.kc-kicker {
  color: #d4af37;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 6px;
}
.kc-embed-card h3 { margin: 0 0 8px; font-size: clamp(1.2rem,4vw,1.6rem); }
.kc-embed-card p  { color: #b8b4ad; font-size: .9rem; line-height: 1.55; margin: 0 0 14px; }
.kc-quick-questions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kc-quick-questions button {
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  padding: 8px 14px; background: rgba(255,255,255,.07);
  color: #d8d4cc; cursor: pointer; font-size: .84rem; font-weight: 700;
}
.kc-quick-questions button:hover { background: rgba(212,175,55,.14); }
#kc-embed-input {
  display: block; width: 100%; min-height: 72px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 14px;
  padding: 12px 14px; background: rgba(0,0,0,.32);
  color: #f5f2e9; font-size: .9rem; resize: vertical; margin-bottom: 10px;
}
#kc-embed-ask {
  border: 1px solid rgba(212,175,55,.55); border-radius: 12px;
  padding: 11px 20px;
  background: linear-gradient(135deg,#f6df92,#d4af37);
  color: #110f08; font-weight: 800; cursor: pointer; font-size: .92rem;
  margin-bottom: 12px; display: block;
}
#kc-embed-answer {
  min-height: 40px; padding: 12px 14px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; color: #dbd7cf; font-size: .9rem; line-height: 1.6;
}

@media (max-width: 480px) {
  .kc-admin-grid { grid-template-columns: 1fr; }
}