/* Website assistant widget (js/faq-chat.js). Loaded on every public page. Closed by
   default; the window opens at a fixed, comfortable size when the visitor clicks the
   button. --faqc-lift is set by the script when a page pins a bar to the bottom of
   the screen, so the button sits above it. z-index stays under the photo lightbox
   (1400) and the enrollment course modal (4100) so those still cover it. */
.faqc { --faqc-lift: 0px; position: fixed; right: 20px; bottom: calc(20px + var(--faqc-lift)); z-index: 1300; font-family: Inter, -apple-system, "Segoe UI", sans-serif; transition: bottom 0.2s ease; }
.faqc * { box-sizing: border-box; }

/* Closed state: one pill button. */
.faqc__bubble {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--orange, #e87a2e); color: #fff; font: 700 15px/1 Inter, sans-serif;
  box-shadow: 0 10px 26px rgba(232, 122, 46, 0.35);
  animation: faqc-bubble-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease, background 0.18s ease;
}
.faqc__bubble:hover { background: var(--orange-hover, #d46a20); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(232, 122, 46, 0.42); }
.faqc__bubble:active { transform: translateY(0) scale(0.97); box-shadow: 0 6px 18px rgba(232, 122, 46, 0.35); }
.faqc__bubble:focus-visible { outline: 3px solid #1e3a5f; outline-offset: 3px; }
.faqc__bubble svg { width: 20px; height: 20px; }
.faqc.is-open .faqc__bubble { display: none; }

/* Open state. Closed by default: the [hidden] rule has to beat display:flex. */
.faqc__panel {
  padding: 0; margin: 0;
  width: min(460px, calc(100vw - 24px));
  height: min(640px, calc(100vh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 20px; border: 1px solid #e2e8f0;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  transform-origin: bottom right;
}
.faqc__panel[hidden] { display: none; }
.faqc__panel.is-opening { animation: faqc-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.faqc__panel.is-closing { animation: faqc-out 0.16s ease-in both; pointer-events: none; }
@keyframes faqc-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes faqc-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes faqc-bubble-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .faqc__bubble, .faqc__panel.is-opening, .faqc__panel.is-closing { animation: none; }
}
.faqc__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; color: #fff;
  background: linear-gradient(135deg, #1e3a5f 0%, #24466f 100%);
  border-bottom: 3px solid var(--orange, #e87a2e);
}
.faqc__mark {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange, #e87a2e); color: #fff; font: 800 14px/1 Inter, sans-serif; letter-spacing: 0.02em;
}
.faqc__head-text { flex: 1; min-width: 0; }
.faqc__head-text strong { display: block; font-size: 15px; line-height: 1.2; }
.faqc__head-text span { display: block; font-size: 12px; opacity: 0.8; margin-top: 3px; line-height: 1.35; }
.faqc__hbtn { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; opacity: 0.85; }
.faqc__hbtn svg { width: 20px; height: 20px; }
.faqc__hbtn:hover, .faqc__hbtn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); opacity: 1; }
.faqc__hbtn:focus-visible, .faqc__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Past chats list: replaces the conversation area while open. */
.faqc__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; background: #f8fafc; }
.faqc__list[hidden] { display: none; }
.faqc.is-list .faqc__log, .faqc.is-list .faqc__chips, .faqc.is-list .faqc__form, .faqc.is-list .faqc__note { display: none; }
.faqc__newchat { display: block; width: 100%; margin: 0 0 10px; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--orange, #e87a2e); color: #fff; font: 700 14px/1 Inter, sans-serif; cursor: pointer; text-align: center; }
.faqc__newchat:hover { background: var(--orange-hover, #d46a20); }
.faqc__empty { margin: 14px 4px; font-size: 13px; color: #64748b; text-align: center; }
.faqc__item { display: flex; align-items: stretch; gap: 4px; margin-bottom: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.faqc__item.is-active { border-color: var(--orange, #e87a2e); }
.faqc__item-open { all: unset; cursor: pointer; flex: 1; min-width: 0; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.faqc__item-open:hover { background: #fff7ed; }
.faqc__item-title { font-weight: 700; font-size: 14px; color: #1e3a5f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faqc__item-meta { font-size: 11px; color: #94a3b8; }
.faqc__item-snip { font-size: 12.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faqc__item-del { all: unset; cursor: pointer; width: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #94a3b8; }
.faqc__item-del:hover { color: #c2410c; background: #fff1e6; }
.faqc__close { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: #fff; opacity: 0.85; }
.faqc__close:hover { background: rgba(255, 255, 255, 0.14); opacity: 1; }

/* Messages. The log fills the space between the header and the input row and scrolls. */
.faqc__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 14px 10px; background: #f8fafc; display: flex; flex-direction: column; gap: 12px; }
/* Messages gather at the bottom, chat style, so an empty window does not read as blank. */
.faqc__log > :first-child { margin-top: auto; }
.faqc__head, .faqc__chips, .faqc__form, .faqc__note { flex-shrink: 0; }
.faqc__row { display: flex; gap: 8px; align-items: flex-end; }
.faqc__row--user { justify-content: flex-end; }
.faqc__avatar {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: #1e3a5f; color: #fff; font: 800 10px/1 Inter, sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
}
.faqc__msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; color: #0f172a; }
.faqc__msg--user { background: #1e3a5f; color: #fff; border-bottom-right-radius: 5px; }
.faqc__msg--bot { background: #fff; border: 1px solid #e2e8f0; border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.faqc__msg p { margin: 0 0 8px; }
.faqc__msg p:last-child { margin-bottom: 0; }
.faqc__msg ul, .faqc__msg ol { margin: 6px 0 8px 18px; padding: 0; }
.faqc__msg li { margin: 4px 0; }
.faqc__msg a { color: var(--orange, #e87a2e); font-weight: 600; text-decoration: none; }
.faqc__msg a:hover { text-decoration: underline; }
.faqc__msg strong { color: #1e3a5f; }
.faqc__msg table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 8px; }
.faqc__msg th, .faqc__msg td { padding: 6px 6px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.faqc__msg th { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; }
.faqc__msg td:last-child { white-space: nowrap; font-weight: 700; color: #1e3a5f; }

/* Answer card: question as the title, the FAQ body, then a footer row. */
.faqc__q { font-weight: 800; color: #1e3a5f; font-size: 14.5px; margin: 0 0 8px !important; padding-bottom: 8px; border-bottom: 1px solid #eef2f7; }
.faqc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #eef2f7; font-size: 12px; }
.faqc__foot a { font-weight: 700; }
.faqc__topic { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 3px 9px; }
.faqc__related { margin-top: 10px; font-size: 12.5px; color: #64748b; }
.faqc__related-label { display: block; margin-bottom: 4px; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.faqc__link { all: unset; cursor: pointer; display: block; color: #1e3a5f; font-weight: 600; padding: 3px 0; }
.faqc__link:hover { color: var(--orange, #e87a2e); }
.faqc__seat { font-size: 11px; font-weight: 700; color: #c2410c; background: #fff1e6; border-radius: 999px; padding: 2px 8px; margin-left: 4px; white-space: nowrap; }
.faqc__typing { color: #64748b; font-style: italic; }

/* Follow-up card: optional name and phone under the first answer. */
.faqc__row--card { align-items: flex-end; }
.faqc__card { flex: 1; max-width: 86%; margin: 0; padding: 12px 14px; border-radius: 16px; border-bottom-left-radius: 5px; background: #fff7ed; border: 1px solid #fdba74; display: grid; gap: 8px; }
.faqc__card-title { margin: 0; font-weight: 800; color: #9a3412; font-size: 14px; }
.faqc__card-text { margin: 0; font-size: 13px; color: #7c2d12; line-height: 1.45; }
.faqc__card input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #fdba74; border-radius: 10px; font: 400 14px/1.3 Inter, sans-serif; color: #0f172a; background: #fff; }
.faqc__card input:focus { outline: 2px solid var(--orange, #e87a2e); border-color: transparent; }
.faqc__card-actions { display: flex; gap: 8px; align-items: center; }
.faqc__card-actions .faqc__send { padding: 10px 16px; }
.faqc__card-skip { all: unset; cursor: pointer; font: 600 13px/1 Inter, sans-serif; color: #9a3412; padding: 8px 10px; border-radius: 8px; }
.faqc__card-skip:hover { background: #ffedd5; }
.faqc__card-msg { margin: 0; font-size: 12.5px; color: #9a3412; min-height: 1em; }

/* Suggested questions: wrapping pills under the conversation. */
.faqc__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 12px; background: #f8fafc; }
.faqc__chips[hidden] { display: none; }
.faqc__chip { cursor: pointer; border: 1px solid #cbd5e1; background: #fff; color: #1e3a5f; font: 600 12.5px/1.2 Inter, sans-serif; padding: 8px 12px; border-radius: 999px; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.faqc__chip:hover { border-color: var(--orange, #e87a2e); color: var(--orange, #e87a2e); background: #fff7ed; }

/* Input row. */
.faqc__form { display: flex; gap: 8px; padding: 12px 14px 14px; background: #fff; border-top: 1px solid #e2e8f0; }
.faqc__form input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 12px; font: 400 14px/1.3 Inter, sans-serif; color: #0f172a; background: #fff; }
.faqc__form input::placeholder { color: #94a3b8; }
.faqc__form input:focus { outline: 2px solid var(--orange, #e87a2e); border-color: transparent; }
.faqc__send { padding: 0 18px; border: 0; border-radius: 12px; background: var(--orange, #e87a2e); color: #fff; font: 700 14px/1 Inter, sans-serif; cursor: pointer; }
.faqc__send:hover { background: var(--orange-hover, #d46a20); }
.faqc__note { margin: 0; padding: 0 14px 10px; font-size: 11px; color: #94a3b8; background: #fff; text-align: center; }

@media (max-width: 520px) {
  .faqc { right: 0; bottom: 0; left: 0; transition: none; }
  .faqc__bubble { position: fixed; right: 14px; bottom: calc(14px + var(--faqc-lift) + env(safe-area-inset-bottom, 0px)); transition: bottom 0.2s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease, background 0.18s ease; }
  .faqc__panel { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .faqc__form { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}