/* ACT-299: the "Chat with us" launcher and the connecting panel. The launcher is the design system's primary pill button (ink, hovers to ember), fixed bottom right.
   The cookie banner sits bottom left, so the two never meet. The panel takes the launcher's corner while Crisp loads (a full-screen sheet on a phone). */
.act-chat { display: flex; flex-direction: column-reverse; align-items: flex-end; position: fixed; z-index: 70; right: 1.5rem; bottom: 1.5rem; }
.act-chat[hidden], .act-chat.is-away:not(.is-open) { display: none; }
.act-chat.is-open .act-chat-btn { display: none; }
.act-chat-ico { display: none; }
.act-chat-btn { height: 3rem; padding: 0 1.5rem; border: 0; border-radius: var(--act-radius-pill); background: var(--act-ink); color: var(--act-paper); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; white-space: nowrap; touch-action: manipulation; transition: background .2s ease, color .2s ease; }
.act-chat-btn:hover { background: var(--act-ember); color: var(--act-ink); }
.act-chat-btn:focus-visible, .act-chat-x:focus-visible, .act-chat-retry:focus-visible, .act-chat-mail:focus-visible { outline: 2px solid var(--act-ember-text); outline-offset: 3px; }
.act-chat-sr { position: absolute; width: .0625rem; height: .0625rem; margin: -.0625rem; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.act-chat-panel { display: flex; flex-direction: column; width: min(22.5rem, calc(100vw - 2rem)); height: min(30rem, calc(100svh - 3rem)); background: var(--act-white); color: var(--act-ink); border-radius: var(--act-radius-card); box-shadow: var(--act-shadow-demo); overflow: hidden; animation: act-chat-in var(--act-dur-fast) var(--act-ease-settle); }
.act-chat-panel[hidden] { display: none; }
.act-chat-panel:focus { outline: none; }
.act-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 1rem 1.5rem; background: var(--act-ink); color: var(--act-paper); }
.act-chat-head h2 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: inherit; }
.act-chat-x { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.25rem 0; border: 0; border-radius: var(--act-radius-pill); background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; }
.act-chat-x:hover { background: var(--act-ink-line); }
.act-chat-notice { margin: 0; padding: .625rem 1.5rem; background: var(--act-paper); font-size: var(--act-small); line-height: 1.4; color: var(--act-body); border-bottom: .0625rem solid var(--act-line); }
.act-chat-notice a { color: var(--act-ember-text); text-decoration: underline; text-underline-offset: .2rem; }
.act-chat-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; text-align: center; }
.act-chat-dots { display: flex; gap: .5rem; }
.act-chat-dots[hidden], .act-chat-fail[hidden] { display: none; }
.act-chat-dots i { width: .625rem; height: .625rem; border-radius: var(--act-radius-pill); background: var(--act-ember); animation: act-chat-dot 1.2s var(--act-ease-travel) infinite; }
.act-chat-dots i:nth-child(2) { animation-delay: .15s; }
.act-chat-dots i:nth-child(3) { animation-delay: .3s; }
.act-chat-msg { margin: 0; max-width: 17rem; font-size: 1rem; color: var(--act-body); }
.act-chat-fail { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.act-chat-mail, .act-chat-retry { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 1.5rem; border-radius: var(--act-radius-pill); font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.act-chat .act-chat-mail { background: var(--act-ink); color: var(--act-paper); border: 0; text-decoration: none; }
.act-chat .act-chat-mail:hover { background: var(--act-ember); color: var(--act-ink); }
.act-chat-retry { background: transparent; color: var(--act-ink); border: 0; box-shadow: var(--act-ring); }
.act-chat-retry:hover { box-shadow: var(--act-ring-hover); }
@keyframes act-chat-in { from { transform: translateY(.5rem); } to { transform: none; } }
@keyframes act-chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-.375rem); opacity: 1; } }
/* the Docs pages end in the "Still stuck?" band: content gets room above the launcher, and the launcher steps away while the band (which has its own Chat with us) is on screen */
body:has(.act-chat) main { padding-bottom: 4.5rem; }
@media (max-width: 40rem) {
  /* a compact round icon button; it rides above the cookie banner (--act-cs-h, set by consent.js) so the two never meet */
  .act-chat { right: 1rem; bottom: calc(1rem + var(--act-cs-h, 0px)); }
  .act-chat-btn { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; }
  .act-chat-ico { display: block; }
  .act-chat-label { position: absolute; width: .0625rem; height: .0625rem; margin: -.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the open panel is a full-screen sheet above the banner */
  .act-chat.is-open { inset: 0; z-index: 85; }
  .act-chat-panel { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .act-chat-btn { transition: none; } .act-chat-panel { animation: none; } .act-chat-dots i { animation: none; opacity: .7; } }