.vsh25-chat {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 360px;
   z-index: 9999;
}

.iti-mobile .iti--container {
   z-index: 9999;
}

.vsh25-chat-widget {
   background-color: #ffffff;
   border-radius: 12px;
   -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   display: none;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   font-family: sans-serif;
   max-height: 540px;
   min-height: 420px;
   position: relative;
}

.loading-indicator {
   text-align: center;
   color: #888;
   padding: 10px;
   font-style: italic;
}

.vsh25-chat-header {
   background: #0163f6;
   color: #ffffff;
   padding: 20px 16px 36px;
   font-size: 16px;
   font-weight: 600;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   border-radius: 12px 12px 0 0;
}

.vsh25-chat-header--inner {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 8px;
   font-weight: 400;
}

.vsh25-chat-title {
   font-size: 15px;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   display: -webkit-box;
   float: none;
   line-height: 120%;
   overflow: hidden;
}

.vsh25-chat-subtitle {
   font-size: 13px;
   opacity: 0.7;
   line-height: 120%;
   overflow: hidden;
   text-overflow: ellipsis;
}

.vsh25-chat-close {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   background: transparent;
   border: none;
   cursor: pointer;
}

.vsh25-chat-body {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   padding: 12px;
   overflow-y: auto;
   background-color: #fafafa;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   border-radius: 12px 12px 0 0;
   margin-top: -16px;
}

.vsh25-chat-footer {
   padding: 12px 16px 16px 12px;
   border-top: 1px solid #e3e3e3;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 8px;
}

.vsh25-chat-footer input:focus {
   outline: none;
}

.vsh25-chat-input {
   width: 100%;
   padding: 8px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #e3e3e3;
   border-radius: 4px;
   font-size: 14px;
   box-sizing: border-box;
   border-top: none;
   border-right: none;
   border-left: none;
   border-bottom: 1px solid #e3e3e3;
}

#user-phone {
   border-top: none !important;
   border-right: none !important;
   border-left: none !important;
   border-bottom: 1px solid #e3e3e3 !important;
}

.vsh25-chat-input::-webkit-input-placeholder {
   color: #999;
}

.vsh25-chat-input::-moz-placeholder {
   color: #999;
}

.vsh25-chat-input:-ms-input-placeholder {
   color: #999;
}

.vsh25-chat-input::-ms-input-placeholder {
   color: #999;
}

.vsh25-chat-input::placeholder {
   color: #999;
}

.vsh25-chat-btn {
   background-color: #0163f6;
   color: #ffffff;
   border: none;
   border-radius: 4px;
   font-size: 16px;
   line-height: 120%;
   cursor: pointer;
   padding: 12px;
   -webkit-transition: background-color 0.2s ease;
   transition: background-color 0.2s ease;
}

.vsh25-chat-btn:hover {
   background-color: #0053d6;
}

.vsh25-chat-send-block {
   display: none;
   gap: 8px;
}

.vsh25-chat-send-block .vsh25-chat-input {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
}

.vsh25-open-chat-btn {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background-color: #0163f6;
   color: #ffffff;
   border: none;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   cursor: pointer;
   -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   z-index: 9999;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.vsh25-open-chat-btn:hover {
   background-color: #0053d6;
}

.vsh25-open-chat-btn svg {
   width: 24px;
   height: 24px;
}

.message {
   display: inline-block;
   margin: 4px 0;
   padding: 6px 10px;
   border-radius: 8px;
   max-width: 100%;
   line-height: 1.4;
}

.message.system {
   color: #888;
   font-style: italic;
   background: transparent;
}

.message.user {
   padding: 12px 16px 6px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   background: #73bbff6e;
   -ms-flex-item-align: end;
   align-self: flex-end;
}

.admin-message-content {
   background: #e3e3e3;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   padding: 12px 16px 6px;
   margin: 4px 0;
   border-radius: 8px;
   max-width: 100%;
   line-height: 1.4;
}

.admin-message-content .message-time {
   color: #747474;
}

.chat-input-container {
   position: relative;
}

.chat-input-container .iti {
   width: 100%;
}

.chat-input-container .iti__country-list {
   max-height: 120px; /* ограничиваем высоту */
   overflow-y: auto; /* вертикальный скролл */
   overflow-x: hidden; /* ничего не вылезает по X */
   width: 100% !important; /* всегда ширина как у .iti-контейнера */
   max-width: 100% !important; /* не шире контейнера чата */
   left: 0 !important; /* выравниваем по левому краю .iti */
   right: auto !important;
   box-sizing: border-box;
   border-radius: 8px;
}

.chat-input-container .iti__country-list.iti__country-list--dropup {
   bottom: 100%;
   top: auto;
}

.chat-input-container input[type="tel"] {
   width: 100%;
   padding-left: 48px !important;
   border: 1px solid #ccc !important;
}

.chat-phone-label {
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   left: 48px;
   font-size: 14px;
   color: #999;
   pointer-events: none;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   -webkit-transition: 0.2s ease;
   transition: 0.2s ease;
}

.iti__country-list::-webkit-scrollbar {
   width: 4px;
   height: 4px;
}

.iti__country-list::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 22px;
}

