/* ============================================================================
   APIIP Portal Chatbot widget — self-contained styles
   Brand tokens mirror the portal (homepage.css / typography-tokens.css):
   navy #00053c, brand blue #0d3b7a→#1a5fb4, orange accent #fe5900.
   No dependency on Bootstrap/AOS. All rules are namespaced .apiip-chat*.
   ============================================================================ */

.apiip-chat-root {
  --apiip-navy: #00053c;
  --apiip-blue: #1a5fb4;
  --apiip-blue-dark: #0d3b7a;
  --apiip-accent: #fe5900;
  --apiip-bot-bg: #f1f4f9;
  --apiip-bot-text: #24303f;
  --apiip-muted: #5a6a80;
  --apiip-border: #e2e8f0;
  --apiip-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --apiip-shadow: 0 12px 40px rgba(0, 5, 60, 0.22);
}

/* ---- Floating action button --------------------------------------------- */
.apiip-chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.18s ease;
  font-family: var(--apiip-font);
  text-align: center;
}
.apiip-chat-fab:hover { transform: translateY(-2px); }
.apiip-chat-fab-av {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border: 2px solid var(--apiip-accent);
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--apiip-shadow);
}
/* Label badge tucked under the avatar. Darker than --apiip-accent (#fe5900):
   white on #fe5900 is only 3.16:1, while #c2410c gives 5.18:1 and clears
   WCAG 1.4.3 AA — the same reason the unread badge uses this orange. */
.apiip-chat-fab-tx {
  position: relative;
  margin-top: -11px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #c2410c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 5, 60, 0.24);
}
.apiip-chat-fab-tx small { display: none; }
.apiip-chat-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.apiip-chat-fab[hidden] { display: none; }

/* ---- Panel -------------------------------------------------------------- */
.apiip-chat-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483000;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--apiip-shadow);
  font-family: var(--apiip-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--apiip-bot-text);
  animation: apiip-chat-in 0.22s ease;
}
.apiip-chat-panel[hidden] { display: none; }
@keyframes apiip-chat-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Header ------------------------------------------------------------- */
.apiip-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--apiip-navy) 0%, var(--apiip-blue-dark) 100%);
}
.apiip-chat-header .apiip-chat-avatar {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.apiip-chat-header .apiip-chat-avatar svg { width: 20px; height: 20px; }
.apiip-chat-header .apiip-chat-titles {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.apiip-chat-header .apiip-chat-title {
  font-weight: 600; font-size: 15px; line-height: 1.2;
}
.apiip-chat-header .apiip-chat-subtitle {
  font-size: 12px; opacity: 0.8; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apiip-chat-close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  width: 32px; height: 32px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.apiip-chat-close:hover { background: rgba(255, 255, 255, 0.15); }

/* ---- Messages ----------------------------------------------------------- */
.apiip-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}
.apiip-chat-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.apiip-chat-msg--bot {
  align-self: flex-start;
  background: var(--apiip-bot-bg);
  color: var(--apiip-bot-text);
  border-bottom-left-radius: 4px;
}
.apiip-chat-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--apiip-blue-dark) 0%, var(--apiip-blue) 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.apiip-chat-msg a { color: var(--apiip-blue); font-weight: 600; text-decoration: underline; }
.apiip-chat-msg--user a { color: #fff; }
.apiip-chat-msg p { margin: 0 0 6px; }
.apiip-chat-msg p:last-child { margin-bottom: 0; }
.apiip-chat-msg ul { margin: 6px 0; padding-left: 18px; }
.apiip-chat-msg li { margin: 2px 0; }

/* ---- Typing indicator --------------------------------------------------- */
.apiip-chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--apiip-bot-bg);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.apiip-chat-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--apiip-muted);
  animation: apiip-bounce 1.2s infinite ease-in-out both;
}
.apiip-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.apiip-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes apiip-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ---- Starter suggestions ------------------------------------------------ */
.apiip-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 8px;
}
.apiip-chat-suggestions button {
  font-family: inherit;
  font-size: 13px;
  color: var(--apiip-blue-dark);
  background: #fff;
  border: 1px solid var(--apiip-border);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.apiip-chat-suggestions button:hover {
  background: var(--apiip-bot-bg);
  border-color: var(--apiip-blue);
}

/* ---- Input form --------------------------------------------------------- */
.apiip-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 6px;
  border-top: 1px solid var(--apiip-border);
}
.apiip-chat-form textarea {
  flex: 1 1 auto;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  max-height: 96px;
  padding: 9px 12px;
  border: 1px solid var(--apiip-border);
  border-radius: 12px;
  color: var(--apiip-bot-text);
  background: #fff;
}
.apiip-chat-form textarea::placeholder { color: var(--apiip-muted); }
.apiip-chat-send {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--apiip-blue-dark) 0%, var(--apiip-blue) 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s ease;
}
.apiip-chat-send svg { width: 18px; height: 18px; }
.apiip-chat-send:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Disclaimer --------------------------------------------------------- */
.apiip-chat-disclaimer {
  padding: 4px 14px 12px;
  font-size: 11px;
  color: var(--apiip-muted);
  text-align: center;
}

