:root {
  /* Font */
  --font-family: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    "Helvetica Neue", arial, sans-serif;

  /* Font size */
  --size-text-base: 16px;
  --size-text-xs: 0.7em;
  --size-text-s: 0.8em;
  --size-text-m: 1em;
  --size-text-l: 1.125em;
  --size-text-xl: 1.25em;
  --size-text-2xl: 1.5em;
  --size-text-3xl: 2em;
  --size-text-4xl: 3em;
  --size-text-5xl: 4.5em;
  --size-text-6xl: 6em;

  /* Line height */
  --line-height-text-2xs: 1;
  --line-height-text-xs: 1.2;
  --line-height-text-s: 1.4;
  --line-height-text-m: 1.5;
  --line-height-text-l: 1.6;

  /* Border radius */
  --border-radius-xs: 2px;
  --border-radius-s: 4px;
  --border-radius-m: 6px;
  --border-radius-l: 8px;
  --border-radius-xl: 10px;

  /* Отступы */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 72px;
  --space-6xl: 96px;

  /* colors */
  --black: #000;
  --white: #fff;
  --dark-gray: #1e1e1e;
  --light-gray: papayawhip;
  --gray: #757575;
  --blue: #1c6bbb;
  --off-white: #f1f1f5;
  --dark-blue: #344356;
  --red: #f00;
  --bg: #ebf5ff;
  --link: var(--blue);
}

html {
  min-height: 100vh;
  font-size: 16px;
}

.page {
  min-height: 100vh;
  margin: 0;
  overflow-y: scroll;
  font-family: var(--font-family);
  font-size: var(--size-text-base);
  line-height: var(--line-height-text-s);
  color: var(--black);
  background: conic-gradient(
    from -90deg at bottom center,
    papayawhip,
    peachpuff
  );
  background-size: cover;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
    text-decoration: underline;
  }

.page__container {
  box-sizing: border-box;
  padding: 30px 0;
}

@media (max-width: 768px) {

.page__container {
    padding: 0
}
  }

.page__nav-panel {
  position: sticky;
  top: 0;
  z-index: 111;
  padding: 30px;
}

@media (max-width: 768px) {

.page__nav-panel {
    padding: 20px 10px
}
  }

.page__side-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 111;
  padding: 30px;
}

@media (max-width: 768px) {

.page__side-panel {
    right: 41px;
    bottom: 100px;
    display: none !important;
    padding: 0
}
  }

.page__input-field {
  position: sticky;
  right: 0;
  bottom: 0;
}

.preloader {
  text-align: center;
}

.preloader__children {
  margin-top: 20px;
}

.preloader__loader {
  display: inline-grid;
  width: 50px;
  aspect-ratio: 1;
  background:
    linear-gradient(0deg, rgb(0 0 0/50%) 30%, #0000 0 70%, rgb(0 0 0/100%) 0)
      50%/8% 100%,
    linear-gradient(90deg, rgb(0 0 0/25%) 30%, #0000 0 70%, rgb(0 0 0/75%) 0)
      50%/100% 8%;
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: loader-animation 1s infinite steps(12);
}

.preloader__loader::before,
.preloader__loader::after {
  grid-area: 1/1;
  content: "";
  background: inherit;
  border-radius: 50%;
  opacity: 0.915;
  transform: rotate(30deg);
}

.preloader__loader::after {
  opacity: 0.83;
  transform: rotate(60deg);
}

@keyframes loader-animation {
  100% {
    transform: rotate(1turn);
  }
}

.spinner-grow,
.spinner-border {
  display: inline-block;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite
    var(--bs-spinner-animation-name);
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}

.spinner-border {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.25em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;

  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}

.spinner-border-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: 0.2em;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: none;
  }
}

.spinner-grow {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-grow;

  background-color: currentcolor;
  opacity: 0;
}

.spinner-grow-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    --bs-spinner-animation-speed: 1.5s;
  }
}

/* Correct the inability to style clickable types in iOS and Safari. */

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

/* Remove the inner border and padding in Firefox. */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/* Restore the focus styles unset by the previous rule. */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

