.casechat-w {
  position: fixed;
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
  width: 100%;
  z-index: 5;
  bottom: 0;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
}

.casechat {
  background: #FFFFFF;
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  max-width: 740px;
  width: 100%;
  overflow: hidden;
  z-index: 5;
}

.casechat-b {
  background: var(--BG);
  height: 80px;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 4;
}

.casechat .wrap {
  display: flex;
  gap: 5px;
  padding: 20px;
  align-items: flex-start;
}

.casechat textarea {
  width: 100%;
  min-height: 50px;
  resize: none;
  border: none;
  background: transparent;
  outline: none;

  padding: 4px 0;
  box-sizing: border-box;

  color: rgba(66, 59, 51, 0.80);
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px; /* 125% */
}

.casechat .tags {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.casechat .tag {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 50px;
  padding: 10px 10px;
  box-sizing: border-box;
  cursor: pointer;
  transition: 0.2s;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.casechat .tag .tag-icon path {
  fill: #423B33;
}

.casechat .tag.active {
  color: #cd4c35;
  border-color: #cd4c35;
}

.casechat .tag.active .tag-icon path {
  fill: #cd4c35;
}

.casechat .links {
  display: flex;
  flex-direction: column;
  background: #cd4c35;
  overflow: hidden;
  align-self: stretch
}

.casechat .link-button {
  height: 100%;
  min-width: 70px;
  flex: 1;
  color: white;
  text-decoration: none;
  padding-left: 10px;
  display: flex;
  
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;

  font-size: 10px;
  font-weight: 400;
}

.casechat .link-button:hover {
  background: #b43f2b;
}

.links-buts-divider {
  background: linear-gradient(90deg, rgba(232, 227, 221, 0.00) 10%, #E8E3DD 100%);
  width: 100%;
  height: 1px;
}

.customer-w {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  align-self: stretch;
  position: relative;
}

.customer {
  display: flex;
  width: 460px;
  padding: 15px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  border-radius: 16px;
  background: rgba(66, 59, 51, 0.10);
  color: var(--Armadillo);
  font-size: 16px;
  font-weight: 500;
  line-height: 130%; /* 20.8px */
}

.customer-tag {
    display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 600;
}


.osensei-title {
  display: flex;
  height: 40px;
  width: fit-content;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  background: rgba(224, 62, 41, 0.10);
  color: rgba(224, 62, 41, 0.80);
  font-size: 14px;
  font-weight: 500;
}

.osensei-title-period {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 15px;
}

.osensei-w {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  align-self: stretch;
}

.osensei {
  /* width: 100%; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

.osensei-message {
  padding-left: 50px;
  color: var(--Armadillo);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px; /* 125% */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

.osensei-message img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.case-hr {
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.case-hr-item {
  height: 1px;
  background: rgba(118, 112, 102, 0.60);
  flex: 1 0 0;
}

.case-more {
  color: rgba(118, 112, 102, 0.60);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.case-more .case-hr {
  height: 20px;
}


/*   */


.dropdown {
  position: fixed;
  display: inline-block;
  top: 80px;
  z-index: 20;
}

.dropdown-toggle {
  background: var(--Armadillo);
  color: white;
  height: 50px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0px 20px;
  min-width: 370px;
}

.dropdown.open .dropdown-toggle, .dropdown-toggle:hover {
  background: var(--Cinnabar);
}

.dropdown-toggle .arrow {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.dropdown.open .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  
  border-radius: 10px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  width: 100%;
}

.dropdown.open .dropdown-menu {
  display: flex;
}

.dropdown-item {
  background: var(--Armadillo);
  padding: 0px 20px;
  text-decoration: none;
  color: white;
  transition: background 0.3s;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

.dropdown-item:hover {
  /* background: rgba(255, 255, 255, 0.1); */
  background-size: 125% auto;
}

.dropdown-item img {
  width: 20px;
  height: auto;
}

.dropdown-hero-one {
  background-image: url(img/case-hero-one.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}

.dropdown-hero-framer {
  background-image: url(img/case-hero-framer.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}

.dropdown-hero-product {
  background-image: url(img/case-hero-product.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}

.osensei-message-productimg {
  width: 100%;
  height: 400px;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  border-radius: 8px;
  background: #C1B6AA;
}

.osensei-message-productimg::-webkit-scrollbar {
  height: 16px;             /* Chrome/Safari: высота скроллбара */
}

.osensei-message-productimg::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.5); /* цвет ползунка */
  border-radius: 8px;
}

.osensei-message-productimg:hover {
  cursor: url('img/cursor-scroll.png') 16 16, default;
}

.osensei-message-productimg img {
  height: 100%;
  width: auto;
  pointer-events: none;

  animation: scroll-left-right 2.3s ease-in-out infinite alternate;
}



@keyframes scroll-left-right {
  0% {
    transform: translateX(3%);
  }
  100% {
    transform: translateX(-3%);
  }
}

.osensei-message-productimg.paused img {
  animation: none !important;
}

/* */


@media (max-width: 880px) {
  .case-header-anchor {
    height: 50px;
    gap: 7px;
  }

  .p-case .wrap {
    padding-top: 170px;
    padding-bottom: 180px;
  }

  .dropdown {
    top: 60px;
  }

  .dropdown-toggle, .dropdown-item {
    font-size: 15px;
  }

  .dropdown-toggle {
    min-width: 320px;
  }
}

@media (max-width: 800px) {
  .p-case .wrap, .casechat-w {
    padding-left: 10px;
    padding-right: 10px;
  }

  .customer {
    width: 75%;
  }

  .osensei-message {
    padding-left: 0px;
  }

  .case-hr {
    height: 20px;
  }

  .osensei-message-productimg {
    height: 300px;
  }
}

@media (max-width: 520px) {
  .casechat {
    flex-direction: column;
  }

  .casechat-w {
    padding-bottom: 10px;
  }

  .casechat .wrap {
    padding: 10px;
  }

  .casechat .links {
    flex-direction: row;
    height: 40px;
  }

  .links-buts-divider {
    height: 100%;
    width: 1px;
    background: linear-gradient(180deg, rgba(232, 227, 221, 0.00) 10%, #E8E3DD 100%);
  }

  .casechat .link-button {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    gap: 8px;
  }

  .casechat .tag {
    padding: 5px;
    padding-right: 10px;
    font-size: 12px;
  }
  
  .casechat textarea {
    min-height: 30px;
  }
  
}