/* ============================================================
   PHL AI Chatbot Widget — Planet Home Lending
   ASP.NET Integration Ready
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --phl-green-900: #1b5e20;
  --phl-green-700: #2e7d32;
  --phl-green-500: #4caf50;
  --phl-green-300: #81c784;
  --phl-blue-900:  #0d1f4e;
  --phl-blue-700:  #1565c0;
  --phl-blue-500:  #1976d2;
  --phl-blue-300:  #64b5f6;
  --phl-grad:      linear-gradient(135deg, #2e7d32 0%, #1565c0 100%);
  --phl-grad-btn:  linear-gradient(90deg,  #3ca43c 0%, #1565c0 100%);
  --phl-grad-user: linear-gradient(135deg, #43a047 0%, #1976d2 100%);
  --phl-grad-ai:   linear-gradient(135deg, #2e7d32 0%, #1565c0 100%);
  --phl-shadow-sm: 0 2px 8px rgba(0,0,0,.12);
  --phl-shadow-md: 0 8px 28px rgba(0,0,0,.18);
  --phl-shadow-lg: 0 20px 60px rgba(0,0,0,.28);
  --phl-radius:    20px;
  --phl-font-body: 'DM Sans', sans-serif;
  --phl-font-head: 'Nunito', sans-serif;
  --phl-z-fab:     9990;
  --phl-z-widget:  9991;
  --phl-z-modal:   9992;
  --phl-z-toast:   9999;
}

/* ── FAB Button ─────────────────────────────────────────── */
#phl-fab {
  position: fixed;
  /* Bottom-right corner, same distance from edge on both axes */
  bottom: 24px;
  right:  24px;
  width:  64px;
  height: 64px;
  border-radius: 50%;
  background: var(--phl-grad);
  border: none;
  cursor: pointer;
  z-index: var(--phl-z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(21,101,192,.45), 0 2px 8px rgba(46,125,50,.35);
  transition: transform .25s cubic-bezier(.175,.885,.32,1.275),
              box-shadow .25s ease;
  animation: phl-fab-enter .5s cubic-bezier(.175,.885,.32,1.275) both;
}
#phl-fab:hover {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 12px 36px rgba(21,101,192,.55), 0 4px 12px rgba(46,125,50,.4);
}
#phl-fab.open { transform: scale(1.05); }

#phl-fab svg { width: 30px; height: 30px; fill: white; transition: transform .25s; }

/* Tooltip label that appears on hover above the FAB */
#phl-fab::before {
  content: 'Open PHL Chat';
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--phl-blue-900);
  color: white;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--phl-font-body);
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
#phl-fab::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  right: 20px;
  border: 5px solid transparent;
  border-top-color: var(--phl-blue-900);
  opacity: 0;
  transition: opacity .2s;
}
#phl-fab:hover::before,
#phl-fab:hover::after { opacity: 1; transform: translateY(0); }
/* Hide tooltip when widget is open */
#phl-fab.open::before,
#phl-fab.open::after { display: none; }

/* Notification badge */
#phl-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  background: #e53935;
  border-radius: 50%;
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--phl-font-body);
  border: 2px solid white;
  animation: phl-pulse-badge 2s ease-in-out infinite;
}
#phl-badge.hidden { display: none; }

@keyframes phl-pulse-badge {
  0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(229,57,53,0); }
}