.button {
  box-sizing: border-box;

  /* Correct styling a.button */
  display: inline-block;

  /* Remove the margin in Firefox and Safari. */
  margin: 0;

  /* Change the font styles in all browsers. */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;

  /* Remove the inheritance of text transform in Edge and Firefox. */
  text-transform: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.button:disabled {
    pointer-events: none;
    cursor: default;
  }

.button_width_available {
  width: 100%;
}

.button_view_plain {
  padding: 0;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
}

.button_view_icon {
  padding: 8px;
  cursor: pointer;
  background: none;
  border: 0;
}

.button__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.button_theme_default {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}

.button_theme_default .button__icon {
    flex: none;
    width: 16px;
    height: 16px;
  }

.button_theme_default.button_raised {
    box-shadow:
      0 4px 8px rgb(0 0 0 / 15%),
      0 2px 4px rgb(0 0 0 / 10%);
  }

.button_theme_default.button_raised:disabled {
      box-shadow: unset;
    }

.button_theme_default.button_view_action {
    color: var(--white);
    background-color: var(--blue);
  }

.button_theme_default.button_view_action:hover,
    .button_theme_default.button_view_action:focus,
    .button_theme_default.button_view_action:active {
      color: var(--white);
      text-decoration: none;
      background-color: var(--blue);
    }

.button_theme_default.button_view_action:disabled {
      background-color: rgb(0 0 0 / 12%);
    }

.button_theme_default.button_view_outline {
    color: var(--blue);
    border-color: var(--blue);
  }

.button_theme_default.button_view_outline:hover,
    .button_theme_default.button_view_outline:focus,
    .button_theme_default.button_view_outline:active {
      color: var(--blue);
      text-decoration: none;
      border-color: var(--blue);
    }

.button_theme_default.button_view_outline:disabled {
      border-color: rgb(0 0 0 / 37%);
    }

.button_theme_default.button_view_text {
    color: #00867d;
  }

.button_theme_default.button_view_text:hover,
    .button_theme_default.button_view_text:focus,
    .button_theme_default.button_view_text:active {
      color: #00867d;
      text-decoration: none;
      background-color: rgb(0 134 125 / 10%);
    }

.button_theme_default:disabled {
    color: rgb(0 0 0 / 37%);
  }

:root {
  --ba-container-size-full: 100%;
  --ba-container-size-m: 1144px;
  --ba-container-size-s: 670px;
  --ba-container-size-xs: 560px;
}

.container {
  box-sizing: border-box;
  width: 100%;
}

.container_align_center {
  margin: auto;
}

.container_size_full {
  max-width: var(--ba-container-size-full);
}

.container_size_m {
  max-width: var(--ba-container-size-m);
}

.container_size_s {
  max-width: var(--ba-container-size-s);
}

.container_size_xs {
  max-width: var(--ba-container-size-xs);
}

.textarea {
  box-sizing: border-box;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  resize: vertical;
}

.textarea:disabled {
    pointer-events: none;
    cursor: default;
  }

.textarea_width_available {
  width: 100%;
}

/* Align */

.text_align_center {
  text-align: center;
}

.text_align_left {
  text-align: left;
}

.text_align_right {
  text-align: right;
}

/* Decoration */

.text_decoration_underline {
  text-decoration: underline;
}

.text_decoration_none {
  text-decoration: none;
}

/* Display */

.text_display_block {
  display: block;
}

.text_display_inline-block {
  display: inline-block;
}

.text_display_inline {
  display: inline;
}

.text_display_none {
  display: none;
}

.text_display_flex {
  display: flex;
}

.text_display_inline-flex {
  display: inline-flex;
}

/* Style */

.text_style_italic {
  font-style: italic;
}

.text_style_normal {
  font-style: normal;
}

/* Transform */

.text_transform_uppercase {
  text-transform: uppercase;
}

.text_transform_none {
  text-transform: none;
}

/* Weight */

.text_weight_black {
  font-weight: 900;
}

.text_weight_bold {
  font-weight: 600;
}

.text_weight_semibold {
  font-weight: 500;
}

.text_weight_regular {
  font-weight: 400;
}

.text_weight_light {
  font-weight: 300;
}

.text_weight_thin {
  font-weight: 100;
}

:root {
  --ba-image-shape: 8px;
}

.image_fluid {
  display: block;
  max-width: 100%;
  height: auto;
}

.image_rounded {
  border-radius: var(--ba-image-shape);
}

.image_circle {
  border-radius: 50%;
}

.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
}

