/* Valure Assistant chat (adapted from the Ducki chat kit).
   Colours are set here; the font comes from the page (Rethink Sans). */
.chat-fab, .chat-panel {
  --chat-accent: #0207ff;
  --chat-accent-hover: #0005d1;
  --chat-on-accent: #ffffff;
  --chat-bg: #ffffff;
  --chat-ink: #0a0b12;
  --chat-bubble: #f4f4f5;
  --chat-line: rgba(0, 0, 0, 0.06);
  --chat-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --chat-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: inherit; /* uses the page's font */
  box-sizing: border-box;
}
.chat-panel *, .chat-panel *::before, .chat-panel *::after { box-sizing: border-box; }

/* Floating button (not used on the help centre: the chat opens from "Chat with us") */
.chat-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
  display: inline-flex; align-items: center; gap: 11px;
  height: 52px; padding: 0 24px 0 18px; border-radius: 999px;
  background: var(--chat-accent); color: var(--chat-on-accent);
  font-size: 16px; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  opacity: 0; visibility: hidden; transform: translateY(calc(100% + 32px));
  transition: transform 0.8s var(--chat-ease-soft), opacity 0.5s var(--chat-ease-soft), visibility 0s 0.8s, background-color 0.2s var(--chat-ease);
}
.chat-fab-icon { flex: none; display: block; }
.chat-fab.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.chat-fab.is-visible:hover { background: var(--chat-accent-hover); transform: translateY(-2px); }
@media (max-width: 720px) { .chat-fab { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .chat-fab { transform: none; } }
.chat-fab.is-visible.is-chatting { opacity: 0; visibility: hidden; transform: scale(0.9); transition: transform 0.4s var(--chat-ease-soft), opacity 0.3s var(--chat-ease-soft), visibility 0s 0.4s; }

/* ---- The chat panel ---- */
.chat-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 2147483001;
  display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 48px)); height: min(600px, calc(100dvh - 48px));
  background: var(--chat-bg); color: var(--chat-ink); border: 1px solid var(--chat-line); border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden; transform-origin: 100% 100%;
  opacity: 0; visibility: hidden; transform: translateY(40px) scale(0.96);
  transition: transform 0.6s var(--chat-ease-soft), opacity 0.4s var(--chat-ease-soft), visibility 0s 0.6s;
}
.chat-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px 20px; border-bottom: 1px solid var(--chat-line); }
.chat-title { font-size: 16px; line-height: 1.2; }
.chat-head, .chat-body, .chat-compose { transition: opacity 0.5s var(--chat-ease-soft) 0.15s; }
.chat-panel.is-loading :is(.chat-head, .chat-body, .chat-compose) { opacity: 0; visibility: hidden; transition: none; }
.chat-close {
  margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: transparent; color: var(--chat-ink); cursor: pointer;
  transition: background-color 0.2s var(--chat-ease);
}
.chat-close:hover { background: rgba(0, 0, 0, 0.05); }
.chat-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.chat-loader { position: absolute; inset: 0; display: grid; place-items: center; color: var(--chat-accent); pointer-events: none; transition: opacity 0.4s var(--chat-ease-soft), transform 0.4s var(--chat-ease-soft); }
.chat-loader.is-done { opacity: 0; transform: scale(0.8); }
.chat-loader svg { animation: chat-spin 1.3s cubic-bezier(0.4, 0.12, 0.6, 0.88) infinite; }
.chat-loader circle { animation: chat-arc 1.3s cubic-bezier(0.4, 0.12, 0.6, 0.88) infinite; }
@keyframes chat-spin { to { transform: rotate(360deg); } }
@keyframes chat-arc {
  0% { stroke-dasharray: 4 159; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 100 63; stroke-dashoffset: -30; }
  100% { stroke-dasharray: 4 159; stroke-dashoffset: -163; }
}
.chat-group { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chat-sender { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; animation: chat-msg-in 0.45s var(--chat-ease-soft) both; }
.chat-sender img { display: block; border-radius: 50%; }
.chat-panel :focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.chat-group + .chat-msg, .chat-msg + .chat-group { margin-top: 6px; }
.chat-msg {
  max-width: 85%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.45;
  animation: chat-msg-in 0.45s var(--chat-ease-soft) both;
}
.chat-msg.from-assistant { white-space: pre-line; align-self: flex-start; background: var(--chat-bubble); border-bottom-left-radius: 6px; }
.chat-msg.from-me { align-self: flex-end; background: var(--chat-accent); color: var(--chat-on-accent); border-bottom-right-radius: 6px; }
.chat-msg.from-me a { text-decoration-color: currentColor; }
.chat-msg a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--chat-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.chat-msg .chat-linkbox {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; vertical-align: -5px;
  border-radius: 7px; background: var(--chat-bg); border: 1px solid rgba(0, 0, 0, 0.1); text-decoration: none;
  transition: background-color 0.2s var(--chat-ease), border-color 0.2s var(--chat-ease);
}
.chat-msg .chat-linkbox:hover { background: var(--chat-accent); border-color: var(--chat-accent); }
.chat-dots { display: inline-flex; gap: 4px; padding: 5px 2px; }
.chat-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9a9a9a; animation: chat-dot 1.1s ease-in-out infinite; }
.chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes chat-msg-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.chat-compose { display: flex; gap: 8px; margin: 0; padding: 12px 14px 14px; border-top: 1px solid var(--chat-line); }
.chat-compose input {
  flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0 16px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 999px;
  font: inherit; font-size: 16px; color: var(--chat-ink); background: var(--chat-bg); outline: none;
  transition: border-color 0.2s var(--chat-ease);
}
.chat-compose input:focus { border-color: var(--chat-accent); box-shadow: 0 0 0 3px rgba(2, 7, 255, 0.16); }
.chat-compose input:focus-visible { outline: none; }
.chat-compose button {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--chat-accent); color: var(--chat-on-accent); cursor: pointer; transition: opacity 0.2s var(--chat-ease), transform 0.2s var(--chat-ease);
}
.chat-compose button:hover { transform: translateY(-1px); }
.chat-compose :disabled { opacity: 0.45; cursor: default; transform: none; }
@media (max-width: 720px) { .chat-panel { right: 16px; bottom: 16px; width: calc(100vw - 32px); height: min(600px, calc(100dvh - 32px)); } }
@media (prefers-reduced-motion: reduce) { .chat-panel { transform: none; } }