/* The original page stays intact; this small layer stages the redesign demo. */
#ik-upgrade,
#ik-upgrade-dialog,
#ik-original-return {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

#ik-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 17px;
  color: #383838;
  background: #fff;
  border: 1px solid #d2d2d2;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 180ms, background 180ms, transform 180ms;
}
#ik-upgrade:hover { background: #f5f5f5; border-color: #909090; transform: translateY(-1px); }
#ik-upgrade:disabled { cursor: default; opacity: .65; transform: none; }
#ik-upgrade:focus-visible { outline: 2px solid #1a7f64; outline-offset: 4px; }
#ik-upgrade svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Keep the invitation visible without placing it over the original copy. */
body #ik-old-page {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
#ik-old-page > .ik-upgrade-invite {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  z-index: 3;
  text-align: center;
}

#ik-upgrade-dialog {
  color-scheme: light;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  background: #fff;
  color: #292929;
  box-shadow: 0 28px 120px #0003, 0 4px 24px #00000014;
  overflow: auto;
}
#ik-upgrade-dialog[open] { animation: ik-chat-in 220ms ease-out both; }
#ik-upgrade-dialog::backdrop { background: #17171766; backdrop-filter: blur(5px); }
#ik-upgrade-dialog.is-closing[open] { animation: ik-chat-out 500ms cubic-bezier(.4,0,.2,1) both; }
#ik-upgrade-dialog.is-closing::backdrop { animation: ik-backdrop-out 500ms ease-in-out both; }
#ik-upgrade-dialog *, #ik-upgrade-dialog *::before, #ik-upgrade-dialog *::after { box-sizing: border-box; }
.ik-gpt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 69px;
  padding: 15px 18px 15px 25px;
  border-bottom: 1px solid #ededed;
}
.ik-gpt-brand { display: flex; align-items: center; gap: 9px; color: #202020; font-size: 18px; font-weight: 600; letter-spacing: -.5px; }
.ik-gpt-demo {
  padding: 3px 7px;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  color: #646464;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .4px;
}
#ik-gpt-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: -3px -5px -3px auto;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #656565;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
#ik-gpt-close:hover { background: #f2f2f2; color: #202020; }
#ik-gpt-close svg { width: 18px; height: 18px; }
#ik-gpt-close:focus-visible { outline: 2px solid #1a7f64; outline-offset: 1px; }
.ik-gpt-chat { padding: 31px 25px 28px; min-height: 227px; }
.ik-gpt-message { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.ik-gpt-user { justify-content: flex-end; margin-bottom: 29px; }
.ik-gpt-user .ik-gpt-body {
  max-width: 90%;
  padding: 12px 17px;
  border-radius: 19px 19px 5px 19px;
  background: #f1f1f1;
  color: #303030;
}
.ik-gpt-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #252525;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.ik-gpt-avatar svg { width: 15px; height: 15px; }
.ik-gpt-assistant .ik-gpt-body { padding: 3px 0 0; flex: 1; min-width: 0; }
.ik-gpt-body { font-size: 15px; line-height: 1.65; }
#ik-gpt-response { min-height: 50px; margin: 0; }
#ik-gpt-response.is-typing::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  vertical-align: 2px;
  border-radius: 50%;
  background: #292929;
  animation: ik-typing 900ms ease-in-out infinite;
}
.ik-gpt-footer { padding: 0 25px 24px; }
#ik-gpt-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 23px;
  margin: 0 0 13px;
  color: #53655f;
  font-size: 12px;
  line-height: 1.5;
}
#ik-gpt-status::before { content: ""; width: 5px; height: 5px; background: #268366; border-radius: 50%; flex-shrink: 0; }
.ik-gpt-progress-track { height: 3px; overflow: hidden; border-radius: 999px; background: #ededed; }
#ik-gpt-progress {
  display: block;
  width: 100%;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ededed;
  color: #268366;
  overflow: hidden;
  accent-color: #268366;
  appearance: none;
}
#ik-gpt-progress::-webkit-progress-bar { background: #ededed; border-radius: 999px; }
#ik-gpt-progress::-webkit-progress-value { background: #268366; border-radius: 999px; }
#ik-gpt-progress::-moz-progress-bar { background: #268366; border-radius: 999px; }
.ik-gpt-progress-track > #ik-gpt-progress:not(progress) { width: 0; background: #268366; }