/* ---- Focus visibility (accessibility) ----------------------------------- */
.apiip-chat-root :focus-visible {
  outline: 3px solid var(--apiip-accent);
  outline-offset: 2px;
}
/* The FAB already has a permanent orange ring — a same-colour focus outline
   reads as a double ring, so keyboard focus gets a navy one instead. */
.apiip-chat-fab:focus-visible {
  outline: 3px solid var(--apiip-blue-dark);
  outline-offset: 2px;
}
.apiip-chat-fab:focus:not(:focus-visible) { outline: none; }

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 480px) {
  .apiip-chat-panel {
    right: 0; bottom: 0; left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .apiip-chat-fab { right: 16px; bottom: 16px; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .apiip-chat-panel,
  .apiip-chat-fab,
  .apiip-chat-proactive,
  .apiip-chat-typing span { animation: none; transition: none; }
  .apiip-chat-fab:hover { transform: none; }
  /* Card must still be fully visible when it appears without animating. */
  .apiip-chat-proactive { opacity: 1; transform: none; }
}


/* ---- Unread badge on the launcher --------------------------------------- */
/* Decorative only — the count is conveyed via the FAB's aria-label. */
.apiip-chat-badge {
  position: absolute;
  top: -2px;
  right: auto;
  left: calc(50% + 16px);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  /* Darker than --apiip-accent (#fe5900): white on #fe5900 is only 3.16:1.
     #c2410c gives 5.18:1, clearing WCAG 1.4.3 AA while staying on-brand. */
  background: #c2410c;
  color: #fff;
  font: 700 12px/20px var(--apiip-font);
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}
.apiip-chat-badge[hidden] { display: none; }

/* ---- Proactive greeting card -------------------------------------------- */
.apiip-chat-proactive {
  position: fixed;
  right: 24px;
  bottom: 116px;                /* clears the ~80px capsule launcher + 24px offset */
  z-index: 2147483000;
  width: 330px;
  max-width: calc(100vw - 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.apiip-chat-proactive.is-in { opacity: 1; transform: translateY(0); }
/* Fading out: still painted so the exit transition is visible, but inert. */
.apiip-chat-proactive.is-out { pointer-events: none; }
.apiip-chat-proactive.no-anim { transition: none; }
.apiip-chat-proactive[hidden] { display: none; }

.apiip-chat-proactive-shell { position: relative; width: 100%; }

/* A real <button>, so the browser resets below matter. */
.apiip-chat-proactive-card {
  width: 100%;
  display: flex;
  gap: 12px;
  padding: 16px 38px 16px 16px;  /* right padding clears the dismiss button */
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--apiip-border);
  box-shadow: var(--apiip-shadow);
  cursor: pointer;
  text-align: left;
  font-family: var(--apiip-font);
  font-size: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
.apiip-chat-proactive-card:hover { border-color: #cbd5e1; }

.apiip-chat-proactive-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #fff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}
.apiip-chat-proactive-avatar svg { width: 20px; height: 20px; }

.apiip-chat-proactive-body { display: block; }
.apiip-chat-proactive-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--apiip-navy);
  margin-bottom: 3px;
}
.apiip-chat-proactive-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--apiip-bot-text);
}
.apiip-chat-proactive-meta {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--apiip-muted);
}

.apiip-chat-proactive-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--apiip-muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.apiip-chat-proactive-close:hover { background: var(--apiip-bot-bg); color: var(--apiip-navy); }

/* ---- Quick-reply chips --------------------------------------------------- */
.apiip-chat-proactive-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.apiip-chat-chip {
  max-width: 100%;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--apiip-blue);
  background: #fff;
  color: var(--apiip-blue);
  font: 600 13px var(--apiip-font);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 5, 60, 0.12);
  transition: background 0.16s ease, color 0.16s ease;
}
.apiip-chat-chip:hover { background: var(--apiip-blue); color: #fff; }

/* Keyboard focus must stay visible on every new control. */
.apiip-chat-proactive-card:focus-visible,
.apiip-chat-proactive-close:focus-visible,
.apiip-chat-chip:focus-visible {
  outline: 3px solid var(--apiip-accent);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .apiip-chat-proactive { right: 16px; bottom: 92px; max-width: calc(100vw - 32px); }
  /* Keep the labelled badge, just a little smaller. */
  .apiip-chat-fab-av { flex-basis: 58px; width: 58px; height: 58px; }
  .apiip-chat-fab-tx { margin-top: -10px; padding: 4px 11px; font-size: 11px; }
  .apiip-chat-badge { left: calc(50% + 12px); }
}

/* Short or heavily-zoomed viewports: there is not enough room above the
   launcher for the card AND the chips, and the card must never be clipped off
   the top of the screen (the dismiss control would go with it). Drop the chips
   first, then cap the card and let it scroll internally. */
@media (max-height: 520px) {
  .apiip-chat-proactive-chips { display: none; }
  .apiip-chat-proactive-card {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* ---- Print --------------------------------------------------------------- */
/* A fixed launcher/card must never be stamped onto printed government pages. */
@media print {
  .apiip-chat-root { display: none !important; }
}

/* ---- Screen-reader-only live region -------------------------------------- */
.apiip-chat-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}