/**
 * Для правильного позиционирования относительно baseline.
 * Плюс высота блока начинает определяться по унаследованному line-height.
 */

.icon::after {
  visibility: hidden;
  content: "\00A0";
}

.icon_name_copy {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_73_264)'%3e%3cpath d='M4.16699 12.5001H3.33366C2.89163 12.5001 2.46771 12.3245 2.15515 12.0119C1.84259 11.6994 1.66699 11.2754 1.66699 10.8334V3.33341C1.66699 2.89139 1.84259 2.46746 2.15515 2.1549C2.46771 1.84234 2.89163 1.66675 3.33366 1.66675H10.8337C11.2757 1.66675 11.6996 1.84234 12.0122 2.1549C12.3247 2.46746 12.5003 2.89139 12.5003 3.33341V4.16675M9.16699 7.50008H16.667C17.5875 7.50008 18.3337 8.24627 18.3337 9.16675V16.6667C18.3337 17.5872 17.5875 18.3334 16.667 18.3334H9.16699C8.24652 18.3334 7.50033 17.5872 7.50033 16.6667V9.16675C7.50033 8.24627 8.24652 7.50008 9.16699 7.50008Z' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_73_264'%3e%3crect width='20' height='20' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

.icon_name_refresh {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_73_195)'%3e%3cpath d='M19.1663 3.33331V8.33331M19.1663 8.33331H14.1663M19.1663 8.33331L15.2997 4.69998C14.4041 3.80391 13.296 3.14932 12.079 2.79729C10.862 2.44527 9.5756 2.40727 8.33991 2.68686C7.10423 2.96645 5.95951 3.55451 5.01256 4.39616C4.06562 5.23782 3.34731 6.30564 2.92467 7.49998M0.833008 16.6666V11.6666M0.833008 11.6666H5.83301M0.833008 11.6666L4.69967 15.3C5.5953 16.1961 6.70332 16.8506 7.92035 17.2027C9.13738 17.5547 10.4238 17.5927 11.6594 17.3131C12.8951 17.0335 14.0398 16.4455 14.9868 15.6038C15.9337 14.7621 16.652 13.6943 17.0747 12.5' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_73_195'%3e%3crect width='20' height='20' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

.icon_name_refresh-light {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_94_344)'%3e%3cpath d='M19.1663 3.33331V8.33331M19.1663 8.33331H14.1663M19.1663 8.33331L15.2997 4.69998C14.4041 3.80391 13.296 3.14932 12.079 2.79729C10.862 2.44527 9.5756 2.40727 8.33991 2.68686C7.10423 2.96645 5.95951 3.55451 5.01256 4.39616C4.06562 5.23782 3.34731 6.30564 2.92467 7.49998M0.833008 16.6666V11.6666M0.833008 11.6666H5.83301M0.833008 11.6666L4.69967 15.3C5.5953 16.1961 6.70332 16.8506 7.92035 17.2027C9.13738 17.5547 10.4238 17.5927 11.6594 17.3131C12.8951 17.0335 14.0398 16.4455 14.9868 15.6038C15.9337 14.7621 16.652 13.6943 17.0747 12.5' stroke='%23F5F5F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_94_344'%3e%3crect width='20' height='20' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

.icon_name_arrow {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cmask id='mask0_32_262' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3e%3cpath d='M24 0H0V24H24V0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_32_262)'%3e%3cpath d='M2.92773 11.9492C2.92773 12.1934 3.03516 12.418 3.23047 12.6035L9.71484 19.0781C9.91016 19.2637 10.1152 19.3516 10.3496 19.3516C10.8281 19.3516 11.209 19 11.209 18.5117C11.209 18.2773 11.1211 18.043 10.9648 17.8965L8.77734 15.6699L5.48633 12.6719L7.84961 12.8184H20.2031C20.7109 12.8184 21.0625 12.457 21.0625 11.9492C21.0625 11.4414 20.7109 11.0801 20.2031 11.0801H7.84961L5.49609 11.2266L8.77734 8.22852L10.9648 6.00195C11.1211 5.8457 11.209 5.62109 11.209 5.38672C11.209 4.89844 10.8281 4.54688 10.3496 4.54688C10.1152 4.54688 9.91016 4.625 9.69531 4.83984L3.23047 11.2949C3.03516 11.4805 2.92773 11.7051 2.92773 11.9492Z' fill='%23344356'/%3e%3c/g%3e%3c/svg%3e");
}

