.cb {
  --cb-ink:  #0b0b0b;
  --cb-card: #fbfaf7;
  --cb-line: rgb(0 0 0 / .08);
  --cb-r:    2.2rem;

  position: fixed;
  right: clamp(1.6rem, 2.4vw, 3.2rem);
  bottom: clamp(1.6rem, 2.4vw, 3.2rem);
  z-index: 140;
  font-family: var(--font-sans);
  transition: opacity .6s var(--ease), transform .8s var(--ease-out), visibility 0s;
}

.cb.is-waiting {
  opacity: 0;
  visibility: hidden;
  transform: translateY(3rem);
  pointer-events: none;
  transition: opacity .6s var(--ease), transform .8s var(--ease-out), visibility 0s linear .8s;
}

.cb-launch {
  position: relative;
  display: block;
  width: 8.4rem;
  min-width: 66px;
  aspect-ratio: 1194 / 1600;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease-out);
}

.cb-launch::before {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(217 179 120 / .55), transparent);
  filter: blur(.2rem);
  pointer-events: none;
}

@media (hover: hover) {
  .cb-launch:hover { transform: translateY(-.4rem) scale(1.05); }
}
.cb-launch:focus-visible { outline: 2px solid var(--gold); outline-offset: .6rem; border-radius: 1rem; }

.cb:not(.is-seen) .cb-launch-owl { animation: cb-hop 4.5s var(--ease-out) 2s infinite; }
@keyframes cb-hop {
  0%, 82%, 100% { transform: none; }
  88% { transform: translateY(-.9rem) rotate(-3deg); }
  94% { transform: translateY(0) rotate(2deg); }
}

.cb-launch-owl {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}
.cb-launch-owl img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 .8rem 1.4rem rgb(0 0 0 / .45));
}

.cb-launch-x {
  position: absolute;
  top: 0;
  right: -.6rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  background: var(--cb-ink);
  color: var(--gold);
  box-shadow: 0 0 0 .15rem var(--gold);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s var(--ease), transform .45s var(--ease-out);
}
.cb-launch-x svg { width: 1.4rem; height: 1.4rem; min-width: 12px; min-height: 12px; }
.cb.is-open .cb-launch-x { opacity: 1; transform: none; }

.cb-dot {
  position: absolute;
  top: .4rem;
  right: .2rem;
  width: 1.4rem;
  height: 1.4rem;
  min-width: 11px;
  min-height: 11px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 .25rem rgb(0 0 0 / .5);
  transition: transform .3s var(--ease);
}
.cb.is-seen .cb-dot { transform: scale(0); }

.cb-tip {
  position: absolute;
  right: calc(100% + 1.2rem);
  top: 18%;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .4rem .4rem 1.6rem;
  border-radius: 1.6rem;
  background: var(--cb-card);
  color: var(--cb-ink);
  box-shadow: 0 1rem 3rem -1rem rgb(0 0 0 / .35), 0 0 0 1px var(--cb-line);
  white-space: nowrap;

  opacity: 0;
  transform: translateX(1.2rem) scale(.96);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease-out);
}
.cb.has-tip .cb-tip { opacity: 1; transform: none; pointer-events: auto; }
.cb.is-open .cb-tip { opacity: 0; transform: translateX(1.2rem) scale(.96); pointer-events: none; }

.cb-tip::after {
  content: "";
  position: absolute;
  right: -.5rem;
  top: 2.4rem;
  width: 1.2rem;
  height: 1.2rem;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
  border-radius: .2rem;
}

.cb-tip-text {
  font-size: max(1.4rem, 13px);
  line-height: 1.3;
  text-align: left;
  color: rgb(0 0 0 / .6);
  padding: .8rem 0;
  cursor: pointer;
}
.cb-tip-text b { color: var(--cb-ink); font-weight: 600; font-size: 1.1em; }

.cb-tip-x {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  color: rgb(0 0 0 / .45);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.cb-tip-x svg { width: 1.3rem; height: 1.3rem; min-width: 11px; min-height: 11px; }
@media (hover: hover) {
  .cb-tip-x:hover { background: rgb(0 0 0 / .06); color: var(--cb-ink); }
}

.cb-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 1.6rem);
  display: flex;
  flex-direction: column;
  width: max(38rem, 340px);
  height: min(60rem, calc(100vh - 14rem));
  height: min(60rem, calc(100dvh - 14rem));
  border-radius: var(--cb-r);
  background: var(--cb-card);
  color: var(--cb-ink);
  box-shadow:
    0 0 0 1px rgb(217 179 120 / .35),
    0 3rem 8rem -2rem rgb(0 0 0 / .5);
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transform: translateY(2rem) scale(.96);
  transform-origin: bottom right;
  transition:
    opacity .35s var(--ease),
    transform .6s var(--ease-out),
    visibility 0s linear .6s;
}
.cb.is-open .cb-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .35s var(--ease),
    transform .6s var(--ease-out),
    visibility 0s;
}

.cb-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.8rem 1.8rem 1.8rem 2rem;
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(217 179 120 / .22), transparent 60%),
    var(--cb-ink);
  color: var(--paper);
}
.cb-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold-grad, var(--gold));
  opacity: .6;
}

.cb-avatar {
  position: relative;
  flex: none;
  width: 4.8rem;
  height: 4.8rem;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 0 0 .15rem var(--gold);
}

.cb-avatar img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 175%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -12%);
}