body.is-preparing #ik-old-page, body.is-revealing #ik-old-page {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: clip;
  pointer-events: none;
}
#ik-old-page.is-leaving { animation: ik-old-out 800ms cubic-bezier(.4,0,.2,1) both; }
#ik-old-page.is-leaving #ik-original { animation: ik-copy-out 300ms ease-out both; }
#ik-old-page.is-leaving .ik-upgrade-invite { animation: ik-old-out 300ms ease-out both; }
#ik-new-page { overflow: clip; }
#ik-new-page.is-entering #ik-wild { animation: ik-new-in 800ms cubic-bezier(.2,.65,.3,1) both; }
#ik-old-page[hidden], #ik-new-page[hidden] { display: none !important; }
#ik-original-return {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c2c9cb;
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
#ik-original-return:hover { color: #c7ff42; }
#ik-original-return:focus-visible { outline: 2px solid #c7ff42; outline-offset: 3px; }
#ik-new-page h1[tabindex="-1"]:focus { outline: none; }
#ik-new-page .ik-nav { position: static; }
#ik-new-page .ik-footer { position: static; }
#ik-new-page .ik-footer-controls { display: contents; }
#ik-new-page .ik-motion-top {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  #ik-new-page .ik-nav { position: relative; z-index: 3; }
  #ik-new-page .ik-footer { column-gap: 6px; row-gap: 0; }
  #ik-new-page .ik-footer-info, #ik-new-page .ik-contact { display: contents; }
  #ik-new-page .ik-bio {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 12px;
  }
  #ik-new-page .ik-contact-title { grid-column: 1; grid-row: 2; }
  #ik-new-page .ik-email-line { grid-column: 1; grid-row: 3; align-self: baseline; }
  #ik-new-page .ik-footer-controls {
    position: relative;
    display: flex;
    flex-direction: row;
    grid-column: 2;
    grid-row: 3;
    align-self: baseline;
    justify-self: end;
    margin-inline-end: -10px;
    align-items: center;
    min-width: 0;
    font-size: 14px;
    line-height: 1.7;
    height: 1lh;
  }
  #ik-new-page .ik-motion-top {
    position: absolute;
    top: calc(100% - 2px);
    bottom: auto;
    left: auto;
    right: -14px;
    transform: none;
  }
  #ik-new-page #ik-original-return {
    width: auto;
    padding-inline: 10px;
    text-align: center;
    white-space: nowrap;
  }
  #ik-new-page .ik-pause:focus-visible { outline-offset: 5px; }
}
@media (max-width: 520px) {
  #ik-new-page .ik-footer-controls { font-size: 13px; }
}
@media (max-width: 767px) and (max-height: 480px) {
  #ik-new-page .ik-bio { margin-bottom: 6px; }
  #ik-new-page .ik-footer-controls { line-height: 1.5; }
}
#ik-upgrade-dialog .ik-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes ik-chat-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ik-chat-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(.985); } }
@keyframes ik-backdrop-out { from { opacity: 1; backdrop-filter: blur(5px); } to { opacity: 0; backdrop-filter: blur(0); } }
@keyframes ik-typing { 50% { opacity: .35; } }
@keyframes ik-old-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ik-copy-out { to { opacity: 0; filter: blur(4px); transform: translateY(-6px); } }
@keyframes ik-new-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) {
  #ik-upgrade-dialog { border-radius: 16px; }
  .ik-gpt-header { padding-left: 20px; }
  .ik-gpt-chat { padding: 24px 20px; min-height: 222px; }
  .ik-gpt-footer { padding: 0 20px 20px; }
  .ik-gpt-body { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #ik-upgrade { transition: none; }
  #ik-upgrade-dialog[open], #ik-old-page.is-leaving, #ik-new-page.is-entering #ik-wild,
  #ik-upgrade-dialog.is-closing[open], #ik-upgrade-dialog.is-closing::backdrop,
  #ik-old-page.is-leaving #ik-original, #ik-old-page.is-leaving .ik-upgrade-invite,
  #ik-gpt-response.is-typing::after { animation: none; }
}