.icon_name_new {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.11621 3.38386H3.28288C2.84085 3.38386 2.41693 3.55945 2.10437 3.87201C1.79181 4.18457 1.61621 4.60849 1.61621 5.05052V16.7172C1.61621 17.1592 1.79181 17.5831 2.10437 17.8957C2.41693 18.2083 2.84085 18.3839 3.28288 18.3839H14.9495C15.3916 18.3839 15.8155 18.2083 16.1281 17.8957C16.4406 17.5831 16.6162 17.1592 16.6162 16.7172V10.8839M15.3662 2.13386C15.6977 1.80234 16.1474 1.61609 16.6162 1.61609C17.0851 1.61609 17.5347 1.80234 17.8662 2.13386C18.1977 2.46538 18.384 2.91501 18.384 3.38386C18.384 3.8527 18.1977 4.30233 17.8662 4.63386L9.94954 12.5505L6.61621 13.3839L7.44954 10.0505L15.3662 2.13386Z' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.icon_name_mic {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_73_182)'%3e%3cpath d='M15.8332 8.33325V9.99992C15.8332 11.547 15.2186 13.0307 14.1246 14.1247C13.0307 15.2187 11.5469 15.8333 9.99984 15.8333M9.99984 15.8333C8.45274 15.8333 6.96901 15.2187 5.87505 14.1247C4.78109 13.0307 4.1665 11.547 4.1665 9.99992V8.33325M9.99984 15.8333V19.1666M6.6665 19.1666H13.3332M9.99984 0.833252C9.3368 0.833252 8.70091 1.09664 8.23207 1.56548C7.76323 2.03433 7.49984 2.67021 7.49984 3.33325V9.99992C7.49984 10.663 7.76323 11.2988 8.23207 11.7677C8.70091 12.2365 9.3368 12.4999 9.99984 12.4999C10.6629 12.4999 11.2988 12.2365 11.7676 11.7677C12.2364 11.2988 12.4998 10.663 12.4998 9.99992V3.33325C12.4998 2.67021 12.2364 2.03433 11.7676 1.56548C11.2988 1.09664 10.6629 0.833252 9.99984 0.833252Z' stroke='%23F5F5F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_73_182'%3e%3crect width='20' height='20' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

.icon_name_shevron {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_82_266)'%3e%3cpath d='M1.14546 16.865L0.385463 16.105C0.342529 16.0622 0.30846 16.0114 0.285214 15.9555C0.261967 15.8995 0.25 15.8396 0.25 15.779C0.25 15.7184 0.261967 15.6584 0.285214 15.6025C0.30846 15.5465 0.342529 15.4957 0.385463 15.453L7.32246 8.49998L0.385463 1.54698C0.342529 1.50423 0.30846 1.45343 0.285214 1.39749C0.261967 1.34154 0.25 1.28156 0.25 1.22098C0.25 1.16039 0.261967 1.10041 0.285214 1.04446C0.30846 0.988518 0.342529 0.937717 0.385463 0.894975L1.14546 0.134975C1.18821 0.0920408 1.23901 0.0579721 1.29495 0.0347254C1.3509 0.0114787 1.41088 -0.000488281 1.47146 -0.000488281C1.53205 -0.000488281 1.59203 0.0114787 1.64798 0.0347254C1.70392 0.0579721 1.75472 0.0920408 1.79746 0.134975L9.83646 8.17498C9.92257 8.26122 9.97093 8.37811 9.97093 8.49998C9.97093 8.62184 9.92257 8.73873 9.83646 8.82498L1.79646 16.865C1.75374 16.9078 1.703 16.9417 1.64715 16.9649C1.5913 16.988 1.53143 16.9999 1.47096 16.9999C1.4105 16.9999 1.35063 16.988 1.29478 16.9649C1.23893 16.9417 1.18819 16.9078 1.14546 16.865Z' fill='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_82_266'%3e%3crect width='10' height='17' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

.icon_name_send {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.82213 0.124555L23.2761 10.3852C23.9102 10.6884 24.1784 11.4483 23.8752 12.0824C23.7497 12.3446 23.5383 12.556 23.2761 12.6815L1.82213 22.9421C1.18803 23.2453 0.42814 22.9771 0.124873 22.343C-0.00691156 22.0675 -0.0352027 21.7537 0.0451645 21.459L2.19099 13.5908C2.24475 13.3936 2.41115 13.2478 2.61361 13.2203L13.0096 11.8081C13.0992 11.7953 13.1735 11.7364 13.2078 11.6561L13.2256 11.5921C13.2427 11.4728 13.1741 11.3611 13.0665 11.3191L13.0096 11.3041L2.62578 9.89204C2.42334 9.86452 2.25698 9.71864 2.20323 9.52154L0.0451645 1.60757C-0.139779 0.929447 0.260025 0.22979 0.938151 0.0448463C1.23283 -0.0355209 1.54659 -0.00722955 1.82213 0.124555Z' fill='white'/%3e%3c/svg%3e");
}

.icon_name_trash {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.5 5.00008H3.16667M3.16667 5.00008H16.5M3.16667 5.00008L3.16667 16.6667C3.16667 17.1088 3.34226 17.5327 3.65482 17.8453C3.96738 18.1578 4.39131 18.3334 4.83333 18.3334H13.1667C13.6087 18.3334 14.0326 18.1578 14.3452 17.8453C14.6577 17.5327 14.8333 17.1088 14.8333 16.6667V5.00008M5.66667 5.00008V3.33341C5.66667 2.89139 5.84226 2.46746 6.15482 2.1549C6.46738 1.84234 6.89131 1.66675 7.33333 1.66675H10.6667C11.1087 1.66675 11.5326 1.84234 11.8452 2.1549C12.1577 2.46746 12.3333 2.89139 12.3333 3.33341V5.00008' stroke='%23EC221F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.icon_name_paperclip {
  background-image: url("data:image/svg+xml,%3csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M42.8806 22.1001L24.5006 40.4801C22.2489 42.7318 19.1949 43.9968 16.0106 43.9968C12.8262 43.9968 9.77227 42.7318 7.52058 40.4801C5.26889 38.2284 4.00391 35.1745 4.00391 31.9901C4.00391 28.8057 5.26889 25.7518 7.52058 23.5001L25.9006 5.12008C27.4017 3.61896 29.4377 2.77563 31.5606 2.77563C33.6835 2.77563 35.7195 3.61896 37.2206 5.12008C38.7217 6.62121 39.565 8.65717 39.565 10.7801C39.565 12.903 38.7217 14.939 37.2206 16.4401L18.8206 34.8201C18.07 35.5706 17.052 35.9923 15.9906 35.9923C14.9291 35.9923 13.9111 35.5706 13.1606 34.8201C12.41 34.0695 11.9884 33.0515 11.9884 31.9901C11.9884 30.9286 12.41 29.9106 13.1606 29.1601L30.1406 12.2001' stroke='%231E1E1E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.icon_name_search-light {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M42 42L33.3 33.3M38 22C38 30.8366 30.8366 38 22 38C13.1634 38 6 30.8366 6 22C6 13.1634 13.1634 6 22 6C30.8366 6 38 13.1634 38 22Z' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.card {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  background-color: var(--white);
  border-radius: 6px;
}

.card__media {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
}

.card__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
}

.card__separator.separator {
  margin-top: 20px;
  margin-bottom: 20px;
}

.card__record {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.card__record_align_center {
  justify-content: center;
}

.card__mic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: var(--blue);
  border-radius: 50%;
  box-shadow:
    0 4px 8px rgb(0 0 0 / 15%),
    0 2px 4px rgb(0 0 0 / 10%);
}

.card__mic .spinner-border {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    --bs-spinner-border-width: 0.2em;

    color: var(--white);
  }

.card__mic .icon_name_send {
    display: none;
    width: 24px;
    height: 24px;
  }

.card__record-panel {
  display: flex;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s;
  transform: translateX(-100%);
}

.card__record-panel.active {
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0);
}

.card__wave-rec {
  --pulse-color: rgb(236 34 31);

  width: 12px;
  height: 12px;
  background-color: var(--pulse-color);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    background-color: var(--pulse-color);
  }

  50% {
    background-color: rgb(236 34 31 / 70%);
  }

  100% {
    background-color: var(--pulse-color);
  }
}

