*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: inherit;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(button, [type="button"], [type="reset"], [type="submit"]) {
  -webkit-appearance: button;
}

:where(input, textarea, select) {
  -webkit-appearance: none;
  appearance: none;
}

:where(input[type="search"]) {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

:where(::-webkit-search-decoration) {
  -webkit-appearance: none;
}

:where(textarea) {
  resize: vertical;
}

:where(:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: "Red Hat Text", sans-serif;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: #f3f3f3;
}

header {
  background-color: #222222;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  height: 28px;
  display: flex;
  align-items: center;
}

.notification {
  background-color: #64a028;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 10px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 104px);
  overflow: hidden;
  min-height: 0;
}
main.talk .top__q {
  flex: 1;
  background: transparent;
  min-height: 0;
}
main.talk .top__q .title {
  position: fixed;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  visibility: hidden;
  height: 0px;
  width: 0px;
}
main.talk .bottom__q {
  height: 110px;
  transition: all 0.3s ease;
}
main.talk .chat {
  display: flex;
}

.top__q {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../images/logo.svg") no-repeat center;
  overflow: hidden;
}
@media (max-width: 768px) {
  .top__q {
    background-size: 150px;
  }
}
.top__q .title h1 {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  margin: 0;
  color: #000;
  text-align: center;
}

.bottom__q {
  height: 50%;
  background: url("../images/screen.png") no-repeat center;
  background-size: cover;
  padding: 0 20px;
  transition: all 0.3s ease;
}

.ask {
  margin: 0 auto;
  max-width: 830px;
  width: 100%;
  border: 13px solid #f3f3f3;
  border-radius: 55px;
  position: relative;
  background-color: #f3f3f3;
  top: -53px;
}
.ask input {
  width: 100%;
  height: 80px;
  margin: 0;
  padding: 0 173px 0 30px;
  border-radius: 44px;
  font-size: 20px;
  border: 1px dashed #a5a5a5;
}
@media (max-width: 768px) {
  .ask input {
    padding: 0 80px 0 20px;
    height: 60px;
    font-size: 14px;
  }
}
.ask input:focus {
  outline: none;
  border-color: #264e19;
}
.ask button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 48px;
  background-color: #264e19;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 20px;
}
@media (max-width: 768px) {
  .ask button {
    background-image: url("data:image/svg+xml,%0A%3Csvg fill='%23FFFFFF' height='40px' width='40px' version='1.1' id='Icons' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M29.3,2.6c-0.3-0.2-0.7-0.3-1-0.2L3,11.7c-0.4,0.1-0.7,0.5-0.7,0.9c0,0.4,0.3,0.8,0.7,0.9l10.2,3.8l10-10 c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-9.8,9.8l6.6,10.6c0.2,0.3,0.5,0.5,0.8,0.5c0.1,0,0.1,0,0.2,0c0.4-0.1,0.7-0.4,0.8-0.7l6.2-25.2 C29.7,3.3,29.6,2.9,29.3,2.6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
    width: 46px;
    border-radius: 50%;
    text-indent: -9999px;
    height: 46px;
    right: 10px;
  }
}
.chat {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
}
.chat__wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  width: 100%;
  max-width: 830px;
  margin: 0 auto;
  margin-top: auto;
  padding: 30px 20px 80px;
  min-height: 0;
}
@media (max-width: 990px) {
  .chat {
    max-width: 100%;
  }
}
.user {
  align-self: flex-end;
  background-color: #cfefc3;
  color: #000;
  padding: 10px 18px;
  border-radius: 8px 8px 0px 8px;
  max-width: 70%;
  font-size: 16px;
}
@media (max-width: 768px) {
  .user {
    font-size: 14px;
  }
}
.user p {
  margin: 0 0 15px 0;
}
.user p:last-child {
  margin-bottom: 0;
}
.user ul,
.user ol {
  padding-left: 20px;
  margin: 0 0 15px 0;
}
.user ul:last-child,
.user ol:last-child {
  margin-bottom: 0;
}
.user ul li,
.user ol li {
  margin-bottom: 8px;
}
.user ul li:last-child,
.user ol li:last-child {
  margin-bottom: 0;
}
.assistant {
  align-self: flex-start;
  background-color: #fff;
  color: #000;
  padding: 22px 28px;
  border-radius: 8px 8px 8px 0px;
  max-width: 100%;
  font-size: 16px;
}
@media (max-width: 768px) {
  .assistant {
    font-size: 14px;
  }
}
.assistant p {
  margin: 0 0 15px 0;
}
.assistant p:last-child {
  margin-bottom: 0;
}
.assistant ul,
.assistant ol {
  padding-left: 20px;
  margin: 0 0 15px 0;
}
.assistant ul:last-child,
.assistant ol:last-child {
  margin-bottom: 0;
}
.assistant ul li,
.assistant ol li {
  margin-bottom: 8px;
}
.assistant ul li:last-child,
.assistant ol li:last-child {
  margin-bottom: 0;
}
.assistant a {
  color: #64a028;
  background-image: url("data:image/svg+xml,%3Csvg fill='%2364a028' width='24px' height='24px' viewBox='0 0 64 64' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Crect id='Icons' x='-896' y='0' width='1280' height='800' style='fill:none;'/%3E%3Cg id='Icons1' serif:id='Icons'%3E%3Cg id='Strike'%3E%3C/g%3E%3Cg id='H1'%3E%3C/g%3E%3Cg id='H2'%3E%3C/g%3E%3Cg id='H3'%3E%3C/g%3E%3Cg id='list-ul'%3E%3C/g%3E%3Cg id='hamburger-1'%3E%3C/g%3E%3Cg id='hamburger-2'%3E%3C/g%3E%3Cg id='list-ol'%3E%3C/g%3E%3Cg id='list-task'%3E%3C/g%3E%3Cg id='trash'%3E%3C/g%3E%3Cg id='vertical-menu'%3E%3C/g%3E%3Cg id='horizontal-menu'%3E%3C/g%3E%3Cg id='sidebar-2'%3E%3C/g%3E%3Cg id='Pen'%3E%3C/g%3E%3Cg id='Pen1' serif:id='Pen'%3E%3C/g%3E%3Cg id='clock'%3E%3C/g%3E%3Cg id='external-link'%3E%3Cpath d='M36.026,20.058l-21.092,0c-1.65,0 -2.989,1.339 -2.989,2.989l0,25.964c0,1.65 1.339,2.989 2.989,2.989l26.024,0c1.65,0 2.989,-1.339 2.989,-2.989l0,-20.953l3.999,0l0,21.948c0,3.308 -2.686,5.994 -5.995,5.995l-28.01,0c-3.309,0 -5.995,-2.687 -5.995,-5.995l0,-27.954c0,-3.309 2.686,-5.995 5.995,-5.995l22.085,0l0,4.001Z'/%3E%3Cpath d='M55.925,25.32l-4.005,0l0,-10.481l-27.894,27.893l-2.832,-2.832l27.895,-27.895l-10.484,0l0,-4.005l17.318,0l0.002,0.001l0,17.319Z'/%3E%3C/g%3E%3Cg id='hr'%3E%3C/g%3E%3Cg id='info'%3E%3C/g%3E%3Cg id='warning'%3E%3C/g%3E%3Cg id='plus-circle'%3E%3C/g%3E%3Cg id='minus-circle'%3E%3C/g%3E%3Cg id='vue'%3E%3C/g%3E%3Cg id='cog'%3E%3C/g%3E%3Cg id='logo'%3E%3C/g%3E%3Cg id='radio-check'%3E%3C/g%3E%3Cg id='eye-slash'%3E%3C/g%3E%3Cg id='eye'%3E%3C/g%3E%3Cg id='toggle-off'%3E%3C/g%3E%3Cg id='shredder'%3E%3C/g%3E%3Cg id='spinner--loading--dots-' serif:id='spinner %5Bloading, dots%5D'%3E%3C/g%3E%3Cg id='react'%3E%3C/g%3E%3Cg id='check-selected'%3E%3C/g%3E%3Cg id='turn-off'%3E%3C/g%3E%3Cg id='code-block'%3E%3C/g%3E%3Cg id='user'%3E%3C/g%3E%3Cg id='coffee-bean'%3E%3C/g%3E%3Cg id='coffee-beans'%3E%3Cg id='coffee-bean1' serif:id='coffee-bean'%3E%3C/g%3E%3C/g%3E%3Cg id='coffee-bean-filled'%3E%3C/g%3E%3Cg id='coffee-beans-filled'%3E%3Cg id='coffee-bean2' serif:id='coffee-bean'%3E%3C/g%3E%3C/g%3E%3Cg id='clipboard'%3E%3C/g%3E%3Cg id='clipboard-paste'%3E%3C/g%3E%3Cg id='clipboard-copy'%3E%3C/g%3E%3Cg id='Layer1'%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 28px;
}
.assistant a:hover {
  text-decoration: underline;
}
.copy {
  text-align: center;
  font-size: 12px;
  color: #fff;
  margin-top: -30px;
}
.copy a {
  color: #fff;
  text-decoration: underline;
}
.copy a:hover {
  text-decoration: none;
}

.chat-remove {
	float: right;
	display: none;
}

.chat-remove.active {
	display: block;
}

.chat-remove span{
	display: flex;
	position: relative;
	overflow: hidden;
	background-image: url("data:image/svg+xml,%0A%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.0663 32.9616C16.503 32.9616 13.4512 31.697 10.9109 29.1679C8.3706 26.6384 7.10046 23.5975 7.10046 20.045V17.9658L4.39337 20.6837C4.20393 20.8732 3.97393 20.9687 3.70337 20.9704C3.4331 20.9723 3.19796 20.8768 2.99796 20.6837C2.8049 20.4834 2.70837 20.2462 2.70837 19.972C2.70837 19.6979 2.8049 19.4643 2.99796 19.2712L7.23421 15.0075C7.50115 14.7475 7.8074 14.6175 8.15296 14.6175C8.49824 14.6175 8.80087 14.7475 9.06087 15.0075L13.3246 19.2712C13.5141 19.4607 13.6098 19.6905 13.6117 19.9608C13.6134 20.2311 13.5177 20.4627 13.3246 20.6558C13.1246 20.8561 12.8875 20.9562 12.6134 20.9562C12.3392 20.9562 12.1056 20.8561 11.9125 20.6558L9.19462 17.9658V20.045C9.19462 23.0341 10.2552 25.5852 12.3763 27.6983C14.4971 29.8111 17.0605 30.8675 20.0663 30.8675C20.6063 30.8675 21.1417 30.8297 21.6725 30.7541C22.2037 30.6789 22.7192 30.5611 23.2192 30.4008C23.5025 30.3239 23.7784 30.3397 24.0467 30.4483C24.3148 30.5569 24.5071 30.7397 24.6238 30.9966C24.7407 31.2594 24.7406 31.52 24.6234 31.7783C24.5062 32.0364 24.3059 32.2132 24.0225 32.3087C23.3759 32.5309 22.7217 32.6952 22.06 32.8016C21.3984 32.9083 20.7338 32.9616 20.0663 32.9616ZM19.9617 9.22205C19.4217 9.22205 18.8845 9.25802 18.35 9.32996C17.8153 9.40191 17.3016 9.51802 16.8088 9.6783C16.5182 9.76246 16.2364 9.75024 15.9634 9.64163C15.69 9.53302 15.4914 9.34649 15.3675 9.08204C15.2509 8.8251 15.2484 8.56288 15.36 8.29538C15.472 8.02788 15.6646 7.84649 15.938 7.75121C16.5946 7.53594 17.2566 7.37829 17.9238 7.27829C18.5907 7.17829 19.27 7.1283 19.9617 7.1283C23.525 7.1283 26.575 8.39107 29.1117 10.9166C31.6484 13.4422 32.9167 16.485 32.9167 20.045V22.0683L35.6346 19.3612C35.8171 19.1718 36.0435 19.0743 36.3138 19.0687C36.5841 19.0634 36.8192 19.1609 37.0192 19.3612C37.2195 19.5612 37.3196 19.7966 37.3196 20.0675C37.3196 20.338 37.2195 20.5733 37.0192 20.7733L32.783 25.0266C32.5232 25.2866 32.2188 25.4166 31.8696 25.4166C31.5207 25.4166 31.2163 25.2866 30.9563 25.0266L26.72 20.7904C26.5306 20.6009 26.4332 20.3654 26.428 20.0837C26.4227 19.802 26.52 19.5612 26.72 19.3612C26.9203 19.1609 27.1587 19.0608 27.435 19.0608C27.7112 19.0608 27.9493 19.1609 28.1496 19.3612L30.8225 22.0341V20.045C30.8225 17.0555 29.7621 14.5044 27.6413 12.3916C25.5202 10.2786 22.9603 9.22205 19.9617 9.22205Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999px;
	border: 0;
	width: 40px;
	height: 40px;
	cursor: pointer;
	transition:transform .4s ease
}

.chat-remove span:hover {
	transform:rotate(360deg);
}