/* Complete chat presentation for the cinematic homepage, independent of legacy layouts. */
body.jf-reference-home #jbot .ej-contact-options {
  box-sizing: border-box;
  width: min(295px, calc(100vw - 40px));
  max-block-size: calc(100dvh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #1c1429;
}

body.jf-reference-home #jbot .ej-contact-options .tr-fab {
  box-sizing: border-box;
  color: #f5f2fa;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

/* In the contact menu, show the channel icons in place of the standalone robot artwork. */
body.jf-reference-home #jbot .ej-contact-options :is(.tr-fab__face, .jic-x) {
  display: none;
}

body.jf-reference-home #jbot .ej-contact-options .tr-fab__badge {
  display: grid;
  place-items: center;
  color: inherit;
}

body.jf-reference-home #jbot .ej-contact-options .tr-fab__badge svg {
  width: 24px;
  height: 24px;
}

body.jf-reference-home #jbot .ej-contact-label {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: 4px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

body.jf-reference-home #jbot .ej-contact-label b { font-size: 14px; }
body.jf-reference-home #jbot .ej-contact-label small { color: #d8cfe6; font-size: 12px; }
body.jf-reference-home #jbot .ej-contact-options .tr-fab:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: -2px;
}

body.jf-reference-home #jbot .jbot-win {
  display: flex;
  flex-direction: column;
  inline-size: min(380px, calc(100vw - 32px));
  block-size: min(560px, 75svh);
  max-block-size: calc(100dvh - 112px);
  overflow: hidden;
  border: 1px solid var(--ui-line, #d8cfe6);
  border-radius: 20px;
  background: var(--ui-paper, #f5f2fa);
  color: var(--ui-ink, #1c1429);
  color-scheme: light;
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
  text-align: start;
  box-shadow: 0 24px 72px #08031a38, 0 4px 16px #08031a18;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

body.jf-reference-home #jbot .jbot-win,
body.jf-reference-home #jbot .jbot-win * {
  box-sizing: border-box;
}

body.jf-reference-home #jbot .jbot-win[hidden] { display: none; }
body.jf-reference-home #jbot .jbot-win.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.jf-reference-home #jbot .jbot-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-block-end: 1px solid #c4b5fd40;
  background: var(--ui-night, #08031a);
  color: var(--ui-paper, #f5f2fa);
}

body.jf-reference-home #jbot .jbot-ava {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  inline-size: 48px;
  block-size: 48px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid #c4b5fd40;
  border-radius: 12px;
  background: #c4b5fd12;
}

body.jf-reference-home #jbot .jbot-ava .jf-logo-plate {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  background: transparent;
}

body.jf-reference-home #jbot .jbot-ava .jf-approved-logo {
  display: block;
  width: 38px;
  height: 22px;
  max-width: 100%;
}

body.jf-reference-home #jbot .jbot-id {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
  gap: 3px;
}

body.jf-reference-home #jbot .jbot-id b {
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

body.jf-reference-home #jbot .jbot-live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-dim, #d8cfe6);
  font-size: 12px;
  font-style: normal;
  line-height: 1.7;
  opacity: 1;
}

body.jf-reference-home #jbot .jbot-live em {
  flex: 0 0 6px;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--ui-lavender, #c4b5fd);
}

body.jf-reference-home #jbot :is(.jbot-x, .jbot-send) {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

body.jf-reference-home #jbot .jbot-x {
  margin-inline-start: auto;
  background: #c4b5fd16;
  color: var(--ui-paper, #f5f2fa);
  opacity: 1;
}

body.jf-reference-home #jbot .jbot-x:hover { background: #c4b5fd30; }
body.jf-reference-home #jbot :is(.jbot-x, .jbot-send) svg {
  display: block;
  inline-size: 20px;
  block-size: 20px;
}

body.jf-reference-home #jbot .jbot-log {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-block-size: 0;
  padding: 20px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ui-paper, #f5f2fa);
  scrollbar-width: thin;
  scrollbar-color: var(--ui-lavender, #c4b5fd) transparent;
}

body.jf-reference-home #jbot .jmsg {
  flex: 0 0 auto;
  max-inline-size: 92%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

