/* ==========================================================================
   PFI UI FIX PACK v1  —  header alignment + professional chat widget
   Loaded after the build CSS. Additive only; no existing file is modified.
   ========================================================================== */

/* ---------- 1. HEADER: single-row, vertically centred, search included ---- */
@media (min-width: 992px) {
  .navbar-pfi .container-xl {
    flex-wrap: nowrap;          /* was wrap -> nav dropped below the logo */
    align-items: center;
    gap: 8px;
  }
  .navbar-pfi .navbar-brand {
    margin-right: 1rem;
    flex: 0 0 auto;
  }
  .navbar-pfi .navbar-collapse {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .navbar-pfi .navbar-nav {
    flex-wrap: nowrap;
    align-items: center;
  }
  .navbar-pfi .nav-item { white-space: nowrap; }
  .navbar-pfi .nav-link { display: flex; align-items: center; }

  .navbar-pfi .nav-cta {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: 14px !important;
    margin-top: 0 !important;
  }
  /* equal, perfectly aligned circular controls */
  .navbar-pfi .site-search-toggle,
  .navbar-pfi .btn-call {
    width: 40px; height: 40px; min-height: 40px; padding: 0; flex: 0 0 auto;
  }
  .navbar-pfi .btn-gold {
    padding: 10px 20px; font-size: .88rem; white-space: nowrap; line-height: 1.2;
  }
}

/* 992–1199: tight but still one row */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-pfi .navbar-brand img,
  .navbar-pfi.scrolled .navbar-brand img { height: 40px; }
  .navbar-pfi .nav-link { font-size: .8rem; padding: 10px 6px !important; }
  .navbar-pfi .nav-cta { gap: 6px; margin-left: 8px !important; }
  .navbar-pfi .site-search-toggle,
  .navbar-pfi .btn-call { width: 36px; height: 36px; min-height: 36px; }
  .navbar-pfi .btn-gold { padding: 9px 14px; font-size: .82rem; }
}

/* 1200–1399 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-pfi .navbar-brand img { height: 46px; }
  .navbar-pfi.scrolled .navbar-brand img { height: 42px; }
  .navbar-pfi .nav-link { font-size: .86rem; padding: 10px 10px !important; }
}

/* 1400+ : comfortable */
@media (min-width: 1400px) {
  .navbar-pfi .navbar-brand img { height: 54px; }
  .navbar-pfi.scrolled .navbar-brand img { height: 48px; }
  .navbar-pfi .nav-link { font-size: .9rem; padding: 10px 13px !important; }
}

/* logo can never blow the row out */
.navbar-pfi .navbar-brand img { width: auto; max-width: 240px; }

/* search panel stays under the button, never clipped */
@media (min-width: 992px) {
  .navbar-pfi .site-search-panel { top: calc(100% + 12px); right: 0; }
}

/* mobile header: search button visible and aligned next to Apply Now */
@media (max-width: 991.98px) {
  .navbar-pfi .nav-cta {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 10px; flex-wrap: wrap;
  }
  .navbar-pfi .site-search-toggle { width: 42px; height: 42px; }
}

/* ---------- 2. FLOATING BUTTONS -> LEFT SIDE ----------------------------- */
.fab-stack { left: 20px; right: auto; align-items: flex-start; }
@media (max-width: 767.98px) { .fab-stack { left: 16px; right: auto; bottom: 86px; } }

/* ---------- 3. CHAT WIDGET: proper, professional panel ------------------- */
/* launcher: bottom-right, on its own, clearly a chat button */
.pfi-chat-launcher {
  right: 24px; left: auto; bottom: 24px;
  width: 60px; height: 60px; font-size: 1.35rem;
  background: var(--navy-900);
  box-shadow: 0 10px 30px rgba(10, 37, 64, .28);
  z-index: 1200;
}
.pfi-chat-launcher.is-open { background: var(--blue-700); }
@media (max-width: 767.98px) {
  .pfi-chat-launcher { right: 16px; bottom: 86px; width: 56px; height: 56px; }
}

/* panel: real size, real layout, nothing squeezed */
.pfi-chat-panel {
  right: 24px; left: auto;
  bottom: 96px;
  width: min(400px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 120px));
  max-height: none;
  min-height: 380px;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 37, 64, .26);
  overflow: hidden;
  z-index: 1200;
}

/* header */
.pfi-chat-head {
  padding: 16px 18px;
  align-items: center;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--blue-700, #0b5aa6) 100%);
}
.pfi-chat-head h2 { font-size: 1.02rem; line-height: 1.25; }
.pfi-chat-head p { font-size: .75rem; opacity: .9; }
.pfi-chat-x { font-size: 1.05rem; line-height: 1; opacity: .9; }
.pfi-chat-x:hover { opacity: 1; background: rgba(255, 255, 255, .14); }

/* conversation area — this is the only thing that scrolls */
.pfi-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 16px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pfi-chat-log::-webkit-scrollbar { width: 6px; }
.pfi-chat-log::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.pfi-msg { max-width: 82%; margin-bottom: 14px; }
.pfi-msg p { font-size: .88rem; box-shadow: 0 1px 2px rgba(10, 37, 64, .06); }
.pfi-msg-bot p, .pfi-msg-agent p { border-radius: 14px 14px 14px 4px; }
.pfi-msg-visitor p { border-radius: 14px 14px 4px 14px; }

/* quick replies: wrap like every real chatbot, no sideways scrollbar */
.pfi-chat-chips {
  flex-wrap: wrap;
  overflow-x: visible;
  gap: 8px;
  padding: 10px 14px;
  max-height: 80px;
  overflow-y: auto;
}
.pfi-chat-chips button {
  white-space: normal;
  font-size: .76rem;
  padding: 6px 11px;
  min-height: 32px;
  line-height: 1.3;
}

/* composer pinned to the bottom */
.pfi-chat-input { padding: 12px 14px; align-items: center; }
.pfi-chat-input input { font-size: .88rem; }
.pfi-chat-note {
  padding: 0 14px 10px;
  font-size: .66rem;
  max-height: 1.6em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* mobile: full-height sheet, standard app behaviour */
@media (max-width: 575.98px) {
  .pfi-chat-panel {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    height: 92vh; height: 92dvh;
    max-height: none;
    border-radius: 18px 18px 0 0;
  }
}