.card__cancel-rec {
  width: 44px;
  height: 44px;
  background-color: var(--light-gray);
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  box-shadow:
    0 4px 8px rgb(0 0 0 / 15%),
    0 2px 4px rgb(0 0 0 / 10%);
}

.card__wave {
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 16px;
  background-color: var(--light-gray);
  border-radius: 99999px;
  box-shadow:
    0 4px 8px rgb(0 0 0 / 15%),
    0 2px 4px rgb(0 0 0 / 10%);
}

.card__wave-time {
  font-size: 14px;
  line-height: 1;
}

.card__button-group {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-m);
}

@media (max-width: 600px) {

.card__button-group {
    grid-template-columns: 1fr
}
  }

@media (min-width: 601px) {

.card__button-group {
    grid-template-columns: 1fr 1fr
}
  }

.card__product-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);

  /* @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }

  @media (min-width: 601px) {
    grid-template-columns: 1fr 1fr;
  } */
}

.card_view_product {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gray);
  border-radius: var(--border-radius-xl);
}

.card_view_product .card__content {
    padding: var(--space-s);
  }

.card_view_product .card__media {
    padding-bottom: 80%;
  }

.card_view_product .card__media img {
      border-radius: 0;
    }

.card_view_product .card__product-link::after {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      content: "";
    }

