/* LinkPanda Assistant widget (assets/js/chat.js): a navy launcher, a white panel in the site's type, full screen on
   phones. Scoped under .lpc so it cannot touch the page. */
.lpc { --lpc-ink: #041b2b; --lpc-accent: #ff9900; --lpc-muted: #5f5f5f; --lpc-line: rgba(0, 0, 0, 0.1); --lpc-surface: #f7f7f7; position: fixed; right: 20px; bottom: calc(20px + var(--lpc-lift, 0px)); z-index: 9990; transition: bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: var(--lpc-font, 'Roboto', system-ui, sans-serif); color: var(--lpc-ink); }
/* Open, the chat sits above the site's sticky header (Christopher, 5 Nov: "It needs to sit above header"); closed, the button stays below the site's menus. */
.lpc.is-open { z-index: 100000; }
.lpc *, .lpc *::before, .lpc *::after { box-sizing: border-box; }
.lpc-launch { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px 0 8px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; background: var(--lpc-ink); color: #fff; font: 500 15px/1 var(--lpc-font, 'Roboto', system-ui, sans-serif); letter-spacing: -0.01em; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.16); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; animation: lpc-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both; }
.lpc-launch:hover { background: #0e273a; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 153, 0, 0.35); }
.lpc-launch:active { transform: translateY(0) scale(0.98); }
.lpc-launch:focus-visible, .lpc button:focus-visible, .lpc a:focus-visible, .lpc textarea:focus-visible, .lpc input:focus-visible { outline: 2px solid var(--lpc-ink); outline-offset: 2px; }
/* Keyboard focus in LinkPanda's colours (Christopher, 5 Nov): navy on white, orange on the navy header. */
.lpc-head button:focus-visible, .lpc-list-head button:focus-visible { outline-color: #ff9900; }
/* The LinkPanda panda on a white disc (Christopher, 5 Nov), with a small "online" dot: the bot is always there. */
.lpc-mark, .lpc-avatar { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.lpc-mark::after, .lpc-avatar::after { content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #34c76f; box-shadow: 0 0 0 2px var(--lpc-ink); }
@keyframes lpc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lpc.is-open .lpc-launch { display: none; }
.lpc-panel { position: fixed; right: 20px; bottom: calc(20px + var(--lpc-lift, 0px)); display: flex; flex-direction: column; width: 380px; height: min(600px, calc(100vh - 40px - var(--lpc-lift, 0px))); border-radius: 12px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); overflow: hidden; }
.lpc-panel { transform-origin: bottom right; animation: lpc-open 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lpc-panel[hidden] { display: none; }
.lpc-panel:focus { outline: none; } /* it takes focus itself on touch screens, so no keyboard pops up */
@keyframes lpc-open { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.lpc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 14px 16px; background: var(--lpc-ink); color: #fff; }
.lpc-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lpc-names { min-width: 0; }
.lpc-sub { margin: 3px 0 0; font: 400 12px/1.3 var(--lpc-font, 'Roboto', system-ui, sans-serif); color: rgba(255, 255, 255, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpc-title { margin: 0; font: 600 18px/1.2 var(--lpc-font, 'Roboto', system-ui, sans-serif); letter-spacing: -0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpc-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.lpc-close:hover { background: rgba(255, 255, 255, 0.12); }
.lpc-tools { display: flex; align-items: center; gap: 4px; flex: none; }
/* Chats: the header button, with how many chats there are, and the list it opens in place of the conversation. */
.lpc [hidden] { display: none !important; }
.lpc-chats { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 10px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: transparent; color: #fff; font: 500 14px/1 var(--lpc-font, 'Roboto', system-ui, sans-serif); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.lpc-chats svg, .lpc-back svg, .lpc-new svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lpc-chats svg { width: 16px; height: 16px; }
.lpc-chats-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--lpc-accent); color: var(--lpc-ink); font: 700 12px/20px var(--lpc-font, 'Roboto', system-ui, sans-serif); text-align: center; }
.lpc-list { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; }
.lpc-list-head { justify-content: flex-start; gap: 8px; padding-left: 8px; }
.lpc-back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.lpc-back svg { width: 22px; height: 22px; }
.lpc-list-title { flex: 1; margin: 0; font: 600 15px/1.2 var(--lpc-font, 'Roboto', system-ui, sans-serif); letter-spacing: normal; text-transform: none; color: #fff; }
.lpc-list-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 16px; padding: 20px 16px; }
.lpc-new { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border: 0; border-radius: 999px; background: var(--lpc-ink); color: #fff; font: 500 16px/1 var(--lpc-font, 'Roboto', system-ui, sans-serif); cursor: pointer; transition: background-color 0.15s ease; }
.lpc-new svg { width: 20px; height: 20px; }
.lpc-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lpc-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 12px; background: var(--lpc-surface); color: var(--lpc-ink); font: 14px/1.35 var(--lpc-font, 'Roboto', system-ui, sans-serif); text-align: left; cursor: pointer; transition: background-color 0.15s ease; }
.lpc-item.is-current { border-color: rgba(255, 153, 0, 0.55); }
.lpc-item-face { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--lpc-ink); }
.lpc-item-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lpc-item-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.lpc-item-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lpc-item-title { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpc-item-when { flex: none; font-size: 12px; color: var(--lpc-muted); }
.lpc-item.is-current .lpc-item-when { color: #9a5800; font-weight: 600; }
.lpc-item-preview { font-size: 13px; color: var(--lpc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpc-list-foot { display: grid; justify-items: center; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid var(--lpc-line); text-align: center; }
.lpc-kept { margin: 0; font-size: 12px; line-height: 1.4; color: var(--lpc-muted); }
.lpc-clear { padding: 6px 8px; border: 0; background: none; color: var(--lpc-ink); font: 500 14px/1.2 var(--lpc-font, 'Roboto', system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lpc-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.lpc-confirm-text { font-size: 13px; font-weight: 500; color: var(--lpc-ink); }
.lpc-confirm-no, .lpc-confirm-yes { height: 32px; padding: 0 14px; border: 1px solid var(--lpc-line); border-radius: 999px; background: #fff; color: var(--lpc-ink); font: 500 13px/1 var(--lpc-font, 'Roboto', system-ui, sans-serif); cursor: pointer; }
.lpc-confirm-yes { border-color: #b3261e; background: #b3261e; color: #fff; }
/* "Latest": sits at the foot of the log while there is more below, and takes the visitor there. */
.lpc-latest { position: sticky; bottom: 0; align-self: center; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--lpc-line); border-radius: 999px; background: #fff; color: var(--lpc-ink); font: 500 13px/1 var(--lpc-font, 'Roboto', system-ui, sans-serif); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); cursor: pointer; }
.lpc-latest[hidden] { display: none; }
.lpc-latest::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.lpc-latest:hover { background: var(--lpc-surface); }
.lpc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.lpc-msg { max-width: 88%; padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.lpc-msg p { margin: 0; }
.lpc-msg p + p, .lpc-msg p + ul, .lpc-msg ul + p { margin-top: 8px; }
.lpc-msg ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.lpc-msg li + li { margin-top: 2px; }
.lpc-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lpc-msg-bot { align-self: flex-start; background: var(--lpc-surface); color: var(--lpc-ink); }
.lpc-msg-user { align-self: flex-end; background: var(--lpc-ink); color: #fff; }
.lpc-msg-error { background: #fff4f0; color: #8a2b0c; }
.lpc-typing { display: inline-flex; gap: 4px; padding: 14px; }
.lpc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--lpc-muted); animation: lpc-dot 1s infinite ease-in-out; }
.lpc-typing span:nth-child(2) { animation-delay: 0.15s; }
.lpc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lpc-dot { 0%, 80%, 100% { opacity: 0.3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.lpc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.lpc-chip { padding: 7px 12px; border: 1px solid var(--lpc-line); border-radius: 999px; background: #fff; color: var(--lpc-ink); font: 500 13px/1.2 var(--lpc-font, 'Roboto', system-ui, sans-serif); cursor: pointer; }
.lpc-chip:hover { background: var(--lpc-surface); }
.lpc-formbox { padding: 0 16px; max-height: 50%; overflow-y: auto; }
.lpc-form { display: grid; gap: 8px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--lpc-line); border-radius: 10px; }
.lpc-form-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.lpc-form-title { margin: 0; font-weight: 600; font-size: 14px; }
.lpc-form-close { flex: none; width: 32px; height: 32px; margin: -6px -6px -6px 0; border: 0; border-radius: 6px; background: none; color: var(--lpc-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.lpc-form-close:hover, .lpc-form-close:focus-visible { background: var(--lpc-line); color: var(--lpc-ink); }
.lpc-field { display: grid; gap: 4px; font-size: 13px; color: var(--lpc-muted); }
.lpc-field input, .lpc-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--lpc-line); border-radius: 6px; font: 15px/1.4 var(--lpc-font, 'Roboto', system-ui, sans-serif); color: var(--lpc-ink); }
.lpc-field textarea { min-height: 64px; resize: vertical; }
.lpc-field [aria-invalid="true"] { border-color: #b3261e; }
.lpc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lpc-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: var(--lpc-muted); }
.lpc-submit, .lpc-send { padding: 9px 14px; border: 0; border-radius: 6px; background: var(--lpc-ink); color: #fff; font: 500 14px/1 var(--lpc-font, 'Roboto', system-ui, sans-serif); cursor: pointer; }
.lpc-submit[disabled] { opacity: 0.6; }
/* The site's theme styles every button (a hover or focus colour, a shadow): the widget's buttons keep their own look. */
.lpc button:not(.lpc-launch):not(.lpc-latest) { box-shadow: none; text-transform: none; }
/* Headings at theme-proof weight: the theme gives every h2 its own colour and font (Elementor: navy, bold Roboto). */
.lpc .lpc-title { margin: 0; font: 600 18px/1.2 var(--lpc-font, 'Roboto', system-ui, sans-serif); letter-spacing: -0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpc .lpc-list-title { flex: 1; margin: 0; font: 600 15px/1.2 var(--lpc-font, 'Roboto', system-ui, sans-serif); letter-spacing: normal; text-transform: none; color: #fff; }
/* Base look at theme-proof weight: the theme paints every button (e.g. Elementor's navy), one class is not enough. */
.lpc .lpc-back { border: 0; background: transparent; color: #fff; }
.lpc .lpc-chats { border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; }
.lpc .lpc-chip { border: 1px solid var(--lpc-line); background: #fff; color: var(--lpc-ink); }
.lpc .lpc-clear { border: 0; background: none; color: var(--lpc-ink); }
.lpc .lpc-close { border: 0; background: transparent; color: #fff; }
.lpc .lpc-confirm-no { border: 1px solid var(--lpc-line); background: #fff; color: var(--lpc-ink); }
.lpc .lpc-confirm-yes { border: 1px solid var(--lpc-line); background: #b3261e; color: #fff; border-color: #b3261e; }
.lpc .lpc-form-close { border: 0; background: none; color: var(--lpc-muted); }
.lpc .lpc-item { border: 1px solid transparent; background: var(--lpc-surface); color: var(--lpc-ink); }
.lpc .lpc-latest { border: 1px solid var(--lpc-line); background: #fff; color: var(--lpc-ink); }
.lpc .lpc-launch { border: 1px solid rgba(255, 255, 255, 0.08); background: var(--lpc-ink); color: #fff; }
.lpc .lpc-new { border: 0; background: var(--lpc-ink); color: #fff; }
.lpc .lpc-send { border: 0; background: var(--lpc-ink); color: #fff; }
.lpc .lpc-submit { border: 0; background: var(--lpc-ink); color: #fff; }
.lpc .lpc-send:hover, .lpc .lpc-send:focus, .lpc .lpc-submit:hover, .lpc .lpc-submit:focus { background: #0e273a; color: #fff; }
/* Each focus colour is reset to the button's own, then its hover and keyboard-focus look is set again at the same weight. */
.lpc .lpc-launch:focus { background: var(--lpc-ink); color: #fff; }
.lpc .lpc-launch:hover { background: #0e273a; }
.lpc .lpc-chats:focus, .lpc .lpc-back:focus { background: transparent; color: #fff; }
.lpc .lpc-chats:hover, .lpc .lpc-chats:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 153, 0, 0.7); }
.lpc .lpc-back:hover, .lpc .lpc-back:focus-visible { background: rgba(255, 255, 255, 0.12); }
.lpc .lpc-new:focus { background: var(--lpc-ink); color: #fff; }
.lpc .lpc-new:hover { background: #0e273a; }
.lpc .lpc-item:focus { background: var(--lpc-surface); color: var(--lpc-ink); }
.lpc .lpc-item:hover, .lpc .lpc-item:focus-visible { background: #edf0f3; }
.lpc .lpc-clear:focus { background: none; color: var(--lpc-ink); }
.lpc .lpc-clear:hover { background: none; color: #b3261e; }
.lpc .lpc-chip:focus, .lpc .lpc-latest:focus, .lpc .lpc-confirm-no:focus { background: #fff; color: var(--lpc-ink); }
.lpc .lpc-chip:hover, .lpc .lpc-latest:hover, .lpc .lpc-confirm-no:hover { background: var(--lpc-surface); }
.lpc .lpc-close:focus { background: transparent; color: #fff; }
.lpc .lpc-close:hover, .lpc .lpc-close:focus-visible { background: rgba(255, 255, 255, 0.12); }
.lpc .lpc-form-close:focus { background: none; color: var(--lpc-muted); }
.lpc .lpc-form-close:hover, .lpc .lpc-form-close:focus-visible { background: var(--lpc-line); color: var(--lpc-ink); }
.lpc .lpc-confirm-yes:focus { background: #b3261e; color: #fff; }
.lpc .lpc-confirm-yes:hover { background: #8f1d17; }
.lpc-form-status { margin: 0; font-size: 13px; color: #b3261e; }
.lpc-thanks { margin: 0 0 10px; padding: 12px; border-radius: 10px; background: #eef7f0; color: #1d5b2e; font-size: 14px; }
.lpc-bar { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px; border-top: 1px solid var(--lpc-line); }
.lpc-input { flex: 1; min-height: 40px; max-height: 120px; padding: 9px 10px; border: 1px solid var(--lpc-line); border-radius: 8px; font: 15px/1.4 var(--lpc-font, 'Roboto', system-ui, sans-serif); color: var(--lpc-ink); resize: none; }
.lpc-note { margin: 0; padding: 0 16px 12px; font-size: 12px; color: var(--lpc-muted); }
.lpc-note a { color: var(--lpc-muted); text-decoration: underline; }
.lpc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) {
  .lpc { right: 12px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--lpc-lift, 0px)); }
  .lpc-panel { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
  /* Phones (Ayaan, 19 Oct: "it gets zoomed in"): iOS zooms the page into any text field under 16px, so every field is
     16px here. Taps get 44px, the log keeps its scrolling to itself, and the notch and home bar keep their room. */
  .lpc input, .lpc textarea, .lpc select { font-size: 16px; }
  .lpc-head { padding-top: max(14px, env(safe-area-inset-top)); }
  .lpc-close { width: 44px; height: 44px; }
  .lpc-chats { height: 44px; padding: 0 8px 0 12px; }
  .lpc-back { width: 44px; height: 44px; }
  .lpc-item { padding: 14px 12px; }
  .lpc-clear { min-height: 44px; }
  .lpc-confirm-no, .lpc-confirm-yes { height: 44px; padding: 0 18px; }
  .lpc-list-foot { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .lpc-form-close { width: 44px; height: 44px; margin: -10px -10px -10px 0; }
  .lpc-send, .lpc-submit { min-height: 44px; padding: 0 18px; }
  .lpc-input { min-height: 44px; }
  .lpc-chip { min-height: 40px; padding: 9px 14px; font-size: 14px; }
  .lpc-log { overscroll-behavior: contain; }
  .lpc-note { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  /* Full screen on a phone: an open chat sits over the cookie banner, which is back when the chat closes. */
  .lpc.is-open { z-index: 100000; }
}
/* While the chat fills a phone's screen, the page behind it stays still. */
html.lpc-lock, html.lpc-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lpc-typing span, .lpc-launch, .lpc-panel { animation: none; } .lpc, .lpc-launch { transition: none; } .lpc-launch:hover { transform: none; } }
.lpc-mark img, .lpc-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }