/* "First look at new agents" sign-up prompt (Alan, 30 Oct 2026). Slides in from the right edge after 90 s on the site. */
.ocs { position: fixed; right: 0; top: 50%; z-index: 2147483000; display: flex; align-items: center; gap: 12px;
  transform: translate(110%, -50%); transition: transform .6s cubic-bezier(.2, .9, .25, 1.15); font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; pointer-events: none; }
.ocs.is-in { transform: translate(0, -50%); }
.ocs > * { pointer-events: auto; }

.ocs-bubble { position: relative; width: 300px; background: #fff; color: #0e0e0e; border: 1px solid #000; border-radius: 18px;
  padding: 18px 18px 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); opacity: 0; transform: translateX(14px) scale(.96);
  transition: opacity .35s ease, transform .45s ease; pointer-events: none; }
.ocs.is-talking .ocs-bubble { pointer-events: auto; }
.ocs.is-talking .ocs-bubble { opacity: 1; transform: none; }
.ocs-bubble::after { content: ""; position: absolute; right: -8px; top: 50%; width: 14px; height: 14px; background: #fff;
  border-right: 1px solid #000; border-top: 1px solid #000; transform: translateY(-50%) rotate(45deg); }
.ocs-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #0e0e0e; background: #e6f4fc; border-radius: 999px; padding: 3px 10px; }
.ocs-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #4daeeb; box-shadow: 0 0 0 0 rgba(77, 174, 235, .7); animation: ocs-ping 1.8s infinite; }
.ocs-eyebrow.ocs-hello { text-transform: none; letter-spacing: 0; font-size: 13px; padding: 4px 11px; margin-right: 22px; }
.ocs-intro { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: #0e0e0e; }
.ocs-title { margin: 6px 0 4px; font-size: 19px; line-height: 1.25; font-weight: 300; }
.ocs-title b { font-weight: 700; }
.ocs-text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #5e6166; }
.ocs-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ocs-yes { border: 0; border-radius: 999px; background: #4daeeb; color: #000; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; padding: 11px 18px; cursor: pointer; }
.ocs-yes:hover { background: #3b9fdd; }
.ocs-later { border: 0; background: none; color: #5e6166; font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; padding: 8px 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ocs-x { border: 0 !important; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: #5e6166; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; display: grid; place-items: center; }
.ocs-x:hover, .ocs-later:hover { color: #000; }

/* the avatar: the hard-hat agent robot slides in from the right edge, waves, then talks; idles with a float and a blink */
.ocs-avatar { width: 110px; height: 143px; margin-right: 14px; border: 0 !important; padding: 0; background: none !important; cursor: pointer; animation: ocs-float 3.6s ease-in-out 1.2s infinite; }
.ocs-avatar svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .25)); }
.ocs-eye { transform-box: fill-box; transform-origin: center; animation: ocs-blink 4.2s infinite; }
.ocs-pupils { transition: transform .15s ease-out; }
.ocs-arm-wave { transform-box: view-box; transform-origin: 28px 108px; transition: transform .35s ease; }
.ocs.is-waving .ocs-arm-wave { animation: ocs-wave 2s ease-in-out; }
.ocs-avatar:hover .ocs-arm-wave { animation: ocs-wave 1.2s ease-in-out; }

/* the form panel, opened in place (no redirect) */
.ocs-panel { position: fixed; right: 16px; top: 50%; z-index: 2147483001; width: min(420px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 32px));
  overflow: auto; background: #fff; color: #0e0e0e; border: 1px solid #000; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  padding: 22px 22px 10px; transform: translate(calc(100% + 24px), -50%); transition: transform .5s cubic-bezier(.2, .9, .25, 1); font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; }
.ocs-panel.is-in { transform: translate(0, -50%); }
.ocs-panel h2 { margin: 0 34px 4px 0; font-size: 22px; font-weight: 300; line-height: 1.2; }
.ocs-panel h2 b { font-weight: 700; }
.ocs-panel p { margin: 0 0 12px; font-size: 14px; color: #5e6166; }
.ocs-form { min-height: 220px; }
.ocs-loading { font-size: 13px; color: #5e6166; padding: 20px 0; }

@keyframes ocs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ocs-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ocs-wave { 0% { transform: rotate(0); } 18% { transform: rotate(150deg); } 32% { transform: rotate(122deg); } 46% { transform: rotate(158deg); } 60% { transform: rotate(122deg); } 74% { transform: rotate(150deg); } 100% { transform: rotate(0); } }
@keyframes ocs-ping { 0% { box-shadow: 0 0 0 0 rgba(77, 174, 235, .7); } 100% { box-shadow: 0 0 0 8px rgba(77, 174, 235, 0); } }

@media (max-width: 600px) {
  .ocs { gap: 8px; }
  .ocs-bubble { width: min(250px, calc(100vw - 96px)); padding: 14px 14px 12px; }
  .ocs-title { font-size: 17px; }
  .ocs-eyebrow { font-size: 10px; letter-spacing: .05em; white-space: nowrap; }
  .ocs-eyebrow.ocs-hello { font-size: 12px; letter-spacing: 0; white-space: normal; }
  .ocs-avatar { width: 70px; height: 91px; margin-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ocs, .ocs-panel, .ocs-bubble { transition: none; }
  .ocs-avatar, .ocs-eye, .ocs-eyebrow i, .ocs.is-waving .ocs-arm-wave, .ocs-avatar:hover .ocs-arm-wave { animation: none; }
}