/* Prerna's Assistant — widget styling. Brand: navy #1A365D, gold #F6AD55. */
#prerna-chatbot-root {
  --pk-navy: #1A365D;
  --pk-navy-deep: #0E1C34;
  --pk-gold: #F6AD55;
  --pk-gold-muted: #c9a96e;
  --pk-bg: #ffffff;
  --pk-bg-soft: #f6f8fb;
  --pk-text: #0f172a;
  --pk-text-muted: #64748b;
  --pk-border: #e5e7eb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Floating bubble ── (bottom:120px clears the reCAPTCHA v3 badge with margin;
     badge itself is at bottom-right, ~60px tall, and expands on hover) */
#prerna-chatbot-root .pk-chat-bubble {
  position: fixed; right: 20px; bottom: 120px; z-index: 2147483000;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--pk-navy); border: 3px solid var(--pk-gold);
  padding: 0; cursor: pointer;
  box-shadow: 0 8px 30px rgba(14, 28, 52, 0.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
#prerna-chatbot-root .pk-chat-bubble:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(14, 28, 52, 0.45); }
#prerna-chatbot-root .pk-chat-bubble img { width: 42px; height: auto; object-fit: contain; }
#prerna-chatbot-root .pk-chat-bubble-dot {
  position: absolute; top: 4px; right: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--pk-navy);
}

/* ── Chat panel ── (bottom:205 to clear the bubble at bottom:120 + 68px height) */
#prerna-chatbot-root .pk-chat-panel {
  position: fixed; right: 20px; bottom: 205px; z-index: 2147483001;
  width: 420px; max-width: calc(100vw - 40px); height: 620px; max-height: calc(100vh - 245px);
  background: var(--pk-bg); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(14, 28, 52, 0.28);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--pk-border);
  animation: pkChatIn .22s ease-out;
  transition: width .25s ease, height .25s ease;
}
/* Expanded: larger panel on desktop */
#prerna-chatbot-root .pk-chat-panel.pk-expanded {
  width: 800px; height: 840px;
  max-width: calc(100vw - 40px); max-height: calc(100vh - 245px);
}
@keyframes pkChatIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Header ── */
#prerna-chatbot-root .pk-chat-head {
  background: linear-gradient(135deg, var(--pk-navy) 0%, var(--pk-navy-deep) 100%);
  color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px;
}
#prerna-chatbot-root .pk-chat-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; padding: 4px; object-fit: contain;
  border: 2px solid var(--pk-gold);
}
#prerna-chatbot-root .pk-chat-titles { flex: 1; min-width: 0; }
#prerna-chatbot-root .pk-chat-title { font-weight: 600; font-size: 15px; line-height: 1.2; }
#prerna-chatbot-root .pk-chat-subtitle { font-size: 12px; color: var(--pk-gold); margin-top: 2px; }
#prerna-chatbot-root .pk-chat-clear,
#prerna-chatbot-root .pk-chat-expand,
#prerna-chatbot-root .pk-chat-close {
  background: transparent; border: 0; color: #fff; line-height: 1; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; opacity: .75;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, opacity .15s ease;
  font-family: inherit;
}
#prerna-chatbot-root .pk-chat-clear,
#prerna-chatbot-root .pk-chat-expand { font-size: 16px; }
#prerna-chatbot-root .pk-chat-close  { font-size: 26px; }
#prerna-chatbot-root .pk-chat-clear:hover,
#prerna-chatbot-root .pk-chat-expand:hover,
#prerna-chatbot-root .pk-chat-close:hover { background: rgba(255,255,255,.1); opacity: 1; }
/* Expand button is available on mobile too (mobile is NOT auto-fullscreen).
   Tapping it on mobile takes the panel fullscreen; tap again to collapse. */

