@charset "UTF-8";

/* Tokens only. Desktop: a chat window bottom right; phones: a bottom sheet over a scrim. */
.dq{position:fixed;inset:auto 24px 24px auto;margin:0;padding:0;border:0;background:transparent;width:400px;max-width:calc(100vw - 32px);max-height:none;color:var(--text);font-family:var(--sans);z-index:70;overflow:visible} /* width-ok: the chat dialog */
.dq::backdrop{background:rgba(9,38,39,.42)}
.dq-panel{display:flex;flex-direction:column;height:min(620px,calc(100dvh - 48px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-lg);overflow:hidden}
.dq-head{display:flex;align-items:flex-start;gap:12px;padding:16px 10px 14px 18px;border-bottom:1px solid var(--line2)}
.dq-head-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);background:var(--teal-dim);color:var(--teal-ink)}
.dq-head-ic svg{width:18px;height:18px}
.dq-head-text{flex:1;min-width:0}
.dq-title{margin:0;font-size:16px;font-weight:650;line-height:1.3;letter-spacing:-.01em;outline:none}
.dq-sub{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.dq-log{list-style:none;margin:0;padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1 1 auto;min-height:72px;background:var(--bg);overscroll-behavior:contain}
.dq-log:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.dq-msg{display:flex;flex-direction:column;max-width:88%;align-self:flex-start}
.dq-msg--visitor{align-self:flex-end;align-items:flex-end}
.dq-msg--note{max-width:100%;align-self:stretch}
.dq-meta{margin:0 2px 3px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dq-body{padding:9px 12px;border-radius:var(--r-field);background:var(--surface);border:1px solid var(--line2);font-size:14.5px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.dq-msg--visitor .dq-body{background:var(--teal-dim);border-color:transparent}
.dq-msg--team .dq-body{border-color:color-mix(in srgb,var(--teal) 45%,transparent)}
.dq-msg--note .dq-body{background:transparent;border:1.5px dashed var(--line-strong);color:var(--soft);font-size:13.5px}
.dq-msg.is-pending .dq-body{opacity:.6}
.dq-typing{display:flex;align-items:center;gap:8px;margin:0;padding:6px 18px;font-size:12.5px;color:var(--muted);background:var(--bg)}
.dq-typing[hidden],.dq-notice[hidden],.dq-error[hidden],.dq-contactform[hidden],.dq-first[hidden]{display:none}
.dq-dots{display:inline-flex;gap:3px}.dq-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.6}
.dq-notice{margin:0;padding:10px 18px;font-size:13.5px;line-height:1.45;color:var(--teal-ink);background:var(--teal-dim)}
.dq-contactform,.dq-form{display:grid;gap:10px;padding:12px 18px;border-top:1px solid var(--line2)}
.dq-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dq-row .ui-field,.dq-form .ui-field{margin:0}
.dq-help{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.dq-first{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.dq-first legend{padding:0;font-size:13.5px;font-weight:600;margin-bottom:2px}
.dq-more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--teal-ink)}
.dq-more summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:var(--r-sm)}
.dq-more[open] summary{margin-bottom:6px}
.dq-more > div{display:grid;gap:8px}
.dq-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.dq-compose{display:flex;align-items:flex-end;gap:8px}
.dq-compose textarea{flex:1;min-height:48px;max-height:140px;resize:none;font-size:16px}
.dq-send{flex:none}
.dq-error{margin:0;font-size:13px;color:var(--bad-ink)}
.dq-foot{display:flex;justify-content:flex-end;padding:0 18px 12px}
.dq-foot a{font-size:12.5px;color:var(--teal-ink);text-decoration:underline;text-underline-offset:2px;min-height:32px;display:inline-flex;align-items:center}
.dq-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The Tantôt support bubble steps aside while a business conversation is open. */
body:has(.dq[open]) .lc{display:none}
@media (max-width:640px){
  .dq{inset:auto 0 0 0;width:100%;max-width:none}
  .dq-panel{height:min(88dvh,680px);border-radius:var(--r-card) var(--r-card) 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
}
@media (max-width:420px){
  .dq-row{grid-template-columns:1fr}
  html:has(.dq[open]){overflow:hidden}
}
@media (prefers-reduced-motion:no-preference){
  .dq[open] .dq-panel{animation:dq-in .26s cubic-bezier(.2,.8,.2,1)}
  .dq-msg:last-child{animation:dq-msg .22s ease-out}
  .dq-dots i{animation:dq-blink 1.2s infinite}.dq-dots i:nth-child(2){animation-delay:.2s}.dq-dots i:nth-child(3){animation-delay:.4s}
  @keyframes dq-in{from{opacity:0;transform:translateY(14px)}}
  @keyframes dq-msg{from{opacity:0;transform:translateY(6px)}}
  @keyframes dq-blink{50%{opacity:.15}}
  @media (max-width:640px){@keyframes dq-in{from{transform:translateY(100%)}}}
}