.separator {
  width: 100%;
  height: 1px;
  margin: 0;
  background-color: var(--off-white);
  border: none;
}

.content {
  overflow-wrap: break-word;
}

/* Add the correct text decoration in Chrome, Edge, and Safari */

.content abbr[title] {
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
  }

/* Add the correct font weight in Chrome, Edge, and Safari */

.content b,
  .content strong {
    font-weight: bolder;
  }

/* Add the correct height in Firefox */

.content hr {
    height: 0;
  }

.content img {
    max-width: 100%;
    height: auto;
  }

/* Prevent `sub` and `sup` elements from affecting the line height in all browsers */

.content sub,
  .content sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }

.content sub {
    bottom: -0.25em;
  }

.content sup {
    top: -0.5em;
  }

/* Add the correct font size in all browsers */

.content small {
    font-size: 80%;
  }

.content address,
  .content blockquote,
  .content details,
  .content dl,
  .content h1,
  .content h2,
  .content h3,
  .content h4,
  .content h5,
  .content h6,
  .content hr,
  .content ol,
  .content p,
  .content pre,
  .content table,
  .content ul {
    margin-top: 0;
    margin-bottom: var(--space-m);
  }

.content address:last-child, .content blockquote:last-child, .content details:last-child, .content dl:last-child, .content h1:last-child, .content h2:last-child, .content h3:last-child, .content h4:last-child, .content h5:last-child, .content h6:last-child, .content hr:last-child, .content ol:last-child, .content p:last-child, .content pre:last-child, .content table:last-child, .content ul:last-child {
      margin-bottom: 0;
    }

.content h1,
  .content h2,
  .content h3 {
    margin-top: var(--space-2xl);
    line-height: var(--line-height-text-2xs);
  }

.content h1 + h2,
  .content h2 + h3,
  .content h1:first-child,
  .content h2:first-child,
  .content h3:first-child {
    margin-top: 0;
  }

.content h4,
  .content h5,
  .content h6 {
    margin-bottom: 0;
  }

/* Themed */

.content {
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 768px) {

.content {
    font-size: 14px
}
  }

/* http://www.modularscale.com/?16&px&1.414 */

.content h1 {
    font-size: 2.827rem; /* 45.234px */
  }

.content h2 {
    font-size: 1.999rem; /* 31.99px */
  }

.content h3 {
    font-size: 1.414rem; /* 22.624px */
  }

.content h4,
  .content h5,
  .content h6 {
    font-size: 1rem;
  }