/* ── Log ── */
#prerna-chatbot-root .pk-chat-log {
  flex: 1; overflow-y: auto; padding: 18px;
  background: var(--pk-bg-soft); display: flex; flex-direction: column; gap: 10px;
}
#prerna-chatbot-root .pk-msg { display: flex; gap: 8px; max-width: 90%; }
#prerna-chatbot-root .pk-msg-assistant { align-self: flex-start; }
#prerna-chatbot-root .pk-msg-user { align-self: flex-end; }
#prerna-chatbot-root .pk-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: #fff; padding: 3px;
  border: 1px solid var(--pk-border); flex-shrink: 0;
}
#prerna-chatbot-root .pk-msg-body {
  padding: 10px 14px; border-radius: 14px;
  font-size: var(--pk-msg-font-size, 14.5px); line-height: 1.5;
  color: var(--pk-text); word-wrap: break-word;
}
#prerna-chatbot-root .pk-msg-assistant .pk-msg-body {
  background: #fff; border: 1px solid var(--pk-border); border-top-left-radius: 4px;
}
#prerna-chatbot-root .pk-msg-user .pk-msg-body {
  background: var(--pk-navy); color: #fff; border-top-right-radius: 4px;
}
#prerna-chatbot-root .pk-msg-body a { color: var(--pk-gold); text-decoration: underline; }
#prerna-chatbot-root .pk-msg-user .pk-msg-body a { color: var(--pk-gold); }
#prerna-chatbot-root .pk-msg-typing .pk-msg-body { padding: 14px 16px; }
#prerna-chatbot-root .pk-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pk-text-muted); margin: 0 1px; animation: pkDot 1.2s infinite ease-in-out;
}
#prerna-chatbot-root .pk-dot:nth-child(2) { animation-delay: .15s; }
#prerna-chatbot-root .pk-dot:nth-child(3) { animation-delay: .3s; }
@keyframes pkDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

#prerna-chatbot-root .pk-chat-leadconf {
  align-self: center; text-align: center; font-size: 13px; color: #065f46;
  background: #d1fae5; border: 1px solid #a7f3d0; border-radius: 12px;
  padding: 8px 14px; margin: 4px 0;
}

/* ── Inline confirm dialog (for Clear) ── */
#prerna-chatbot-root .pk-chat-confirm {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(14, 28, 52, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: pkChatIn .15s ease-out;
}
#prerna-chatbot-root .pk-chat-confirm-card {
  background: #fff; border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 12px 40px rgba(14, 28, 52, 0.35);
  max-width: 320px; width: 100%; text-align: center;
}
#prerna-chatbot-root .pk-chat-confirm-title {
  font-size: 16px; font-weight: 600; color: var(--pk-navy); margin-bottom: 6px;
}
#prerna-chatbot-root .pk-chat-confirm-sub {
  font-size: 13px; color: var(--pk-text-muted); margin-bottom: 18px; line-height: 1.5;
}
#prerna-chatbot-root .pk-chat-confirm-actions {
  display: flex; gap: 10px; justify-content: center;
}
#prerna-chatbot-root .pk-chat-confirm-cancel,
#prerna-chatbot-root .pk-chat-confirm-ok {
  padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer; border: 1px solid var(--pk-border);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
#prerna-chatbot-root .pk-chat-confirm-cancel {
  background: #fff; color: var(--pk-text);
}
#prerna-chatbot-root .pk-chat-confirm-cancel:hover {
  background: var(--pk-bg-soft); border-color: #cbd5e1;
}
#prerna-chatbot-root .pk-chat-confirm-ok {
  background: #b91c1c; color: #fff; border-color: #b91c1c;
}
#prerna-chatbot-root .pk-chat-confirm-ok:hover {
  background: #991b1b; border-color: #991b1b;
}
#prerna-chatbot-root .pk-chat-confirm-cancel:active,
#prerna-chatbot-root .pk-chat-confirm-ok:active { transform: translateY(1px); }

/* ── Quick replies ── */
#prerna-chatbot-root .pk-chat-quick {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px;
  background: var(--pk-bg-soft);
}
#prerna-chatbot-root .pk-chat-chip {
  background: #fff; border: 1px solid var(--pk-border); color: var(--pk-navy);
  border-radius: 20px; padding: 7px 12px; font-size: 13px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  font-family: inherit;
}
#prerna-chatbot-root .pk-chat-chip:hover { background: var(--pk-navy); color: #fff; border-color: var(--pk-navy); }