/* ── Widget Container ───────────────────────────────────── */
#phl-widget {
  position: fixed;

  /*
   * POSITIONING LOGIC — side-by-side with FAB, bottom-aligned:
   *   FAB:    right=24px, width=64px  → FAB left edge = 24+64 = 88px from right
   *   Gap:    12px between widget and FAB
   *   Widget: right = 88 + 12 = 100px from the right edge of viewport
   *
   *   Bottom = same as FAB bottom (24px) so both sit on the same baseline
   */
  right:  100px;   /* sits to the LEFT of the FAB with 12px gap */
  bottom: 24px;    /* bottom-aligned with the FAB */

  width:  525px;
  /* 
   * Height: use dvh (dynamic viewport height) so the widget never 
   * goes above the top of the browser window.
   * Max = viewport - bottom offset (24px) - small top padding (16px)
   */
  height: min(680px, calc(100dvh - 24px - 16px));

  border-radius: 28px;
  /* overflow: hidden removed — modals are direct children and must NOT be clipped.
     Each .phl-screen handles its own overflow clipping instead. */
  overflow: visible;
  z-index: var(--phl-z-widget);
  box-shadow: var(--phl-shadow-lg), 0 0 0 1px rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  font-family: var(--phl-font-body);

  /* Animation: scale up from bottom-right corner (where FAB is) */
  transform: scale(.85) translateY(20px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.175,.885,.32,1.275),
              opacity .3s ease;
  background: #f4f6f9;
}
#phl-widget.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

@keyframes phl-fab-enter {
  from { transform: scale(0) rotate(-90deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}

/* ── Screens ────────────────────────────────────────────── */
.phl-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px; /* match widget border-radius to keep rounded corners */
    transition: opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
.phl-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(30px);
}
.phl-screen.slide-left { transform: translateX(-30px); }

/* ── Auth Screens ───────────────────────────────────────── */
.phl-auth-bg {
  background: var(--phl-grad);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 28px 36px;
  overflow-y: auto;
  position: relative;
}

/* ── Auth Screen Close Button ───────────────────────────── */
.phl-auth-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .15s;
  z-index: 10;
}
.phl-auth-close-btn:hover {
  background: rgba(255,255,255,.32);
  transform: rotate(90deg);
}
.phl-auth-close-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.phl-bot-avatar {
  width: 84px;
  height: 84px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.phl-bot-avatar svg { width: 46px; height: 46px; }

.phl-auth-greeting {
  color: white;
  font-family: var(--phl-font-head);
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 24px;
}

.phl-auth-card {
  background: rgba(255,255,255,.97);
  border-radius: 22px;
  padding: 24px 20px 20px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,.22);

}

.phl-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1.5px solid #dde3ec;
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.phl-field:focus-within {
  border-color: var(--phl-green-500);
  box-shadow: 0 0 0 3px rgba(76,175,80,.12);
}
.phl-field svg { flex-shrink: 0; color: #90a0b4; width: 18px; height: 18px; }
.phl-field input {
  border: none;
  outline: none;
  font-size: 14px;
  font-family: var(--phl-font-body);
  width: 100%;
  color: #1a2640;
  background: transparent;
}
.phl-field input::placeholder { color: #a0aec0; }

.phl-otp-row { display: flex; gap: 8px; align-items: center; }
.phl-otp-row .phl-field { flex: 1; margin-bottom: 0; }
.phl-send-otp {
  padding: 13px 11px;
  background: var(--phl-grad-btn);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--phl-font-body);
  transition: opacity .2s, transform .15s;
  flex-shrink: 0;
}
.phl-send-otp:hover { opacity: .9; transform: scale(1.02); }
.phl-send-otp:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.phl-btn-primary {
  width: 100%;
  padding: 15px;
  background: var(--phl-grad-btn);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--phl-font-body);
  margin-top: 4px;
  margin-bottom: 10px;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(21,101,192,.3);
  letter-spacing: .3px;
}
.phl-btn-primary:hover {
  opacity: .93;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(21,101,192,.38);
}
.phl-btn-primary:active { transform: translateY(0); }

.phl-btn-secondary {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--phl-blue-700);
  border: 2px solid var(--phl-blue-700);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--phl-font-body);
  transition: all .2s;
}
.phl-btn-secondary:hover { background: var(--phl-blue-700); color: white; }