.cb-who { flex: 1; min-width: 0; }
.cb-name {
  font-family: var(--font-title);
  font-size: max(2.2rem, 18px);
  line-height: 1.1;
  color: var(--gold-lift);
}
.cb-status {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .3rem;
  font-size: max(1.25rem, 11px);
  letter-spacing: .02em;
  color: var(--on-dark);
}
.cb-status i {
  width: .8rem;
  height: .8rem;
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  background: #3ecf8e;
  box-shadow: 0 0 0 .3rem rgb(62 207 142 / .2);
}

.cb-x {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-dark-lift);
  color: var(--on-dark);
  transition: transform .45s var(--ease-arch), color .3s var(--ease), border-color .3s var(--ease);
}
.cb-x svg { width: 1.5rem; height: 1.5rem; min-width: 13px; min-height: 13px; }
@media (hover: hover) {
  .cb-x:hover { transform: rotate(90deg); color: var(--gold); border-color: var(--gold); }
}

.cb-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 2rem 1.8rem 1.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background:
    radial-gradient(rgb(0 0 0 / .035) 1px, transparent 1px) 0 0 / 1.6rem 1.6rem,
    var(--cb-card);
}

.cb-day {
  align-self: center;
  margin-bottom: .6rem;
  font-size: max(1.1rem, 10px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(0 0 0 / .4);
}

.cb-msg {
  max-width: 84%;
  padding: 1.1rem 1.5rem;
  font-size: max(1.5rem, 14px);
  line-height: 1.45;
  border-radius: 1.8rem;
  animation: cb-in .5s var(--ease-out) both;
}
.cb-msg b { font-weight: 600; }

.cb-msg--bot {
  align-self: flex-start;
  background: #fff;
  border-bottom-left-radius: .5rem;
  box-shadow: 0 0 0 1px var(--cb-line), 0 .4rem 1.2rem -.6rem rgb(0 0 0 / .12);
}
.cb-msg--user {
  align-self: flex-end;
  background: var(--cb-ink);
  color: var(--paper);
  border-bottom-right-radius: .5rem;
}

@keyframes cb-in {
  from { opacity: 0; transform: translateY(.8rem); }
  to   { opacity: 1; transform: none; }
}

.cb.is-open .cb-body > .cb-msg:nth-of-type(2) { animation-delay: .15s; }
.cb.is-open .cb-body > .cb-msg:nth-of-type(3) { animation-delay: .45s; }
.cb.is-open .cb-chips { animation-delay: .7s; }

.cb-typing {
  display: inline-flex;
  gap: .4rem;
  padding: 1.4rem 1.6rem;
}
.cb-typing i {
  width: .7rem;
  height: .7rem;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: rgb(0 0 0 / .35);
  animation: cb-bounce 1.2s infinite ease-in-out;
}
.cb-typing i:nth-child(2) { animation-delay: .15s; }
.cb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cb-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: .5; }
  30%           { transform: translateY(-.5rem); opacity: 1; }
}

.cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: .6rem;
  animation: cb-in .5s var(--ease-out) both;
}
.cb-chip {
  padding: .9rem 1.4rem;
  font-size: max(1.35rem, 13px);
  line-height: 1;
  border-radius: 99rem;
  border: 1px solid rgb(218 166 102 / .6);
  color: #8a5d22;
  background: rgb(217 179 120 / .08);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
@media (hover: hover) {
  .cb-chip:hover { background: var(--gold); border-color: var(--gold); color: var(--cb-ink); }
}

/* Links under one of Mr. NB's answers: a project, a page, a number to call. */
.cb-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}
.cb-links a {
  display: inline-flex;
  align-items: center;
  padding: .8rem 1.3rem;
  font-size: max(1.3rem, 12.5px);
  line-height: 1.15;
  border-radius: 99rem;
  border: 1px solid rgb(218 166 102 / .6);
  color: #8a5d22;
  background: rgb(217 179 120 / .08);
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cb-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) {
  .cb-links a:hover { background: var(--gold); border-color: var(--gold); color: var(--cb-ink); }
}

.cb-form {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 1.4rem;
  padding: .6rem .6rem .6rem 1.6rem;
  border-radius: 99rem;
  background: #fff;
  box-shadow: 0 0 0 1px var(--cb-line);
  transition: box-shadow .3s var(--ease);
}
.cb-form:focus-within { box-shadow: 0 0 0 1px var(--gold), 0 0 0 .4rem rgb(217 179 120 / .18); }

.cb-input {
  flex: 1;
  min-width: 0;
  padding: .8rem 0;
  font: inherit;
  font-size: max(1.5rem, 16px);
  color: var(--cb-ink);
  background: none;
  border: 0;
  outline: 0;
}
.cb-input::placeholder { color: rgb(0 0 0 / .38); }

.cb-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  background: var(--gold-grad, var(--gold));
  color: var(--cb-ink);
  transition: transform .4s var(--ease-out);
}
.cb-send svg { width: 1.8rem; height: 1.8rem; min-width: 16px; min-height: 16px; }
@media (hover: hover) {
  .cb-send:hover { transform: translateX(.2rem); }
}

.cb-foot {
  padding: 1rem 0 1.2rem;
  text-align: center;
  font-size: max(1.05rem, 10px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(0 0 0 / .32);
}

@media (max-width: 600px) {

  .cb-panel {
    position: fixed;
    left: 1.2rem;
    right: 1.2rem;
    bottom: calc(clamp(1.6rem, 2.4vw, 3.2rem) + 88px + 1.2rem);
    width: auto;
    height: calc(100dvh - 88px - 6rem);
    max-height: 64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb *, .cb *::before, .cb *::after { animation: none !important; transition: none !important; }
}