/* ── Input ── */
#prerna-chatbot-root .pk-chat-form {
  display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--pk-border); background: #fff;
}
#prerna-chatbot-root .pk-chat-input {
  flex: 1 !important; border: 1px solid var(--pk-border) !important; border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: var(--pk-input-font-size, 15px) !important; resize: none !important;
  font-family: inherit !important; color: var(--pk-text) !important; background: #fff !important;
  line-height: 1.5 !important; min-height: 72px !important; height: 72px !important;
  max-height: 160px !important; outline: none !important;
  transition: border-color .15s ease;
  box-sizing: border-box !important;
  width: auto !important; display: block !important;
}
#prerna-chatbot-root .pk-chat-input:focus { border-color: var(--pk-navy); }
#prerna-chatbot-root .pk-chat-send {
  background: var(--pk-navy); color: #fff; border: 0; border-radius: 10px;
  width: 40px; height: 40px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
#prerna-chatbot-root .pk-chat-send:hover { background: var(--pk-navy-deep); }
#prerna-chatbot-root .pk-chat-send:disabled { background: var(--pk-text-muted); cursor: not-allowed; }

#prerna-chatbot-root .pk-chat-footer {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--pk-text-muted);
  padding: 6px 12px 8px; background: #fff; border-top: 1px solid #f1f5f9;
}
#prerna-chatbot-root .pk-chat-footer a { color: var(--pk-navy); text-decoration: none; font-weight: 500; }
#prerna-chatbot-root .pk-chat-footer-callback { color: var(--pk-navy) !important; font-weight: 600; }
#prerna-chatbot-root .pk-chat-footer-callback:hover { text-decoration: underline !important; }
#prerna-chatbot-root .pk-chat-footer-main {
  flex: 1; text-align: center;
}
#prerna-chatbot-root .pk-chat-footer-fontctl {
  display: flex; gap: 4px; align-items: center; flex-shrink: 0;
}
#prerna-chatbot-root .pk-chat-font {
  background: transparent; border: 1px solid var(--pk-border); color: var(--pk-navy);
  width: 26px; height: 26px; border-radius: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.3px;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#prerna-chatbot-root .pk-chat-font:hover { background: var(--pk-navy); border-color: var(--pk-navy); color: #fff; }
#prerna-chatbot-root .pk-chat-font:disabled { opacity: .35; cursor: not-allowed; }
#prerna-chatbot-root .pk-chat-font:disabled:hover { background: transparent; border-color: var(--pk-border); color: var(--pk-navy); }

/* ── Gold CTA bar under header ── */
#prerna-chatbot-root .pk-chat-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  background: linear-gradient(90deg, #fff7e6 0%, #fffaf2 100%);
  border-bottom: 1px solid #fde8c5;
}
#prerna-chatbot-root .pk-chat-cta-text {
  font-size: 13px; color: var(--pk-navy); font-weight: 500;
}
#prerna-chatbot-root .pk-chat-cta-btn {
  background: var(--pk-gold); color: var(--pk-navy);
  border: 0; border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .15s ease, transform .05s ease;
  white-space: nowrap;
}
#prerna-chatbot-root .pk-chat-cta-btn:hover { background: #edb366; }
#prerna-chatbot-root .pk-chat-cta-btn:active { transform: translateY(1px); }

/* ── Inline chips rendered below an assistant message ── */
#prerna-chatbot-root .pk-chat-inline-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 4px 36px; /* align under the avatar+gap */
}
#prerna-chatbot-root .pk-chat-chip-form {
  background: var(--pk-navy) !important; color: #fff !important;
  border-color: var(--pk-navy) !important;
}
#prerna-chatbot-root .pk-chat-chip-form:hover {
  background: var(--pk-navy-deep) !important; color: #fff !important;
}

