/* ==========================================================================
   Soft Skill Zone — Chatbot
   Floating sahayak: FAB + panel. Mobile par poori screen ka sheet ban jaata
   hai, desktop par kone me chhota card.
   ========================================================================== */

/* ---------------- FAB ---------------- */
.fab--chat {
  position: relative;
  background: var(--grad-brand);
  color: #fff;
}
.fab--chat .fab__x { display: none; }
.fab--chat.is-open .fab__chat { display: none; }
.fab--chat.is-open .fab__x { display: grid; }
.fab--chat svg { width: 24px; height: 24px; }
.fab__chat, .fab__x { display: grid; place-items: center; }

/* Pehli baar aane wale ke liye halka sa ishara — ek baar dekh lene ke baad
   ye gayab ho jaata hai, isliye chidhaata nahi. */
.fab__dot {
  position: absolute; top: 3px; right: 3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--danger, #dc2626);
  border: 2px solid var(--bg-surface);
}
.fab__dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--danger, #dc2626);
  animation: chatPing 2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes chatPing { 0% { transform: scale(.6); opacity: .9 } 80%, 100% { transform: scale(1.5); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .fab__dot::after { animation: none } }

/* ---------------- Panel ---------------- */
.chat-panel {
  position: fixed;
  right: clamp(.85rem, 3vw, 1.5rem);
  bottom: calc(clamp(.85rem, 3vw, 1.5rem) + 62px);
  width: min(384px, calc(100vw - 1.7rem));
  /* Navbar sticky hai aur uska z-index chatbot se upar hai. Chhoti screen par
     agar panel poori lambaai le le to uska apna header navbar ke neeche chhup
     jaata hai — isliye navbar ki jagah pehle hi ghata dete hain. */
  max-height: min(620px, calc(100vh - var(--navbar-h, 68px) - 90px));
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px -18px rgb(15 23 42 / .35), var(--shadow-lg);
  z-index: calc(var(--z-sticky) + 1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
}
.chat-panel.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .chat-panel { transition: none } }

/* Mobile: bottom sheet — chhoti screen par kone ka card padhne layak nahi. */
@media (max-width: 575.98px) {
  /* Mobile par chat neeche se aati poori sheet hai aur `bottom: 0` par
     baithti hai. index.html me `viewport-fit=cover` hai, isliye "0" ka
     matlab gesture bar ke NEECHE hai — chat ka input aur send button
     us patti me chhup jaate the. */
  .chat-panel {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    right: 0; left: 0; bottom: 0;
    width: 100%;
    max-height: 88vh; height: 88dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(100%);
    transform-origin: bottom center;
  }
  .chat-panel.is-open { transform: none; }
}

/* ---------------- Head ---------------- */
.chat-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4);
  background: var(--grad-brand);
  color: #fff;
  flex-shrink: 0;
}
.chat-head__avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / .2);
}
.chat-head__avatar svg { width: 19px; height: 19px; }
.chat-head__meta { flex: 1; min-width: 0; line-height: 1.3; }
/* base.css me `strong, b { color: var(--text-primary) }` likha hai — wo
   yahan ki safed rang wali virasat (inherit) ko daba deta tha, aur Nova ka
   naam baingani header par kaala pad jaata tha (contrast 2.84:1, chahiye
   4.5:1). `inherit` se wo dabaav hat jaata hai. */
.chat-head__meta strong { display: block; font-size: .92rem; font-weight: var(--fw-bold); color: inherit; }
.chat-head__meta span { display: block; font-size: .74rem; opacity: .88; }
/* Mobile par chat poori screen ghere hue sheet ban jaati hai aur ise band
   karne ka SIRF yahi button hai — 32px bahut chhota tha. */
.chat-head__close {
  background: rgb(255 255 255 / .15); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: var(--t-fast); flex-shrink: 0;
}
.chat-head__close:hover { background: rgb(255 255 255 / .3); }

/* ---------------- Messages ---------------- */
.chat-body {
  flex: 1; min-height: 160px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-4);
  background: var(--bg-surface-2);
  display: flex; flex-direction: column; gap: var(--sp-3);
  scrollbar-width: thin;
}
.chat-turn { display: flex; flex-direction: column; gap: var(--sp-2); }

.chat-msg { display: flex; gap: var(--sp-2); align-items: flex-end; }
.chat-msg--user { justify-content: flex-end; }
.chat-msg__avatar {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
}
.chat-msg__body {
  max-width: 82%;
  padding: .6rem .85rem;
  border-radius: 14px;
  font-size: .875rem;
  line-height: 1.62;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-msg--bot .chat-msg__body {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: 5px;
}
.chat-msg--user .chat-msg__body {
  background: var(--grad-brand);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.chat-msg__body strong { font-weight: var(--fw-bold); }
.chat-msg--bot .chat-msg__body strong { color: var(--brand); }

/* Typing dots */
.chat-typing { display: flex; gap: 4px; align-items: center; padding: .75rem .9rem; }
.chat-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted);
  animation: chatDot 1.3s infinite ease-in-out;
}
.chat-typing i:nth-child(2) { animation-delay: .18s }
.chat-typing i:nth-child(3) { animation-delay: .36s }
@keyframes chatDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-4px) } }
@media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; opacity: .6 } }

/* Action links under a bot answer */
.chat-action {
  align-self: flex-start;
  margin-left: 34px;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: .8rem; font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: var(--t-fast);
}
.chat-action:hover { background: var(--brand); color: #fff; }
.chat-action--wa { background: #25d366; color: #fff; }
.chat-action--wa:hover { background: #1da851; color: #fff; }

/* ---------------- Quick chips ---------------- */
.chat-chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: 0 var(--sp-4);
  flex-shrink: 0;
}
.chat-chips:not(:empty) { padding-top: var(--sp-3); }
.chat-chip {
  padding: .4rem .75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: .78rem; font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--t-fast);
  font-family: inherit;
}
.chat-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------------- Input ---------------- */
.chat-form {
  display: flex; gap: var(--sp-2); align-items: center;
  padding: var(--sp-3) var(--sp-4) 0;
  flex-shrink: 0;
}
.chat-input {
  flex: 1; min-width: 0;
  padding: .65rem .9rem;
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-pill);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: .875rem;      /* 16px se chhota ho to iOS zoom karta hai — neeche fix */
  font-family: inherit;
  transition: var(--t-fast);
}
.chat-input:focus { outline: none; border-color: var(--brand); background: var(--bg-surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.chat-input::placeholder { color: var(--text-muted); }
@media (max-width: 575.98px) { .chat-input { font-size: 16px; } }

.chat-send {
  width: 40px; height: 40px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: var(--grad-brand); color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: var(--t-fast);
}
.chat-send:hover { transform: scale(1.07); box-shadow: var(--shadow-brand); }
.chat-send:active { transform: scale(.95); }

.chat-note {
  margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4);
  font-size: .68rem; color: var(--text-muted); text-align: center;
  flex-shrink: 0;
}

@media print { .chat-panel, .fab--chat { display: none !important; } }