body.jf-reference-home #jbot .jmsg--bot {
  align-self: flex-start;
  border-color: var(--ui-line, #d8cfe6);
  border-start-start-radius: 4px;
  background: #fff;
  color: var(--ui-ink, #1c1429);
}

body.jf-reference-home #jbot .jmsg--me {
  align-self: flex-end;
  border-start-end-radius: 4px;
  background: var(--ui-purple, #6840bb);
  color: #fff;
}

body.jf-reference-home #jbot .jtyping {
  display: flex;
  align-items: center;
  gap: 5px;
  min-block-size: 44px;
}

body.jf-reference-home #jbot .jtyping i {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--ui-purple, #6840bb);
  animation: reference-chat-dot 1s ease-in-out infinite;
}

body.jf-reference-home #jbot .jtyping i:nth-child(2) { animation-delay: 150ms; }
body.jf-reference-home #jbot .jtyping i:nth-child(3) { animation-delay: 300ms; }
@keyframes reference-chat-dot {
  0%, 60%, 100% { opacity: .4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

body.jf-reference-home #jbot .jbot-chips {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  max-block-size: 28%;
  padding: 0 16px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ui-paper, #f5f2fa);
}

body.jf-reference-home #jbot .jbot-chips:empty { display: none; }
body.jf-reference-home #jbot .jchip {
  min-block-size: 44px;
  max-inline-size: 100%;
  padding: 8px 12px;
  border: 1px solid var(--ui-lavender, #c4b5fd);
  border-radius: 12px;
  background: #fff;
  color: var(--ui-purple, #6840bb);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
}

body.jf-reference-home #jbot .jchip:hover:not(:disabled) { background: #ece5fa; }
body.jf-reference-home #jbot .jchip--ghost { border-style: dashed; }
body.jf-reference-home #jbot .jbot-privacy {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 16px 0;
  background: var(--ui-paper, #f5f2fa);
  color: var(--ui-muted, #655a74);
  font-size: 12px;
  line-height: 1.8;
  opacity: 1;
}

body.jf-reference-home #jbot .jbot-privacy a {
  color: var(--ui-purple, #6840bb);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.jf-reference-home #jbot .jbot-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px 16px;
  background: var(--ui-paper, #f5f2fa);
}

body.jf-reference-home #jbot .jbot-input {
  flex: 1 1 auto;
  inline-size: 0;
  min-inline-size: 0;
  min-block-size: 48px;
  padding: 10px 12px;
  border: 1px solid var(--ui-muted, #655a74);
  border-radius: 12px;
  background: #fff;
  color: var(--ui-ink, #1c1429);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-align: start;
}

body.jf-reference-home #jbot .jbot-input::placeholder { color: var(--ui-muted, #655a74); opacity: 1; }
body.jf-reference-home #jbot .jbot-send { background: var(--ui-purple, #6840bb); color: #fff; }
body.jf-reference-home #jbot .jbot-send:hover:not(:disabled) { background: #56329e; }
body.jf-reference-home #jbot :is(.jbot-input, .jbot-send, .jchip):disabled { opacity: .55; cursor: not-allowed; }
body.jf-reference-home #jbot .jbot-win :is(button, input, a):focus-visible {
  outline: 3px solid var(--ui-purple, #6840bb);
  outline-offset: 3px;
}
body.jf-reference-home #jbot .jbot-head button:focus-visible { outline-color: var(--ui-lavender, #c4b5fd); }
html[dir="rtl"] body.jf-reference-home #jbot .jbot-send svg { transform: scaleX(-1); }

/* Keep an open assistant above navigation, including after viewport changes. */
body.jf-reference-home #jbot.is-open { display: block; z-index: 150; }

@media (max-width: 640px) {
  html.jbot-locked:has(body.jf-reference-home),
  html.jbot-locked body.jf-reference-home {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.jf-reference-home #jbot .jbot-win {
    position: fixed;
    inset: var(--jbot-vv-top, 0px) 0 auto;
    inline-size: 100%;
    width: 100%;
    block-size: var(--jbot-vv-height, 100dvh);
    height: var(--jbot-vv-height, 100dvh);
    max-inline-size: none;
    max-width: none;
    max-block-size: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  body.jf-reference-home #jbot .jbot-head {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: 12px;
    padding-left: max(16px, env(safe-area-inset-left));
  }

  body.jf-reference-home #jbot :is(.jbot-log, .jbot-chips, .jbot-privacy, .jbot-bar) {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  body.jf-reference-home #jbot .jbot-bar { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  body.jf-reference-home #jbot .jbot-win { transition: none; transform: none; }
  body.jf-reference-home #jbot .jtyping i { animation: none; }
}