/* ============================================================
   JAVIRA DEMO BOT — LiveChat-style widget
   Widget selalu light (seperti widget LiveChat asli),
   berdiri di atas section gelap/terang landing page.
============================================================ */

.faq-section.faq-chat { max-width: 1180px; }

.faq-chat-grid {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.faq-chat-intro { position: sticky; top: 110px; }
.faq-chat-intro h2 { margin-bottom: 18px; }
.faq-chat-intro .faq-subtitle { margin-bottom: 28px; }

/* ---------- Widget shell ---------- */
.javir-chatbox {
  display: flex;
  flex-direction: column;
  height: 740px;
  max-width: 480px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 4px 18px rgba(0,0,0,.18);
}
html[data-theme="light"] .javir-chatbox {
  box-shadow: 0 24px 60px rgba(15,23,42,.18), 0 4px 14px rgba(15,23,42,.08);
}

/* ---------- Header: back / ••• / brand pill / – / × ---------- */
.jc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(15,23,42,.06);
  flex-shrink: 0;
}
.jc-hbtn {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: #F2F4F7;
  color: #344054;
  cursor: default;
}
.jc-hbtn svg { width: 15px; height: 15px; }

.jc-brand-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
}
.jc-brand-pill img {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(15,23,42,.1);
}
.jc-brand-pill strong {
  color: #101828;
  font-size: .74rem;
  letter-spacing: .1em;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .1em;
  color: #12B76A;
  flex-shrink: 0;
}
.jc-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #12B76A;
  box-shadow: 0 0 8px rgba(18,183,106,.7);
  animation: jc-pulse 2s infinite;
}
@keyframes jc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* ---------- Demo badge ---------- */
.jc-demo-badge {
  padding: 7px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .08em;
  text-align: center;
  color: #93701c;
  background: #FFF8E7;
  border-bottom: 1px solid rgba(147,112,28,.14);
  flex-shrink: 0;
}

/* ---------- Message stream ---------- */
.jc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFFFF;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.jc-messages::-webkit-scrollbar { width: 6px; }
.jc-messages::-webkit-scrollbar-thumb { background: rgba(15,23,42,.14); border-radius: 3px; }

.jc-row { display: flex; gap: 8px; align-items: flex-end; }
.jc-row.user { justify-content: flex-end; }
.jc-avatar {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,.08);
  margin-bottom: 2px;
}

.jc-bubble {
  max-width: 78%;
  padding: 11px 15px;
  font-size: .92rem;
  line-height: 1.55;
  border-radius: 14px;
  word-wrap: break-word;
}
.jc-row.bot .jc-bubble {
  background: #F2F4F7;
  color: #1D2939;
  border-bottom-left-radius: 4px;
}
.jc-row.bot .jc-bubble strong { color: #101828; font-weight: 700; }
.jc-row.bot .jc-bubble a { color: #2970FF; text-decoration: none; word-break: break-all; }
.jc-row.bot .jc-bubble a:hover { text-decoration: underline; }
.jc-row.user .jc-bubble {
  background: #2970FF;
  color: #FFFFFF;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.jc-row.error .jc-bubble { background: #FEF3F2; color: #912018; }

/* Message entrance */
.jc-row { animation: jc-in .35s cubic-bezier(.2,.8,.3,1) both; }
@keyframes jc-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .jc-row { animation: none; }
}

/* Typing indicator */
.jc-typing .jc-bubble { display: inline-flex; gap: 5px; padding: 14px 16px; }
.jc-typing .jc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #98A2B3;
  animation: jc-bounce 1.2s infinite;
}
.jc-typing .jc-dot:nth-child(2) { animation-delay: .15s; }
.jc-typing .jc-dot:nth-child(3) { animation-delay: .3s; }
@keyframes jc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ---------- Quick replies (chips) ---------- */
.jc-suggest {
  padding: 12px 16px 4px;
  background: #FFFFFF;
  border-top: 1px solid rgba(15,23,42,.06);
  flex-shrink: 0;
}
.jc-suggest-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.jc-suggest-label {
  margin: 0 0 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #98A2B3;
  text-align: center;
}
.jc-suggest-toggle {
  position: absolute;
  right: 0;
  top: -3px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: #F2F4F7;
  color: #475467;
  cursor: pointer;
  transition: background .2s, transform .3s;
}
.jc-suggest-toggle:hover { background: #E4E7EC; }
.jc-suggest-toggle svg { width: 14px; height: 14px; }
.jc-suggest.collapsed .jc-suggest-toggle svg { transform: rotate(180deg); }
.jc-suggest.collapsed .jc-chips { display: none; }
.jc-suggest.collapsed { padding-bottom: 10px; }
.jc-suggest.collapsed .jc-suggest-label { margin-bottom: 0; }
.jc-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.jc-chip {
  appearance: none;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid #2970FF;
  background: #FFFFFF;
  color: #2970FF;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  transition: background .2s, color .2s, transform .2s;
}
.jc-chip:hover { background: #2970FF; color: #FFFFFF; transform: translateY(-1px); }
.jc-chip:disabled { opacity: .4; cursor: default; transform: none; background: #FFFFFF; color: #2970FF; }

/* ---------- Input bar ---------- */
.jc-inputbar {
  padding: 10px 14px 8px;
  background: #FFFFFF;
  flex-shrink: 0;
}
.jc-inputpill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border: 1.5px solid #D0D5DD;
  border-radius: 999px;
  background: #FFFFFF;
  transition: border-color .2s, box-shadow .2s;
}
.jc-inputpill:focus-within {
  border-color: #2970FF;
  box-shadow: 0 0 0 3px rgba(41,112,255,.12);
}
.jc-plus {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: #475467;
}
.jc-plus svg { width: 16px; height: 16px; }
.jc-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #101828;
  font-family: inherit;
  font-size: .92rem;
  padding: 8px 0;
  outline: none;
}
.jc-input::placeholder { color: #98A2B3; }
.jc-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem;
  letter-spacing: .04em;
  color: #98A2B3;
  flex-shrink: 0;
}
.jc-send {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: #2970FF;
  color: #FFFFFF;
  transition: transform .2s, opacity .2s, background .2s;
}
.jc-send:hover { transform: scale(1.06); background: #1D5BD6; }
.jc-send:disabled { opacity: .4; cursor: default; transform: none; }
.jc-send svg { width: 16px; height: 16px; }

/* ---------- Powered by ---------- */
.jc-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 10px;
  background: #FFFFFF;
  font-size: .68rem;
  font-weight: 600;
  color: #667085;
  flex-shrink: 0;
}
.jc-powered img { height: 14px; width: auto; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .faq-chat-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-chat-intro { position: static; }
  .javir-chatbox { height: 640px; }
  .jc-bubble { max-width: 86%; }
}
@media (max-width: 600px) {
  .javir-chatbox { height: 580px; border-radius: 16px; }
  .jc-messages { padding: 16px 12px; }
  .jc-suggest { padding-left: 12px; padding-right: 12px; }
  .jc-inputbar { padding-left: 10px; padding-right: 10px; }
  .jc-chip { font-size: .74rem; padding: 7px 12px; }
  .jc-brand-pill strong { font-size: .66rem; }
  .jc-status { display: none; }
}