/* ── Callback form: full-panel takeover (replaces chat area while active) ── */
#prerna-chatbot-root .pk-chat-cbform {
  position: absolute; inset: 0; z-index: 11;
  background: #fff;
  display: flex; flex-direction: column;
  animation: pkChatSlide .22s ease-out;
}
@keyframes pkChatSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
#prerna-chatbot-root .pk-chat-cbform-card {
  flex: 1; min-height: 0;               /* allows child scroll inside flex column */
  padding: 44px 20px 16px;               /* top padding clears the absolute close button */
  overflow-y: auto;
  position: relative;
  display: flex; flex-direction: column;
}
#prerna-chatbot-root .pk-chat-cbform-close {
  position: absolute; top: 10px; right: 10px;
  background: var(--pk-navy); border: 0;
  font-size: 22px; color: #fff;
  cursor: pointer; width: 36px; height: 36px; border-radius: 50%; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .1s ease;
  box-shadow: 0 2px 8px rgba(14, 28, 52, 0.25);
}
#prerna-chatbot-root .pk-chat-cbform-close:hover { background: var(--pk-navy-deep); transform: scale(1.05); }
#prerna-chatbot-root .pk-chat-cbform-title {
  font-size: 16px; font-weight: 600; color: var(--pk-navy); margin: 0 0 3px;
}
#prerna-chatbot-root .pk-chat-cbform-sub {
  font-size: 12.5px; color: var(--pk-text-muted); margin: 0 0 12px; line-height: 1.4;
}
#prerna-chatbot-root .pk-chat-cbform-form {
  display: flex; flex-direction: column; gap: 8px;
}
#prerna-chatbot-root .pk-chat-cbform-form label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11.5px; font-weight: 600; color: var(--pk-text);
  text-transform: none; letter-spacing: 0;
}
#prerna-chatbot-root .pk-chat-cbform-form input,
#prerna-chatbot-root .pk-chat-cbform-form select,
#prerna-chatbot-root .pk-chat-cbform-form textarea {
  font-family: inherit; font-size: 13.5px; color: var(--pk-text);
  padding: 7px 10px; border: 1px solid var(--pk-border); border-radius: 7px;
  background: #fff; outline: none; font-weight: 400;
  transition: border-color .15s ease;
  box-sizing: border-box; width: 100%;
}
#prerna-chatbot-root .pk-chat-cbform-form input:focus,
#prerna-chatbot-root .pk-chat-cbform-form select:focus,
#prerna-chatbot-root .pk-chat-cbform-form textarea:focus { border-color: var(--pk-navy); }
#prerna-chatbot-root .pk-chat-cbform-form textarea { resize: none; height: 48px; line-height: 1.4; }
#prerna-chatbot-root .pk-chat-cbform-optional { font-weight: 400; color: var(--pk-text-muted); font-size: 11px; }
#prerna-chatbot-root .pk-chat-cbform-error {
  background: #fee2e2; border: 1px solid #fecaca; color: #991b1b;
  padding: 7px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 400;
}
#prerna-chatbot-root .pk-chat-cbform-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px;
}
#prerna-chatbot-root .pk-chat-cbform-cancel,
#prerna-chatbot-root .pk-chat-cbform-submit {
  padding: 9px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  font-family: inherit; cursor: pointer; border: 1px solid var(--pk-border);
  transition: background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
#prerna-chatbot-root .pk-chat-cbform-cancel { background: #fff; color: var(--pk-text); }
#prerna-chatbot-root .pk-chat-cbform-cancel:hover { background: var(--pk-bg-soft); }
#prerna-chatbot-root .pk-chat-cbform-submit { background: var(--pk-navy); color: #fff; border-color: var(--pk-navy); }
#prerna-chatbot-root .pk-chat-cbform-submit:hover { background: var(--pk-navy-deep); }
#prerna-chatbot-root .pk-chat-cbform-submit:disabled { background: var(--pk-text-muted); border-color: var(--pk-text-muted); cursor: not-allowed; }

/* ── Mobile ── */
/* Default on mobile: compact panel (same sizing as desktop), NOT fullscreen.
   Only the expanded state takes over the full viewport. This avoids iOS Safari's
   100vh bug (where the browser chrome clips the panel top). */
@media (max-width: 640px) {
  #prerna-chatbot-root .pk-chat-panel {
    right: 12px;
    bottom: 96px;
    width: calc(100vw - 24px);
    max-width: 420px;
    height: min(620px, calc(100dvh - 170px));
    max-height: calc(100dvh - 170px);
  }
  /* Fullscreen ONLY when user explicitly expands (uses dvh so iOS chrome is respected) */
  #prerna-chatbot-root .pk-chat-panel.pk-expanded {
    right: 0; left: 0; top: 0; bottom: 0;
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0;
  }
  #prerna-chatbot-root .pk-chat-bubble { right: 14px; bottom: 14px; width: 64px; height: 64px; }
  #prerna-chatbot-root .pk-chat-bubble img { width: 40px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #prerna-chatbot-root .pk-chat-panel { animation: none; }
  #prerna-chatbot-root .pk-dot { animation: none; opacity: .7; }
}