/* ============================================================
   JAVIR CHAT — Interactive FAQ chatbox
============================================================ */

.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; }

/* ---------- Chatbox shell ---------- */
.javir-chatbox {
  display: flex;
  flex-direction: column;
  height: 620px;
  background: linear-gradient(180deg, rgba(10,22,41,.85), rgba(5,11,24,.92));
  border: 1px solid var(--line-hi);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 40px rgba(55,183,255,.06);
  backdrop-filter: blur(10px);
}

/* ---------- Header ---------- */
.jc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(3,7,15,.6);
  flex-shrink: 0;
}
.jc-header img { width: 26px; height: auto; }
.jc-header strong {
  color: var(--white);
  font-size: .86rem;
  letter-spacing: .14em;
  font-weight: 800;
}
.jc-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  color: #7ef0b2;
}
.jc-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px rgba(52,211,153,.8);
  animation: jc-pulse 2s infinite;
}
@keyframes jc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

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

.jc-row { display: flex; gap: 10px; align-items: flex-end; }
.jc-row.user { justify-content: flex-end; }
.jc-avatar {
  width: 26px; height: 26px;
  flex-shrink: 0;
  object-fit: contain;
  margin-bottom: 2px;
}

.jc-bubble {
  max-width: 78%;
  padding: 12px 16px;
  font-size: .93rem;
  line-height: 1.6;
  border-radius: 14px;
  word-wrap: break-word;
}
.jc-bubble strong { font-weight: 700; }

.jc-row.bot .jc-bubble {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.jc-row.bot .jc-bubble strong { color: var(--white); }

.jc-row.user .jc-bubble {
  background: linear-gradient(135deg, #67e8f9, #8ea0ff 55%, #c084fc);
  color: #071021;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}

.jc-row.error .jc-bubble {
  border-color: rgba(255,93,115,.35);
  color: #ffb7c1;
}

/* 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: 15px 18px; }
.jc-typing .jc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(139,197,255,.7);
  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; }
}

/* ---------- Suggested questions ---------- */
.jc-suggest {
  padding: 14px 18px 6px;
  border-top: 1px solid var(--line);
  background: rgba(3,7,15,.45);
  flex-shrink: 0;
}
.jc-suggest-label {
  margin: 0 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.jc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-chip {
  appearance: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(139,197,255,.22);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  transition: border-color .25s, background .25s, transform .25s;
}
.jc-chip:hover {
  border-color: rgba(103,232,249,.55);
  background: rgba(103,232,249,.08);
  transform: translateY(-1px);
}
.jc-chip:disabled { opacity: .4; cursor: default; transform: none; }

/* ---------- Input bar ---------- */
.jc-inputbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 14px;
  background: rgba(3,7,15,.45);
  flex-shrink: 0;
}
.jc-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(139,197,255,.22);
  background: rgba(255,255,255,.04);
  color: var(--white);
  font-family: inherit;
  font-size: .9rem;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.jc-input::placeholder { color: var(--muted); }
.jc-input:focus {
  border-color: rgba(103,232,249,.6);
  box-shadow: 0 0 0 3px rgba(103,232,249,.12);
}
.jc-send {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #38bdf8, #8b5cf6);
  color: #fff;
  transition: transform .25s, box-shadow .25s, opacity .25s;
  box-shadow: 0 8px 20px rgba(55,183,255,.3);
}
.jc-send:hover { transform: scale(1.06); }
.jc-send:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.jc-send svg { width: 18px; height: 18px; }

/* Demo transparency badge */
.jc-demo-badge {
  padding: 7px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-align: center;
  color: #ffd98a;
  background: rgba(240,191,94,.07);
  border-bottom: 1px solid rgba(240,191,94,.16);
  flex-shrink: 0;
}
html[data-theme="light"] .jc-demo-badge {
  color: #9a6b13;
  background: rgba(240,191,94,.14);
  border-color: rgba(154,107,19,.18);
}

/* Char counter near limit */
.jc-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--muted);
  flex-shrink: 0;
}
html[data-theme="light"] .jc-count { color: #8896AB; }

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

/* ---------- Light theme ---------- */
html[data-theme="light"] .javir-chatbox {
  background: #FFFFFF;
  border-color: rgba(11,20,40,.12);
  box-shadow: 0 24px 60px rgba(47,70,206,.12);
}
html[data-theme="light"] .jc-header,
html[data-theme="light"] .jc-suggest,
html[data-theme="light"] .jc-inputbar {
  background: #F6F9FE;
  border-color: rgba(11,20,40,.08);
}
html[data-theme="light"] .jc-header strong { color: #0B1428; }
html[data-theme="light"] .jc-status { color: #0e9f6e; }
html[data-theme="light"] .jc-row.bot .jc-bubble {
  background: #F0F4FA;
  border-color: rgba(11,20,40,.08);
  color: #2B384E;
}
html[data-theme="light"] .jc-row.bot .jc-bubble strong { color: #0B1428; }
html[data-theme="light"] .jc-row.user .jc-bubble {
  background: linear-gradient(135deg, #2F46CE, #7C5CF5);
  color: #FFFFFF;
}
html[data-theme="light"] .jc-chip {
  border-color: rgba(47,70,206,.25);
  background: #FFFFFF;
  color: #2B384E;
}
html[data-theme="light"] .jc-chip:hover {
  border-color: #2F46CE;
  background: rgba(47,70,206,.06);
}
html[data-theme="light"] .jc-suggest-label { color: #5C6B82; }
html[data-theme="light"] .jc-input {
  border-color: rgba(11,20,40,.14);
  background: #FFFFFF;
  color: #0B1428;
}
html[data-theme="light"] .jc-input::placeholder { color: #8896AB; }
html[data-theme="light"] .jc-input:focus {
  border-color: rgba(47,70,206,.55);
  box-shadow: 0 0 0 3px rgba(47,70,206,.12);
}
html[data-theme="light"] .jc-send { background: linear-gradient(135deg, #2F46CE, #7C5CF5); box-shadow: 0 8px 20px rgba(47,70,206,.25); }
html[data-theme="light"] .jc-typing .jc-dot { background: rgba(47,70,206,.5); }