/* Quartz Aesthetics website chat assistant.

   Everything is scoped under .qchat. It leans on the site's own tokens from
   :root in index.html (--ink, --gold-2, --line, --mist, --muted, --ease-out)
   and repeats their values as fallbacks, so the file still stands on its own.

   Type: message text inherits the page's body face, whatever index.html sets,
   so the chat always reads like the rest of the page. Labels and buttons use
   the same wide, uppercase Archivo as .btn and .eyebrow. The small print is
   Figtree, as the site's own small print is.

   z-index 40. index.html uses 50 for the sticky header, 49 for the mobile
   menu overlay and 70 for the cookie bar; page content tops out at 1. So the
   chat sits over the page, under the open mobile menu, and under the cookie
   bar, which it also moves out of the way of (see --qchat-lift). The two
   exceptions are a phone with the keyboard up and a phone on its side: the
   sheet then goes to 60, over the header, so its own Close button cannot end
   up underneath it and it can use the whole height. */

.qchat{
  --q-ink:var(--ink,#121110);
  --q-gold:var(--gold-2,#a8853b);
  --q-line:var(--line,#e7e4de);
  --q-mist:var(--mist,#f5f4f1);
  --q-muted:var(--muted,#5d5952);
  --q-soft:var(--grad-soft,#f6f2e9);
  --q-ease:var(--ease-out,cubic-bezier(0.23,1,0.32,1));
  --q-edge:max(18px,env(safe-area-inset-right));
  --q-base:max(18px,env(safe-area-inset-bottom));
  --q-lift:var(--qchat-lift,0px);      /* set by chat.js while the cookie bar is up */
  --q-launch:52px;
  color:var(--q-ink);
  -webkit-text-size-adjust:100%;
}
.qchat *,.qchat *::before,.qchat *::after{box-sizing:border-box}
/* :where keeps this reset at zero specificity, so every rule below wins
   over it without having to shout. */
:where(.qchat) button{
  -webkit-appearance:none;appearance:none;border:0;background:none;margin:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.qchat-sr{
  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;
}

/* The label style shared by the launcher, the chips and the action buttons:
   the site's .btn, a size down. */
.qchat-launch,.qchat-chip,.qchat-act,.qchat-retry{
  font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;line-height:1.15;text-decoration:none;
}

/* ============ launcher ============ */
/* A round button on every screen. It used to carry its label beside the icon,
   and on a laptop the label sat over the hero's "See pricing" link. */
.qchat-launch{
  position:fixed;z-index:40;right:var(--q-edge);bottom:calc(var(--q-base) + var(--q-lift));
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--q-launch);height:var(--q-launch);padding:0;border-radius:999px;
  background:var(--q-ink);color:#fff;font-size:11px;
  border:1px solid rgba(255,255,255,.16);   /* keeps its edge over the dark footer */
  box-shadow:0 16px 34px -16px rgba(17,16,16,.6);
  transition:background .2s ease,transform .12s var(--q-ease);
  /* Arrives once, after the page's own entrance. "backwards" only: when it
     has finished, transform belongs to :active again. */
  animation:qchat-in .5s var(--q-ease) .4s backwards;
}
@keyframes qchat-in{from{opacity:0;transform:translateY(10px) scale(.96)}}
.qchat-launch svg{width:22px;height:22px;flex:none;display:block}
.qchat-launch:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.qchat .qchat-launch:hover{background:#312d2b}}
/* A white gap inside an ink ring, so the focus ring shows on the white page
   and on the dark footer alike. */
.qchat-launch:focus-visible{outline:2px solid var(--q-ink);outline-offset:3px;box-shadow:0 0 0 3px #fff,0 16px 34px -16px rgba(17,16,16,.6)}

/* A gold ring leaves the button to say the chat is there: twice when the
   page loads and once each time the visitor moves to another page (chat.js
   sets data-ring). It is over in under five seconds. Only transform and
   opacity move, on an element the size of the button, and the ring stays
   inside the gap between the button and the cookie bar. It never runs once
   the chat has been opened (data-used), under the pointer, or while the
   button has keyboard focus. */
.qchat-launch::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1.5px solid var(--q-gold);opacity:0;pointer-events:none;
}
.qchat[data-ring="2"] .qchat-launch::after{animation:qchat-ring 2.2s var(--q-ease) 1.4s 2}
.qchat[data-ring="1"] .qchat-launch::after{animation:qchat-ring 2.2s var(--q-ease) .7s 1}
@keyframes qchat-ring{
  0%{opacity:0;transform:scale(1)}
  8%{opacity:.8;transform:scale(1.03)}
  64%,100%{opacity:0;transform:scale(1.28)}
}
.qchat[data-open="true"] .qchat-launch::after,
.qchat[data-used="true"] .qchat-launch::after,
.qchat .qchat-launch:focus-visible::after{animation:none}
@media (hover:hover) and (pointer:fine){.qchat .qchat-launch:hover::after{animation:none}}

/* The button's words ("Ask a question", "Close") are not shown. Its name for
   screen readers is its aria-label. A visible tag was tried beside the button
   and above it, and in both places it could sit over the hero's links or the
   video caption. */
.qchat-launch-t{display:none}
.qchat .qchat-launch .qchat-ico-x{display:none}
.qchat[data-open="true"] .qchat-launch .qchat-ico-chat{display:none}
.qchat[data-open="true"] .qchat-launch .qchat-ico-x{display:block}

/* The launcher is fixed to the bottom corner, and at the very end of the page
   that is where the footer's legal row sits, privacy link included. While the
   chat is on the page the footer gets room underneath for the launcher: its
   own 34px, plus the launcher's height and its gap from the edge. Nothing
   changes when the chat is not there. */
body:has(> .qchat) footer{padding-bottom:calc(34px + 52px + 18px)}

/* ============ panel ============ */
.qchat-panel{
  position:fixed;z-index:40;right:var(--q-edge);
  bottom:calc(var(--q-base) + var(--q-lift) + var(--q-launch) + 12px);
  width:360px;max-width:calc(100vw - 36px);
  height:600px;
  max-height:calc(100vh - 72px - var(--q-base) - var(--q-lift) - var(--q-launch) - 28px);
  max-height:calc(100dvh - 72px - var(--q-base) - var(--q-lift) - var(--q-launch) - 28px);
  display:flex;flex-direction:column;overflow:hidden;margin:0;padding:0;
  background:#fff;border:1px solid var(--q-line);border-radius:4px;
  box-shadow:0 30px 70px -28px rgba(17,16,16,.5);
  /* Closed. Opens from the launcher: the origin is the launcher's own corner,
     and it grows from .96, never from nothing. Only transform and opacity
     move; visibility just flips once the fade is done. */
  transform-origin:calc(100% - 26px) calc(100% + 30px);
  transform:scale(.96);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .16s var(--q-ease),opacity .14s ease-out,visibility 0s linear .16s;
}
.qchat[data-open="true"] .qchat-panel{
  transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .22s var(--q-ease),opacity .18s ease-out,visibility 0s;
}
.qchat-panel:focus{outline:none}

.qchat-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--q-ink);color:#fff;padding:9px 8px 9px 18px;
}
.qchat-id{display:flex;align-items:center;gap:13px;min-width:0}
/* The gold diamond is the site's own mark: it separates the names in the
   brand band on the home page. */
.qchat-gem{width:8px;height:8px;flex:none;background:var(--q-gold);transform:rotate(45deg)}
.qchat-kicker{
  font-family:'Archivo',sans-serif;font-stretch:110%;font-weight:600;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;line-height:1.2;
  color:#cdb783;margin:0 0 4px;
}
.qchat .qchat-title{
  font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:700;
  font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;
  color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qchat-close{
  flex:none;width:44px;height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  transition:background .2s ease,transform .12s var(--q-ease);
}
.qchat-close svg{width:18px;height:18px;display:block}
.qchat-close:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.qchat .qchat-close:hover{background:rgba(255,255,255,.12)}}
.qchat .qchat-close:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* ============ conversation ============ */
.qchat-log{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--q-mist);padding:16px 14px 18px;
  display:flex;flex-direction:column;gap:10px;
}
.qchat .qchat-log:focus-visible{outline:2px solid var(--q-ink);outline-offset:-2px}
.qchat-msg{display:flex;flex-direction:column;gap:8px;max-width:100%}
.qchat-bubble{
  max-width:88%;padding:11px 14px;border-radius:4px;
  font-size:15.5px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;
  margin:0;
}
/* The assistant's words carry the same gold rule as the message preview on
   the Book page. */
.qchat-msg--a{align-items:flex-start}
.qchat-msg--a .qchat-bubble{background:#fff;border:1px solid var(--q-line);border-left:3px solid var(--q-gold);border-radius:3px 4px 4px 3px}
.qchat-msg--u{align-items:flex-end}
.qchat-msg--u .qchat-bubble{background:var(--q-ink);color:#fff}
.qchat-msg--e .qchat-bubble{background:var(--q-soft);border:1px solid var(--q-line);color:#4c4441;font-size:14.5px}

.qchat-acts,.qchat-chips{display:flex;flex-wrap:wrap;gap:8px}
.qchat-chips{margin-top:2px}
.qchat .qchat-chip,.qchat .qchat-act,.qchat .qchat-retry{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:44px;padding:8px 17px;border-radius:999px;
  font-size:10.5px;color:var(--q-ink);background:#fff;border:1.5px solid var(--q-ink);
  transition:background .2s ease,color .2s ease,transform .12s var(--q-ease);
}
.qchat .qchat-act--main{background:var(--q-ink);color:#fff}
.qchat-chip:active,.qchat-act:active,.qchat-retry:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .qchat .qchat-chip:hover,.qchat .qchat-act:hover,.qchat .qchat-retry:hover{background:var(--q-ink);color:#fff}
  .qchat .qchat-act--main:hover{background:#312d2b}
}

/* The greeting, typed out the first time the chat is opened (chat.js). The
   text is in the bubble all along, in a transparent colour, and the part
   typed so far is coloured in by a highlight range, so the lines never
   change. A thin gold caret follows the last letter. The three suggested
   questions keep their space, cannot be reached while hidden, and fade in
   when the typing is done. */
.qchat[data-greeting="typing"] .qchat-msg--a .qchat-bubble{position:relative;color:transparent}
::highlight(qchat-typed){color:#121110}
.qchat-caret{position:absolute;left:0;top:0;width:1.5px;height:1em;background:var(--q-gold);pointer-events:none}
.qchat-chips{transition:opacity .25s ease-out}
.qchat[data-greeting="typing"] .qchat-chips{opacity:0;visibility:hidden;transition:none}

/* typing */
.qchat-typing .qchat-bubble{display:inline-flex;align-items:center;gap:5px;padding:15px 16px}
.qchat-dot{width:6px;height:6px;border-radius:50%;background:var(--q-muted);opacity:.35;animation:qchat-dot 1.1s ease-in-out infinite}
.qchat-dot:nth-child(2){animation-delay:.16s}
.qchat-dot:nth-child(3){animation-delay:.32s}
@keyframes qchat-dot{0%,70%,100%{opacity:.3}35%{opacity:1}}

/* ============ input ============ */
.qchat-form{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:10px 12px 10px;background:#fff;border-top:1px solid var(--q-line);margin:0;
}
.qchat .qchat-input{
  flex:1 1 auto;min-width:0;height:48px;padding:0 14px;margin:0;
  font:inherit;font-size:16px;line-height:1.2;  /* 16px: below that iPhone Safari zooms the page on focus */
  color:var(--q-ink);background:#fff;
  border:1px solid #cfc9c0;border-radius:4px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s ease;
}
.qchat .qchat-input::placeholder{color:var(--q-muted);opacity:1}
/* One 2px ink ring, drawn on the border line rather than outside it, so the
   box does not appear to grow when it takes focus. */
.qchat .qchat-input:focus,.qchat .qchat-input:focus-visible{outline:2px solid var(--q-ink);outline-offset:-1px;border-color:var(--q-ink)}
.qchat .qchat-send{
  flex:none;width:48px;height:48px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--q-ink);color:#fff;
  transition:background .2s ease,opacity .2s ease,transform .12s var(--q-ease);
}
.qchat-send svg{width:20px;height:20px;display:block}
.qchat-send:active{transform:scale(.95)}
.qchat .qchat-send[disabled]{opacity:.35;cursor:default}
@media (hover:hover) and (pointer:fine){.qchat .qchat-send:not([disabled]):hover{background:#312d2b}}

.qchat-note{
  flex:none;margin:0;padding:4px 14px 13px;background:#fff;
  font-family:'Figtree',sans-serif;font-stretch:100%;font-weight:500;
  font-size:11.5px;line-height:1.4;color:var(--q-muted);
  text-wrap:balance;     /* no lone "privacy." on a second line */
}
/* The link is one small word. The padding gives it a 42px tall target
   without moving the line, and stops short of the text box and the Send
   button above it, so a low tap on Send cannot open the privacy page. */
.qchat .qchat-note a{
  color:var(--q-ink);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:13px 8px;margin:-13px -8px;
}

/* ============ phones: a sheet ============ */
/* Narrow, or short: a phone held sideways is 844 by 390 and would otherwise
   get the desktop panel with two lines of conversation. chat.js uses the
   same test (isPhone). */
@media (max-width:480px),(max-height:520px){
  body:has(> .qchat) footer{padding-bottom:calc(34px + 54px + 14px)}
  .qchat{--q-launch:54px;--q-edge:max(14px,env(safe-area-inset-right));--q-base:max(14px,env(safe-area-inset-bottom))}
  /* The home page's "Book now" and "See pricing" sit centred under the hero
     video, at the foot of the first screen. On a phone narrower than about
     375px the second one reached the button. This moves the pair left: 30px
     at most, on a 320px phone, 10px at 360px, nothing from 380px up. An
     offset, not padding, so the two links keep their one line. Only while the
     chat is on the page. */
  body:has(> .qchat) .hero-under{position:relative;left:max(-30px,min(0px,calc((100vw - 380px) / 2)))}
  .qchat[data-open="true"] .qchat-launch{visibility:hidden}
  .qchat-panel{
    left:max(8px,env(safe-area-inset-left),var(--qchat-side,0px));right:max(8px,env(safe-area-inset-right));
    /* below the 72px header, above the home indicator, the cookie bar and the keyboard */
    top:calc(80px + var(--qchat-vvtop,0px));
    bottom:calc(max(8px,env(safe-area-inset-bottom)) + var(--q-lift) + var(--qchat-kb,0px));
    width:auto;max-width:none;height:auto;max-height:none;
    transform-origin:calc(100% - 28px) calc(100% - 20px);
  }
  /* With the keyboard up there is no room to spare, so the sheet takes the
     whole of what is left and the cookie bar's space is no longer needed
     (the keyboard is covering it). */
  .qchat[data-kb="true"] .qchat-panel{
    top:calc(8px + var(--qchat-vvtop,0px));
    bottom:calc(8px + var(--qchat-kb,0px));
    z-index:60;     /* over the site header (50), under the cookie bar (70) */
  }
  .qchat-bubble{max-width:92%}
}

/* A half-width laptop window, or a laptop zoomed in: the hero's video
   column is then only as wide as its two links, which end where the button
   sits. The padding keeps the pair clear of it. Only while the chat is on the
   page. */
@media (min-width:701px) and (max-width:1000px){
  body:has(> .qchat) .hero-under{padding-right:56px}
}

/* A phone on its side has about 390px of height in all. The sheet takes the
   whole of it, over the site header, and chat.js puts it beside the cookie
   bar instead of above it (--qchat-side). */
@media (max-height:520px){
  .qchat-panel{top:calc(8px + var(--qchat-vvtop,0px));z-index:60}
}
/* Short and wide: keep the sheet to a readable width in the right corner
   rather than stretching it across the whole screen. */
@media (max-height:520px) and (min-width:481px){
  .qchat-panel{left:auto;width:min(520px,calc(100vw - 16px - var(--qchat-side,0px)))}
}

/* ============ less motion ============ */
@media (prefers-reduced-motion:reduce){
  .qchat-panel,.qchat[data-open="true"] .qchat-panel{transform:none;transition:opacity .12s linear,visibility 0s}
  .qchat-launch,.qchat-close,.qchat-chip,.qchat-act,.qchat-retry,.qchat-send{transition:none}
  /* The button fades in without moving and the ring does not run. */
  .qchat-launch{animation:qchat-fade .3s linear .4s backwards}
  .qchat[data-ring] .qchat-launch::after{animation:none}
  .qchat-launch:active,.qchat-close:active,.qchat-chip:active,.qchat-act:active,.qchat-retry:active,.qchat-send:active{transform:none}
  .qchat-dot{animation:none;opacity:.6}
  .qchat-chips{transition:none}
}
@keyframes qchat-fade{from{opacity:0}}
@media print{.qchat{display:none}}