.phl-btn-guest {
  width: 100%;
  padding: 13px;
  background: transparent;
  color: #718096;
  border: 2px dashed #cbd5e0;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--phl-font-body);
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.phl-btn-guest:hover { background: #f7fafc; border-color: #a0aec0; color: #4a5568; }

.phl-auth-switch {
  text-align: center;
  color: #6b7c99;
  font-size: 13px;
  margin-top: 8px;
}
.phl-auth-switch a {
  color: var(--phl-blue-700);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.phl-auth-switch a:hover { text-decoration: underline; }

.phl-error {
  color: #e53935;
  font-size: 12px;
  text-align: center;
  margin-top: -6px;
  margin-bottom: 8px;
  min-height: 18px;
  font-weight: 500;
}

.phl-logo-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  flex-shrink: 0;
}
.phl-logo-icon-sm {
  width: 40px; height: 40px;
  background: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: var(--phl-shadow-sm);
}
.phl-logo-name { color: white; font-family: var(--phl-font-head); font-size: 14px; font-weight: 800; line-height: 1.1; }
.phl-logo-tag  { color: #a5d6a7; font-size: 9px; font-weight: 700; letter-spacing: .8px; }

/* ── OTP Timer ──────────────────────────────────────────── */
.phl-otp-timer { font-size: 11px; color: #6b7c99; margin-top: 4px; margin-bottom: 8px; text-align: right; }
.phl-otp-timer span { color: var(--phl-blue-700); font-weight: 700; }

/* ── Chat Header ────────────────────────────────────────── */
.phl-chat-header {
  background: var(--phl-grad);
  padding: 18px 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}
.phl-chat-header-left { display: flex; align-items: center; gap: 12px; }
.phl-hdr-avatar {
  width: 46px; height: 46px;
  background: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.35);
}
.phl-hdr-avatar svg { width: 26px; height: 26px; }
.phl-hdr-title { color: white; font-family: var(--phl-font-head); font-size: 16px; font-weight: 800; }
.phl-hdr-sub { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.75); font-size: 11px; margin-top: 1px; }
.phl-online-dot { width: 7px; height: 7px; background: #76ff03; border-radius: 50%; animation: phl-blink 1.8s ease-in-out infinite; }
@keyframes phl-blink { 0%,100%{opacity:1} 50%{opacity:.35} }

.phl-hdr-actions { display: flex; align-items: center; gap: 8px; }
.phl-hdr-btn {
  background: rgba(255,255,255,.18);
  border: none;
  color: white;
  border-radius: 10px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--phl-font-body);
  transition: background .2s;
}
.phl-hdr-btn:hover { background: rgba(255,255,255,.28); }
.phl-end-session-btn {
  background: rgba(229,57,53,.25) !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
}
.phl-end-session-btn:hover { background: rgba(229,57,53,.45) !important; }
.phl-hdr-dots { display: flex; gap: 4px; }
.phl-hdr-dots span { width: 6px; height: 6px; background: rgba(255,255,255,.65); border-radius: 50%; }

/* ── Header Close Button ────────────────────────────────── */
.phl-hdr-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.phl-hdr-close-btn:hover {
  background: rgba(255,255,255,.3);
  transform: rotate(90deg);
}
.phl-hdr-close-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* ── Chat Messages ──────────────────────────────────────── */
.phl-chat-messages {
  flex: 1;
  /* min-height:0 is CRITICAL for flex children to scroll correctly */
  min-height: 0;
  overflow-y: auto;
  /* Never let messages spill horizontally out of the widget */
  overflow-x: hidden;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
  background: #f4f6f9;
  /* Ensure messages don't escape widget width */
  width: 100%;
  min-width: 0;
}
.phl-chat-messages::-webkit-scrollbar { width: 4px; }
.phl-chat-messages::-webkit-scrollbar-thumb { background: #c8d2e0; border-radius: 4px; }

.phl-msg-row { display: flex; gap: 8px; align-items: flex-end; animation: phl-msg-in .3s ease both; }
.phl-msg-row.user { flex-direction: row-reverse; }
@keyframes phl-msg-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.phl-msg-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: white;
  border: 2px solid var(--phl-green-500);
  display: flex; align-items: center; justify-content: center;
}
.phl-msg-avatar svg { width: 16px; height: 16px; }
.phl-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.phl-bubble {
  max-width: 80%;
  min-width: 0;
  border-radius: 18px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  position: relative;
  /* Prevent long URLs or words from breaking widget layout */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}
.phl-bubble.ai {
  background: var(--phl-grad-ai);
  color: white;
  border-bottom-left-radius: 4px;
}
.phl-bubble.user {
  background: var(--phl-grad-user);
  color: white;
  border-bottom-right-radius: 4px;
}
.phl-bubble-meta { font-size: 10.5px; color: rgba(255,255,255,.6); margin-bottom: 3px; font-weight: 500; }

/* ── Rich Cards inside Bubble ───────────────────────────── */
.phl-card {
  background: white;
  border-radius: 14px;
  padding: 14px;
  margin-top: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.13);
  color: #1a2640;
}
.phl-card-title { font-family: var(--phl-font-head); font-weight: 800; font-size: 15px; color: #1a2640; margin-bottom: 4px; }
.phl-card-sub   { font-size: 12px; color: #6b7c99; margin-bottom: 10px; }

/* Mortgage Calculator */
.phl-calc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.phl-calc-label {
  background: var(--phl-blue-900);
  color: white;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  flex: 1;
}
.phl-calc-val {
  background: var(--phl-green-500);
  color: white;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  min-width: 72px;
  text-align: center;
  line-height: 1.2;
}
.phl-calc-slider {
  width: 100%;
  accent-color: var(--phl-green-500);
  margin: 4px 0 8px;
  cursor: pointer;
}
.phl-term-btns { display: flex; gap: 5px; margin: 6px 0; }
.phl-term-btn {
  flex: 1;
  padding: 7px 4px;
  border-radius: 9px;
  border: 1.5px solid #d0d8e8;
  background: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #4a5568;
  font-family: var(--phl-font-body);
  transition: all .2s;
}
.phl-term-btn.active { background: var(--phl-grad-btn); color: white; border-color: transparent; }
.phl-rate-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.phl-rate-lbl { background: #edf2f7; border-radius: 10px; padding: 8px 12px; font-size: 12px; color: #4a5568; flex: 1; }
.phl-rate-val { background: #ebf4ff; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 800; color: var(--phl-blue-700); }
.phl-calc-result {
  background: var(--phl-grad);
  color: white;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 6px;
  display: none;
}
.phl-calc-result .amount { font-size: 22px; font-family: var(--phl-font-head); display: block; margin-top: 2px; }

/* Loan Type Cards */
.phl-loan-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.phl-loan-card {
  flex: 1;
  min-width: 115px;
  background: var(--phl-grad-ai);
  border-radius: 14px;
  padding: 14px 12px;
  color: white;
}
.phl-loan-icon { font-size: 22px; margin-bottom: 5px; }
.phl-loan-name { font-weight: 800; font-size: 13px; font-family: var(--phl-font-head); margin-bottom: 5px; }
.phl-loan-feat { font-size: 11px; opacity: .85; padding-left: 12px; }
.phl-loan-feat li { margin-bottom: 2px; }

/* Accordion */
.phl-accordion { display: flex; flex-direction: column; gap: 5px; }
.phl-acc-item { border-radius: 10px; overflow: hidden; }
.phl-acc-head {
  background: var(--phl-blue-700);
  color: white;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  user-select: none;
  transition: background .2s;
}
.phl-acc-head:hover { background: var(--phl-blue-500); }
.phl-acc-arrow { transition: transform .25s; }
.phl-acc-item.open .phl-acc-arrow { transform: rotate(180deg); }
.phl-acc-body {
  background: #ebf4ff;
  padding: 0 13px;
  font-size: 12px;
  color: #2d3748;
  line-height: 1.55;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s;
}
.phl-acc-item.open .phl-acc-body { max-height: 200px; padding: 11px 13px; }

/* Steps / Eligibility */
.phl-steps { display: flex; flex-direction: column; gap: 8px; }
.phl-step-row { display: flex; align-items: flex-start; gap: 10px; }
.phl-step-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  font-weight: 700;
}
.phl-step-icon.done    { background: var(--phl-green-500); color: white; }
.phl-step-icon.current { background: var(--phl-blue-500); color: white; }
.phl-step-icon.pending { background: rgba(255,255,255,.25); color: rgba(255,255,255,.6); border: 2px solid rgba(255,255,255,.3); }
.phl-step-label { font-weight: 700; color: white; font-size: 13px; margin-bottom: 5px; }
.phl-step-connector { width: 2px; background: rgba(255,255,255,.25); height: 12px; margin-left: 17px; }
.phl-step-input {
  width: 100%;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px;
  padding: 9px 13px;
  color: white;
  font-size: 13px;
  font-family: var(--phl-font-body);
  outline: none;
  transition: border-color .2s;
}
.phl-step-input::placeholder { color: rgba(255,255,255,.45); }
.phl-step-input:focus { border-color: rgba(255,255,255,.65); }

/* Agent / Map */
.phl-map-card { border-radius: 13px; overflow: hidden; background: white; }
.phl-map-visual {
  height: 110px;
  background: linear-gradient(135deg, #c8e6c9 0%, #bbdefb 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  position: relative;
}
.phl-map-info { padding: 12px 13px; }
.phl-map-name { font-weight: 800; font-size: 14px; color: #1a2640; }
.phl-map-dist { font-size: 11.5px; color: #6b7c99; margin-bottom: 9px; }
.phl-map-btns { display: flex; gap: 7px; }
.phl-map-btn {
  flex: 1;
  padding: 9px;
  background: var(--phl-blue-900);
  color: white;
  border: none;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--phl-font-body);
  transition: opacity .2s;
}
.phl-map-btn:hover { opacity: .85; }

/* Originator Card */
.phl-orig-card {
  background: white;
  border-radius: 14px;
  padding: 13px;
}
.phl-orig-inner { display: flex; gap: 12px; align-items: flex-start; }
.phl-orig-photo {
  width: 66px; height: 66px;
  border-radius: 12px;
  background: linear-gradient(135deg,#c8e6c9,#bbdefb);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}
.phl-orig-name { font-weight: 800; font-size: 15px; color: #1a2640; }
.phl-orig-title { font-size: 11.5px; color: #6b7c99; margin-bottom: 3px; }
.phl-orig-stars { color: #f59e0b; font-size: 13px; }
.phl-orig-spec  { font-size: 11px; color: #4a5568; margin-top: 2px; }
.phl-connect-btn {
  width: 100%;
  padding: 11px;
  background: var(--phl-blue-900);
  color: white;
  border: none;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  font-family: var(--phl-font-body);
  transition: opacity .2s, transform .15s;
}
.phl-connect-btn:hover { opacity: .88; transform: translateY(-1px); }

/* Agent live card */
.phl-agent-card { background: white; border-radius: 13px; padding: 13px; }
.phl-agent-online { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #1a2640; margin-bottom: 8px; }
.phl-agent-live-dot { width: 8px; height: 8px; background: var(--phl-green-500); border-radius: 50%; animation: phl-blink 1.5s infinite; }
.phl-agent-map-thumb {
  height: 75px;
  background: linear-gradient(135deg,#c8e6c9,#bbdefb);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  margin-bottom: 9px;
}

/* ── Credit Guide (Wireframe p.20) ───────────────────────── */
.phl-credit-guide-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* White info card — title + subtitle */
.phl-credit-guide-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.phl-credit-guide-title {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 4px;
  letter-spacing: -.2px;
}
.phl-credit-guide-sub {
  font-size: 12px;
  color: #555;
  line-height: 1.4;
}

/* Three icon tiles row */
.phl-credit-guide-tiles {
  display: flex;
  gap: 8px;
}
.phl-cg-tile {
  flex: 1;
  background: var(--phl-grad-ai);
  border-radius: 14px;
  padding: 14px 6px 12px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.phl-cg-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.phl-cg-tile:active { transform: scale(.97); }
.phl-cg-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,.35);
}
.phl-cg-lbl {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  opacity: .95;
}

/* ── Quick Replies ───────────────────────────────────────── */
/* Outer strip: fixed height, never overflows widget width */
.phl-quick-replies {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;          /* clips children — key fix */
  position: relative;
  background: #e8edf4;
  border-top: 1px solid #d4dde8;
  border-bottom: 1px solid #d4dde8;
  padding: 8px 12px 6px;
}
/* Right-edge fade hint so user knows it scrolls */
.phl-quick-replies::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, #e8edf4);
  pointer-events: none;
  z-index: 1;
}
/* Inner row: this is the actual horizontally-scrolling container */
.phl-quick-replies-inner {
  display: flex;
  flex-wrap: nowrap;         /* never wrap to a second line */
  gap: 7px;
  overflow-x: auto;          /* horizontal scroll lives HERE, not on parent */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  width: 100%;
}
.phl-quick-replies-inner::-webkit-scrollbar { display: none; }

.phl-qr-chip {
  white-space: nowrap;       /* text never wraps inside a chip */
  flex-shrink: 0;            /* chip never squishes */
  background: white;
  border: 1.5px solid var(--phl-green-500);
  color: var(--phl-green-700);
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--phl-font-body);
  transition: all .2s;
  box-shadow: var(--phl-shadow-sm);
}
.phl-qr-chip:hover { background: var(--phl-green-700); color: white; }

/* ── Chat Input ─────────────────────────────────────────── */
.phl-chat-input-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px 14px;
  background: var(--phl-grad);
  flex-shrink: 0;
}
.phl-chat-input {
  flex: 1;
  background: white;
  border: none;
  border-radius: 24px;
  padding: 12px 18px;
  font-size: 13.5px;
  font-family: var(--phl-font-body);
  outline: none;
  color: #1a2640;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.phl-chat-input::placeholder { color: #a0aec0; }
.phl-send-btn {
  width: 44px; height: 44px;
  background: var(--phl-green-500);
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 3px 10px rgba(76,175,80,.4);
}
.phl-send-btn:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(76,175,80,.5); }
.phl-send-btn svg { width: 20px; height: 20px; fill: white; }

/* ── Typing Indicator ───────────────────────────────────── */
.phl-typing { display: flex; gap: 5px; align-items: center; padding: 8px 12px; }
.phl-typing span {
  width: 7px; height: 7px;
  background: rgba(255,255,255,.7);
  border-radius: 50%;
  animation: phl-typing-bounce 1.2s ease-in-out infinite;
}
.phl-typing span:nth-child(2) { animation-delay: .2s; }
.phl-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes phl-typing-bounce {
  0%,80%,100% { transform: scale(.75); opacity: .5; }
  40%          { transform: scale(1.2); opacity: 1; }
}

/* ── Modal Overlay ──────────────────────────────────────── */
.phl-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,31,78,.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--phl-z-modal);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.phl-modal-overlay.open { opacity: 1; pointer-events: all; }
.phl-modal-card {
  background: white;
  border-radius: 22px;
  padding: 24px 20px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  border: 2px solid var(--phl-green-300);
  transform: scale(.92) translateY(16px);
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.phl-modal-overlay.open .phl-modal-card { transform: scale(1) translateY(0); }
.phl-modal-title { font-family: var(--phl-font-head); font-size: 17px; font-weight: 800; color: #1a2640; margin-bottom: 14px; }

.phl-success-card {
  background: white;
  border-radius: 22px;
  padding: 30px 20px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  border: 2px solid var(--phl-green-300);
  transform: scale(.92);
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.phl-modal-overlay.open .phl-success-card { transform: scale(1); }
.phl-success-icon { font-size: 52px; margin-bottom: 10px; }
.phl-success-tag {
  background: rgba(76,175,80,.12);
  color: var(--phl-green-700);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 10px;
}
.phl-success-title { font-family: var(--phl-font-head); color: var(--phl-blue-700); font-size: 20px; font-weight: 800; }
.phl-modal-cancel {
  width: 100%;
  background: none;
  border: none;
  color: #a0aec0;
  cursor: pointer;
  margin-top: 8px;
  font-size: 13px;
  font-family: var(--phl-font-body);
  padding: 6px;
}
.phl-modal-cancel:hover { color: #6b7c99; }

/* ── Welcome Banner ─────────────────────────────────────── */
.phl-welcome-banner {
  background: var(--phl-grad);
  border-radius: 14px;
  padding: 14px 16px;
  color: white;
  text-align: center;
}
.phl-welcome-banner h3 { font-family: var(--phl-font-head); font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.phl-welcome-banner p  { font-size: 12px; opacity: .82; }

/* ── Toast ──────────────────────────────────────────────── */
#phl-toast {
  position: fixed;
  bottom: 108px;
  right: 28px;
  max-width: 360px;
  background: #1b5e20;
  color: white;
  border-radius: 14px;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--phl-font-body);
  z-index: var(--phl-z-toast);
  transform: translateY(20px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.175,.885,.32,1.275), opacity .3s;
  box-shadow: var(--phl-shadow-md);
  pointer-events: none;
}
#phl-toast.show { transform: translateY(0); opacity: 1; }

/* ── Utility ────────────────────────────────────────────── */
.phl-mt8  { margin-top: 8px; }
.phl-mb8  { margin-bottom: 8px; }
.phl-gap6 { gap: 6px; }

/* ── Responsive ─────────────────────────────────────────── */
/* ── Responsive — medium screens ───────────────────────── */
@media (max-width: 768px) {
  /* On tablets, shrink widget width a bit so it fits */
  #phl-widget {
    width: min(380px, calc(100vw - 120px));
    right: 100px;
    bottom: 24px;
  }
}

/* ── Responsive — mobile phones ────────────────────────── */
@media (max-width: 520px) {
  /*
   * On phones there isn't enough horizontal space for the widget
   * to sit beside the FAB. Switch to full-width panel above FAB.
   */
  #phl-widget {
    /* Full width, small margin on left & right */
    width:  calc(100vw - 24px);
    /* Back to above-the-FAB layout on phones */
    right:  12px;
    bottom: 96px; /* FAB height (64) + gap (12) + FAB bottom (24) = 100, round to 96 */
    height: calc(100dvh - 110px);
    border-radius: 22px;
    /* Scale from bottom-right still looks good */
    transform-origin: bottom right;
  }
  #phl-fab {
    right:  16px;
    bottom: 16px;
    /* No tooltip on mobile — too small */
  }
  #phl-fab::before,
  #phl-fab::after { display: none; }
  #phl-toast {
    right: 12px;
    max-width: calc(100vw - 24px);
    bottom: 96px;
  }
}

/* ── Close buttons ──────────────────────────────────────── */

/* Close button on chat header */
.phl-hdr-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, transform .15s;
  flex-shrink: 0;
  margin-left: 2px;
}
.phl-hdr-close-btn:hover {
  background: rgba(255,255,255,.35);
  transform: scale(1.12);
}

/* Close button on login / signup auth screens */
.phl-auth-bg { position: relative; }

.phl-auth-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, transform .15s;
  z-index: 10;
}
.phl-auth-close-btn:hover {
  background: rgba(255,255,255,.45);
  transform: scale(1.12);
}