/* The enquiries assistant's chat box (ask.js). It takes the site's own look from the parts'
   settings (--p-font, --p-text, --p-ground, --p-raised, --p-line, --p-accent, --p-on-accent,
   --p-radius), so set those for the site and it fits. Phone: a full-screen sheet. */
.ak-open, .ak-panel { --ak-font: var(--p-font, inherit); --ak-text: var(--p-text, #1A1F27); --ak-muted: var(--p-muted, #5A6472); --ak-ground: var(--p-ground, #FFFFFF); --ak-raised: var(--p-raised, #F3F5F8); --ak-line: var(--p-line, rgba(20, 24, 31, .14)); --ak-accent: var(--p-accent, #0F5FA8); --ak-on-accent: var(--p-on-accent, #FFFFFF); --ak-radius: var(--p-radius, 12px); }
.ak-open {
  position: fixed; z-index: 2147482000; right: 16px; bottom: calc(16px + var(--ak-lift, 0px) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; background: var(--ak-accent); color: var(--ak-on-accent);
  font: 600 16px/1 var(--ak-font); letter-spacing: 0; text-transform: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.ak-open .ak-glyph { width: 20px; height: 20px; fill: currentColor; }
.ak-open:focus-visible, .ak-panel button:focus-visible, .ak-panel a:focus-visible, .ak-panel input:focus-visible { outline: 3px solid var(--ak-accent); outline-offset: 2px; }
.ak-panel textarea:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 1px; }
.ak-open:focus-visible { outline-color: var(--ak-text); }
html.ak-on .ak-open { display: none; }

.ak-panel {
  position: fixed; z-index: 2147482001; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 32px)); height: min(620px, calc(100dvh - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ak-ground); color: var(--ak-text); border: 1px solid var(--ak-line); border-radius: calc(var(--ak-radius) + 6px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22); font: 400 16px/1.45 var(--ak-font); letter-spacing: 0; text-transform: none;
}
.ak-panel[hidden] { display: none; }
.ak-panel * { box-sizing: border-box; }
.ak-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--ak-line); }
.ak-titles { flex: 1 1 auto; min-width: 0; }
.ak-title { margin: 0; font-weight: 600; font-size: 17px; line-height: 1.25; }
.ak-sub { margin: 2px 0 0; font-size: 13px; color: var(--ak-muted); }
.ak-close { min-height: 44px; padding: 0 14px; border: 1px solid var(--ak-line); border-radius: 999px; background: transparent; color: var(--ak-text); font: 500 14px/1 var(--ak-font); cursor: pointer; }
.ak-log { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.ak-msg { max-width: 86%; padding: 10px 14px; border-radius: var(--ak-radius); white-space: pre-wrap; overflow-wrap: anywhere; }
.ak-them { align-self: flex-start; background: var(--ak-raised); border-bottom-left-radius: 4px; }
.ak-me { align-self: flex-end; background: var(--ak-accent); color: var(--ak-on-accent); border-bottom-right-radius: 4px; }
.ak-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ak-typing { display: inline-flex; gap: 5px; padding: 14px; }
.ak-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ak-muted); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .ak-typing span { animation: ak-dot 1.2s infinite ease-in-out; }
  .ak-typing span:nth-child(2) { animation-delay: .15s; }
  .ak-typing span:nth-child(3) { animation-delay: .3s; }
  .ak-panel:not([hidden]) { animation: ak-in .22s var(--p-ease, ease-out); }
}
@keyframes ak-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@keyframes ak-in { from { opacity: 0; transform: translateY(12px); } }
.ak-card { align-self: stretch; padding: 14px; border: 1px solid var(--ak-line); border-radius: var(--ak-radius); background: var(--ak-ground); }
.ak-card-title { margin: 0 0 4px; font-weight: 600; }
.ak-card-note { margin: 0 0 10px; font-size: 14px; color: var(--ak-muted); }
.ak-field { margin: 0 0 10px; }
.ak-field label { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 500; }
.ak-field input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--ak-line); border-radius: calc(var(--ak-radius) - 4px); background: var(--ak-ground); color: var(--ak-text); font: 16px/1.3 var(--ak-font); }
.ak-err { margin: 0 0 8px; min-height: 0; color: #B3261E; font-size: 14px; }
.ak-err:empty { display: none; }
.ak-call, .ak-send { min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ak-accent); color: var(--ak-on-accent); font: 600 16px/1 var(--ak-font); cursor: pointer; }
.ak-call { width: 100%; }
.ak-call:disabled, .ak-send:disabled { opacity: .6; cursor: default; }
.ak-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--ak-line); }
.ak-box { flex: 1 1 auto; min-height: 46px; max-height: 120px; resize: none; padding: 11px 12px; border: 1px solid var(--ak-line); border-radius: calc(var(--ak-radius) - 2px); background: var(--ak-ground); color: var(--ak-text); font: 16px/1.4 var(--ak-font); }
.ak-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 16px 12px; }
.ak-person { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ak-text); font: 500 15px/1 var(--ak-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ak-privacy { font-size: 13px; color: var(--ak-muted); }

/* phones: the whole screen, above the keyboard */
@media (max-width: 600px) {
  .ak-panel { inset: 0; right: 0; bottom: 0; width: 100%; height: 100vh; height: var(--ak-vh, 100dvh); border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ak-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  html.ak-on, html.ak-on body { overflow: hidden; }
}
@media print { .ak-open, .ak-panel { display: none !important; } }