.content h5 {
    font-style: italic;
  }

.content h6 {
    font-weight: normal;
  }

.content ol,
  .content ul {
    padding-left: 2rem;
  }

.content dt {
    font-weight: bold;
  }

.content dd {
    margin-left: 2rem;
  }

.content blockquote {
    margin-right: 0;
    margin-left: 2rem;
  }

.content hr {
    border: none;
    border-bottom: 1px solid var(--off-white);
  }

.content mark {
    padding: 0.2em;
    background-color: #fcf8e3;
  }

.message-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  padding-bottom: 16px;
}

.message-flow__user {
  box-sizing: border-box;
  max-width: 70%;
  padding: 16px;
  background-color: var(--light-gray);
  border-radius: 16px;
}

@media (max-width: 768px) {

.message-flow__user {
    max-width: 90%
}
  }

.message-flow__answer {
  box-sizing: border-box;
  align-self: stretch;
  padding: 16px;
}

.message-flow__answer_error {
  background-color: #fee9e7;
  border: 1px solid #ec221f;
  border-radius: 16px;
}

.message-flow__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.nav-panel {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.nav-panel__button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--black);
  background-color: var(--white);
  border-radius: 8px;
}

.nav-panel__button:hover,
  .nav-panel__button:active,
  .nav-panel__button:focus {
    color: var(--white);
    background-color: var(--blue);
    opacity: 1;
  }

.nav-panel__button .icon_name_arrow {
    width: 24px;
    height: 24px;
    background: none;
  }

.nav-panel__button .icon_name_new {
    width: 16px;
    height: 16px;
    background: none;
  }

.page__nav-panel_is-sticky .nav-panel__button {
  color: var(--white);
  background-color: var(--blue);
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.side-panel__button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  visibility: hidden;
  background-color: var(--blue);
  border-radius: 50%;
  opacity: 0;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}

.side-panel__button .button__icon {
    width: 10px;
    height: 17px;
  }

.side-panel__button.visible {
  visibility: visible;
  opacity: 1;
}

.side-panel__button-up .button__icon {
    transform: rotate(-90deg);
  }

.side-panel__button-down .button__icon {
    transform: rotate(90deg);
  }

.input-field {
  box-sizing: border-box;
  padding: 16px;
  background-color: #f8f8f7;
  border-radius: 16px;
}

/* container */

.input-field__container {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* actions */

.input-field__actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  margin-top: 8px;
}

.input-field__upload-button:disabled {
    opacity: 0.5;
  }

.input-field__record {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

/* textarea */

.input-field__textarea {
  padding: 0;
  background: transparent;

  /* border: 1px solid #ccc; */
  border: none;
}

.input-field__textarea:focus {
    outline: none;
  }

.input-field__textarea:disabled {
    opacity: 0.5;
  }

/* file-list */

.input-field__file-list {
  display: flex;
  gap: 8px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Hide scrollbar for Chrome/Safari/Opera */

.input-field__file-list::-webkit-scrollbar {
  display: none;
}

.input-field__file-item {
  flex: 0 0 auto;
}

/* quick question */

.input-field__quick {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  z-index: 10;
  display: flex;
  gap: 16px;
  padding-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  background: white;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 4px -2px rgb(0 0 0 / 10%);
}

.input-field__quick-question {
  box-sizing: border-box;
  flex: none;
  width: 8rem;
  padding: 16px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--gray);
  background-color: var(--light-gray);
  border-radius: 8px;
}

.input-field__quick::-webkit-scrollbar {
  display: none;
}

.product-list-page__title {
  margin-bottom: var(--space-l);
}

.product-list-page__search-form {
  display: flex;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.product-list-page__search-input {
  box-sizing: border-box;
  flex-grow: 1;
  padding: 12px;
  font-size: 16px;
  line-height: 1;
  background-color: var(--white);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius-l);
}

.product-list-page__card {
  margin-bottom: var(--space-l);
}

.content code {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  vertical-align: middle;
  padding: 2px 4px;
  background: #f5f5f5;
  border-radius: 4px;
  font-family: "Fira Mono", "Consolas", "Menlo", monospace;
  font-size: 0.95em;
}

.content pre > code {
  display: block;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 0.98em;
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
}