/* The signed-in Cold Calling assistant. All measurements here are production scale. */
@font-face { font-family: "Labbie Assistant Inter"; src: url("assets/fonts/inter/Inter-Light.woff2") format("woff2"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "Labbie Assistant Inter"; src: url("assets/fonts/intro/Inter-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
.cc-assistant {
  --cc-assistant-spring: cubic-bezier(.2, 1, .28, 1);
  /* The conversation's text size: the chat bubbles and what is typed in the prompt box. */
  --cc-assistant-text-size: 13.2px;
  /* The gap Ask Agent keeps from the page's walls (a device's safe area wins where larger). */
  --cc-assistant-edge: 24px;
  /* Which way the card opens out of the pill: up and left, from the bottom right, unless
     the pill has been moved — then assistant.js turns these toward wherever it rests. */
  --cc-assistant-rise: 10px;
  --cc-assistant-origin: right bottom;
  --cc-assistant-nudge-x: 4px;
  --cc-assistant-nudge-y: 5px;
  position: fixed;
  right: max(var(--cc-assistant-edge), env(safe-area-inset-right));
  bottom: max(var(--cc-assistant-edge), env(safe-area-inset-bottom));
  /* Moved as one piece: the pill and everything in it stay on their own layer. */
  will-change: transform;
  z-index: 2800;
  color: #080808;
  font-family: "Labbie Assistant Inter", "Inter", sans-serif;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}
.cc-assistant[hidden] { display: none !important; }
.cc-assistant button, .cc-assistant input { font-family: inherit; }
.cc-assistant button { cursor: pointer; }
.cc-assistant__launcher-wrap {
  position: relative;
  width: max-content;
  /* Closing: the pill is back at once (never held hidden), fading and settling
     into place underneath the card as the card lands on it. */
  transition: opacity 300ms cubic-bezier(0, 0, .2, 1) 120ms, transform 560ms var(--cc-assistant-spring) 60ms, visibility 0s;
}
.cc-assistant[data-state="open"] .cc-assistant__launcher-wrap {
  opacity: 0;
  transform: translate(var(--cc-assistant-nudge-x), var(--cc-assistant-nudge-y)) scale(.965);
  visibility: hidden;
  pointer-events: none;
  /* Opening: the pill gives way to the card. */
  transition: opacity 330ms ease, transform 520ms var(--cc-assistant-spring), visibility 0s 520ms;
}
.cc-assistant[data-state="dismissing"] .cc-assistant__launcher-wrap {
  opacity: 0;
  transform: translate(6px, 5px) scale(.78);
  pointer-events: none;
  transition: opacity 330ms ease, transform 520ms var(--cc-assistant-spring), visibility 0s 520ms;
}
.cc-assistant__launcher {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 37px;
  padding: 5px 22px 5px 6px;
  border: 1px solid rgb(0 0 0 / 19%);
  border-radius: 999px;
  background: linear-gradient(17deg, #d3d1d1 1%, #c5c5c5 18%, #e3e3e3 38%, #e9e9e9 57%, #c1c1c1 100%);
  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
  color: #050505;
  font-size: clamp(12px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  /* It can be dragged: the finger moves the pill, not the page, and no
     selection or callout starts on a long press. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: box-shadow 180ms ease, filter 180ms ease;
}
.cc-assistant__launcher img { -webkit-user-drag: none; }
.cc-assistant__launcher:hover { box-shadow: 0 2px 6px rgb(0 0 0 / 10%); filter: brightness(1.012); }
.cc-assistant__launcher:active { filter: brightness(.98); transition-duration: 80ms; }
.cc-assistant__avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; background: #454545; }
.cc-assistant__avatar--launcher { width: 26px; height: 26px; }
.cc-assistant__dismiss {
  position: absolute;
  top: -11px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 21%);
  border-radius: 50%;
  background: #d8d8d8;
  color: #050505;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, background-color 200ms ease;
}
.cc-assistant__launcher-wrap:hover .cc-assistant__dismiss {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 200ms ease 1s, background-color 200ms ease;
}
.cc-assistant__dismiss:focus-visible { opacity: 1; pointer-events: auto; }
.cc-assistant__dismiss:hover { background: #e5e5e5; }
.cc-assistant__dismiss:active { background: #c8c8c8; transition-duration: 80ms; }
.cc-assistant__dismiss svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.cc-assistant__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(330px, calc(100vw - 32px));
  height: min(385px, calc(100dvh - 48px));
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 16px;
  background: linear-gradient(180deg, #d3d1d1 0%, #e9e9e9 18%, #e9e9e9 100%);
  box-shadow: 0 7px 23px rgb(0 0 0 / 13%);
  opacity: 0;
  transform: translate3d(0, var(--cc-assistant-rise), 0) scale(.965);
  transform-origin: var(--cc-assistant-origin);
  visibility: hidden;
  pointer-events: none;
  /* Closing: the opening in reverse. The card slides back down the path it
     came up and settles into the pill's corner, staying visible while it
     moves and dissolving as it lands, so the pill takes its place. */
  transition: transform 520ms cubic-bezier(.32, .72, 0, 1), opacity 340ms cubic-bezier(.4, 0, .6, 1) 60ms, visibility 0s 520ms;
}
.cc-assistant[data-state="open"] .cc-assistant__panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: transform 680ms var(--cc-assistant-spring), opacity 360ms ease, visibility 0s;
}
.cc-assistant__header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 9px 12px;
  border-bottom: 1px solid rgb(0 0 0 / 11%);
}
.cc-assistant__header h2 { min-width: 0; margin: 0; color: #090909; font-size: 13px; font-weight: 300 !important; line-height: 1.2; }
.cc-assistant__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #000;
  transition: opacity 170ms ease, transform 200ms var(--cc-assistant-spring);
}
.cc-assistant__close:hover { opacity: .58; transform: scale(1.06); }
.cc-assistant__close:active { transform: scale(.88); transition-duration: 80ms; }
.cc-assistant__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cc-assistant__messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px 26px 11px 13px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.cc-assistant__messages::-webkit-scrollbar { display: none; }
.cc-assistant__scrollbar {
  position: absolute;
  top: 59px;
  right: 7px;
  bottom: 53px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 12px;
  color: rgb(0 0 0 / 30%);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.cc-assistant__scrollbar:focus { outline: none; }
.cc-assistant__scrollbar:focus-visible { outline: 2px solid #111; outline-offset: 3px; border-radius: 6px; }
.cc-assistant__scrollbar-arrow { flex: none; width: 0; height: 0; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.cc-assistant__scrollbar-arrow--up { border-bottom: 6px solid currentColor; }
.cc-assistant__scrollbar-arrow--down { border-top: 6px solid currentColor; }
.cc-assistant__scrollbar-track { position: relative; flex: 1; width: 12px; min-height: 0; }
.cc-assistant__scrollbar-thumb { position: absolute; top: 0; left: 4px; width: 4px; height: 72px; border-radius: 99px; background: rgb(0 0 0 / 30%); }
.cc-assistant__message { display: flex; width: 100%; }
.cc-assistant__message:first-child { margin-top: auto; }
.cc-assistant__message--user { justify-content: flex-end; }
.cc-assistant__message--assistant { justify-content: flex-start; }
.cc-assistant__bubble {
  max-width: min(86%, 252px);
  padding: 8px 10px;
  border-radius: 9px;
  color: #080808;
  font-size: var(--cc-assistant-text-size);
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.cc-assistant__text { margin: 0; white-space: pre-wrap; }
.cc-assistant__bubble-images { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-assistant__bubble-images img { display: block; max-width: 100%; max-height: 140px; border-radius: 6px; object-fit: cover; }
.cc-assistant__bubble-images img:not(:only-child) { width: 64px; height: 64px; }
.cc-assistant__bubble-images + .cc-assistant__text { margin-top: 6px; }
.cc-assistant__typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px; }
.cc-assistant__typing i { width: 6px; height: 6px; border-radius: 50%; background: rgb(0 0 0 / 45%); animation: cc-assistant-typing 1.1s ease-in-out infinite; }
.cc-assistant__typing i:nth-of-type(2) { animation-delay: 150ms; }
.cc-assistant__typing i:nth-of-type(3) { animation-delay: 300ms; }
@keyframes cc-assistant-typing { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
.cc-assistant__message--user .cc-assistant__bubble { background: #fafafa; }
.cc-assistant__message--assistant .cc-assistant__bubble { background: rgb(0 0 0 / 13%); }
.cc-assistant__message--user.is-new { animation: cc-assistant-message-user 360ms var(--cc-assistant-spring) both; }
.cc-assistant__message--assistant.is-new { animation: cc-assistant-message-assistant 380ms var(--cc-assistant-spring) both; }
@keyframes cc-assistant-message-user { from { opacity: 0; transform: translate(5px, 7px); } to { opacity: 1; transform: none; } }
@keyframes cc-assistant-message-assistant { from { opacity: 0; transform: translate(-5px, 7px); } to { opacity: 1; transform: none; } }
.cc-assistant__composer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 10px 10px; }
.cc-assistant__composer label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cc-assistant__composer input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: #d9d9d9;
  color: #111;
  font-size: var(--cc-assistant-text-size);
  font-weight: 400;
  transition: none;
}
.cc-assistant__composer input::placeholder { color: #929292; opacity: 1; }
/* The prompt box: the paperclip sits inside it, on the left. */
.cc-assistant__field { position: relative; flex: 1; min-width: 0; }
.cc-assistant__field input { padding-left: 36px; }
.cc-assistant__attach {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lds-icon-color-inactive, #8E8E93);
  transition: color 160ms ease, transform 200ms var(--cc-assistant-spring);
}
.cc-assistant__attach:hover { color: var(--lds-icon-color-neutral, #1D1D1F); }
.cc-assistant__attach:active { transform: scale(.9); transition-duration: 80ms; }
.cc-assistant__attach .cc-i { width: 19px; height: 19px; stroke-width: 1.8; }
/* Images waiting to be sent, above the prompt box. */
.cc-assistant__attachments { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; padding: 6px 2px 2px; }
.cc-assistant__attachment { position: relative; width: 44px; height: 44px; border-radius: 9px; background: #d9d9d9; }
.cc-assistant__attachment img { display: block; width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.cc-assistant__attachment--loading { animation: cc-assistant-pulse 1.1s ease-in-out infinite; }
@keyframes cc-assistant-pulse { 50% { opacity: .5; } }
.cc-assistant__attachment-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lds-color-black, #000000);
  color: var(--lds-icon-color-on-primary, #FFFFFF);
}
.cc-assistant__attachment-remove:hover { background: #202020; }
.cc-assistant__attachment-remove svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cc-assistant__composer input:focus,
.cc-assistant__composer input:focus-visible {
  background: #d9d9d9;
  border-radius: 999px;
  outline: none;
  box-shadow: none;
}
.cc-assistant__send {
  box-sizing: border-box;
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  color: #fff;
  transition: transform 300ms var(--cc-assistant-spring), background-color 200ms ease;
}
.cc-assistant__send:hover { background: #202020; }
.cc-assistant__send:active { transform: scale(.94); transition-duration: 100ms; }
.cc-assistant__send:disabled,
.cc-assistant__send:disabled:hover { background: var(--lds-icon-color-inactive, #8E8E93); transform: none; cursor: not-allowed; }
.cc-assistant__send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.cc-assistant button:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (max-width: 720px) {
  .cc-assistant { --cc-assistant-edge: 16px; }
  .cc-assistant__panel { width: min(330px, calc(100vw - 32px)); height: min(385px, calc(100dvh - max(32px, env(safe-area-inset-top)) - max(32px, env(safe-area-inset-bottom)))); }
}
/* The × that hides Ask Agent is a desktop control only, revealed on hover. Phones and
   tablets — a touch screen, or the app's phone/tablet layout (≤900px) — have no × at all. */
@media (hover: none), (max-width: 900px) { .cc-assistant__dismiss { display: none; } }
/* Being moved, until it rests: the pill travels as one solid piece. Only its shadow deepens;
   nothing inside it scales, brightens or shifts, and its × keeps out of the way. */
.cc-assistant[data-dragging] .cc-assistant__launcher { cursor: grabbing; filter: none; box-shadow: 0 2px 6px rgb(0 0 0 / 10%); transition: box-shadow 180ms ease; }
.cc-assistant[data-dragging] .cc-assistant__dismiss { opacity: 0; pointer-events: none; transition: none; }
/* On a desktop the Ask Agent pill, and its ×, are 20% larger. Phones and tablets keep the size above. */
@media (hover: hover) and (min-width: 901px) {
  .cc-assistant__launcher { gap: 11px; min-height: 44px; padding: 6px 26px 6px 7px; font-size: clamp(14.4px, 1.32vw, 20.4px); }
  .cc-assistant__avatar--launcher { width: 31px; height: 31px; }
  .cc-assistant__dismiss { top: -13px; right: -11px; width: 26px; height: 26px; }
  .cc-assistant__dismiss svg { width: 14px; height: 14px; }
}
@media (max-height: 440px) { .cc-assistant__header { min-height: 46px; padding-block: 6px; } }
@media (prefers-reduced-motion: reduce) {
  .cc-assistant *, .cc-assistant *::before, .cc-assistant *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* The two waits that loop are shown still instead. */
  .cc-assistant__typing i, .cc-assistant__attachment--loading { animation: none !important; opacity: .6; }
  /* Opening and closing happen at once, with no staggered start. */
  .cc-assistant__launcher-wrap, .cc-assistant__panel { transition-delay: 0s !important; }
}