.iti__country-list::-webkit-scrollbar-thumb {
   background: #007bff;
   border-radius: 22px;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
   background: #0468d3;
}

.iti__country-list {
   border-radius: 8px;
}

.iti__country {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.iti__dial-code,
.iti__country-name {
   font-size: 16px;
   line-height: 140%;
}

.iti__dial-code {
   margin-left: auto;
}

.iti__country-list {
   overflow-x: hidden;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border-radius: 8px;
}

.iti__country-list .iti__country {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.iti__country .iti__country-name {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.iti__country .iti__dial-code {
   -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-left: auto;
}

.vsh25-chat-body::-webkit-scrollbar {
   width: 6px;
   height: 4px;
}

.vsh25-chat-body::-webkit-scrollbar-track {
   margin-top: 12px;
   background: #fafafa;
   border-radius: 22px;
}

.vsh25-chat-body::-webkit-scrollbar-thumb {
   background: #d6d4d4;
   border-radius: 22px;
}

.vsh25-chat-body::-webkit-scrollbar-thumb:hover {
   background: #d6d4d4;
}

.message-time {
   font-size: 12px;
   color: #999;
   margin-left: 6px;
   padding-top: 8px;
   -ms-flex-item-align: end;
   align-self: flex-end;
}

.read-status {
   font-size: 14px;
   color: #009688;
   margin-left: 8px;
}

.read-status i {
   font-size: 16px;
}

.message.user .read-status i {
   color: #4caf50;
}

.message.admin .read-status i {
   color: #2196f3;
}

.scroll-to-bottom {
   position: absolute;
   right: 16px;
   bottom: 80px;
   width: 35px;
   height: 35px;
   cursor: pointer;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   z-index: 10;
   padding: 0;
   opacity: 0.5;
   -webkit-transition: bottom 0.15s ease, opacity 0.15s ease;
   transition: bottom 0.15s ease, opacity 0.15s ease;
   outline: none;
   background: inherit;
   border-radius: 50%;
}

.scroll-to-bottom svg path {
   -webkit-transition: stroke 0.15s ease;
   transition: stroke 0.15s ease;
}

.scroll-to-bottom:hover svg path {
   stroke: #5eb1ff;
}

.scroll-to-bottom span {
   pointer-events: none;
}

.scroll-to-bottom.show {
   background: #fff;
   border: 1px solid #e0e5e9;
   border-radius: 36px;
   -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   opacity: 1;
}

.scroll-to-bottom:focus,
.scroll-to-bottom:active {
   outline: none;
   border: none;
}

.scroll-to-bottom.hide {
   opacity: 0;
   outline: none;
   border: none;
   -webkit-transform: translateY(20px);
   transform: translateY(20px);
}

.message-text {
   font-size: 15px;
   line-height: 120%;
}

.message-text-empty {
   display: block;
   margin: 6px 0;
   height: 0;
   padding: 0;
}

#send-message {
   border: none;
   background: inherit;
   cursor: pointer;
   padding: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

#send-message:disabled {
   cursor: inherit;
}

#send-message:not(:disabled):hover .active-bg {
   fill: #003fe1;
}

.vsh25-open-chat-btn.has-unread::after {
   content: "";
   position: absolute;
   top: 0px;
   right: 4px;
   width: 10px;
   height: 10px;
   border-radius: 999px;
   background: #22c55e;
   box-shadow: 0 0 0 2px #ffffff;
   pointer-events: none;
}

@media (max-width: 768px) {
   .vsh25-chat.open {
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
      top: 0;
      left: 0;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      background-color: rgba(0, 0, 0, 0.7);
   }
   .vsh25-chat-widget {
      max-height: 100%;
      -webkit-box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.22);
      box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.22);
      width: 60%;
      height: 100%;
      margin: auto;
   }
   .vsh25-chat-header,
   .vsh25-chat-body,
   .vsh25-chat-widget {
      border-radius: 0;
   }
}

@media (max-width: 768px) {
   .vsh25-chat-input,
   .chat-phone-label {
      font-size: 16px;
   }
}

@media (max-width: 660px) {
   .vsh25-chat.open {
      height: calc(var(--vh, 1vh) * 100);
   }
   .vsh25-chat-widget {
      max-height: calc(var(--vh, 1vh) * 100);
      width: 100%;
   }
}