/* Плавающий виджет мессенджера (публичная часть) */
.ocw { position: fixed; right: 24px; bottom: 24px; z-index: 9500; font-family: inherit; }

/* Кнопка (видна всегда — чтобы функционал был заметен) */
.ocw-fab {
    display: flex;
    position: relative; width: 62px; height: 62px; border: none; border-radius: 50%; cursor: pointer;
    background: linear-gradient(135deg, #F6055B 0%, #8B5CF6 100%); color: #fff;
    box-shadow: 0 10px 26px rgba(246,5,91,.42); align-items: center; justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease; animation: ocw-in .4s cubic-bezier(.16,1,.3,1);
}
.ocw-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(246,5,91,.5); }
.ocw-fab:active { transform: scale(.97); }
@keyframes ocw-in { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

.ocw-fab-pulse { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg,#F6055B,#8B5CF6); z-index: -1; animation: ocw-pulse 2.2s ease-out infinite; }
@keyframes ocw-pulse { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(1.6); opacity: 0; } }
.ocw.open .ocw-fab-pulse { animation: none; opacity: 0; }

.ocw-fab-icon { position: absolute; display: flex; align-items: center; justify-content: center; transition: transform .3s ease, opacity .3s ease; }
.ocw-fab-icon svg { width: 27px; height: 27px; }
.ocw-fab-icon--close { transform: rotate(-90deg) scale(.4); opacity: 0; }
.ocw.open .ocw-fab-icon--chat { transform: rotate(90deg) scale(.4); opacity: 0; }
.ocw.open .ocw-fab-icon--close { transform: rotate(0) scale(1); opacity: 1; }

.ocw-dot { animation: ocw-dot 1.4s infinite ease-in-out; transform-box: fill-box; transform-origin: center; }
.ocw-dot-2 { animation-delay: .2s; } .ocw-dot-3 { animation-delay: .4s; }
@keyframes ocw-dot { 0%,60%,100% { transform: translateY(0); opacity: .6; } 30% { transform: translateY(-2.5px); opacity: 1; } }

.ocw-badge { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: #F6055B; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); border: 2px solid #F6055B; }

/* Панель */
.ocw-panel {
    position: absolute; right: 0; bottom: 78px; width: 380px; height: 560px; max-height: calc(100vh - 120px);
    background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(17,12,34,.3);
    display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden;
    transform: translateY(20px) scale(.96); transform-origin: bottom right;
    transition: opacity .25s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility .25s;
}
.ocw.open .ocw-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ocw-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ocw-view[hidden] { display: none; }

.ocw-header { display: flex; align-items: center; gap: 10px; padding: 15px 16px; background: linear-gradient(135deg,#F6055B,#8B5CF6); color: #fff; flex-shrink: 0; }
.ocw-header-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; flex: 1; }
.ocw-close, .ocw-back { background: rgba(255,255,255,.16); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.ocw-close:hover, .ocw-back:hover { background: rgba(255,255,255,.28); }
.ocw-conv-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ocw-conv-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; border: 2px solid rgba(255,255,255,.4); }
.ocw-conv-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.ocw-conv-sub { font-size: 11px; opacity: .85; }

.ocw-dialogs { flex: 1; overflow-y: auto; padding: 8px; background: #f7f7fb; }
.ocw-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; cursor: pointer; }
.ocw-item:hover { background: #fff; box-shadow: 0 1px 6px rgba(17,12,34,.07); }
.ocw-item-av { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,#e0e7ff,#f3e8ff); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; color: #8B5CF6; }
.ocw-item-body { flex: 1; min-width: 0; }
.ocw-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ocw-item-name { font-size: 14.5px; font-weight: 600; color: #241f36; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocw-item-time { font-size: 11px; color: #9a95ad; flex-shrink: 0; }
.ocw-item-preview { font-size: 13px; color: #7a7590; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ocw-item-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: linear-gradient(135deg,#F6055B,#8B5CF6); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.ocw-empty, .ocw-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #8a86a0; text-align: center; padding: 24px; }
.ocw-empty-icon { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: #8B5CF6; background: linear-gradient(135deg,rgba(246,5,91,.1),rgba(139,92,246,.1)); }
.ocw-empty-title { font-size: 15px; font-weight: 700; color: #3a3552; margin-bottom: 5px; }
.ocw-empty-text { font-size: 13px; line-height: 1.5; max-width: 240px; }
.ocw-spinner { width: 30px; height: 30px; border: 3px solid rgba(139,92,246,.2); border-top-color: #8B5CF6; border-radius: 50%; animation: ocw-spin .8s linear infinite; }
@keyframes ocw-spin { to { transform: rotate(360deg); } }

.ocw-messages { flex: 1; overflow-y: auto; padding: 16px 14px; background: #f7f7fb; display: flex; flex-direction: column; gap: 8px; }
.ocw-msg { display: flex; max-width: 82%; }
.ocw-msg--sent { align-self: flex-end; } .ocw-msg--received { align-self: flex-start; }
.ocw-bubble { padding: 9px 13px 7px; border-radius: 18px; font-size: 14.5px; line-height: 1.4; word-break: break-word; }
.ocw-msg--sent .ocw-bubble { background: linear-gradient(135deg,#F6055B,#8B5CF6); color: #fff; border-bottom-right-radius: 5px; }
.ocw-msg--received .ocw-bubble { background: #fff; color: #241f36; border-bottom-left-radius: 5px; box-shadow: 0 1px 4px rgba(17,12,34,.06); }
.ocw-time { font-size: 10.5px; opacity: .7; margin-left: 8px; white-space: nowrap; }
.ocw-msg--received .ocw-time { color: #9a95ad; }
.ocw-tick { font-size: 11px; letter-spacing: -2px; } .ocw-tick--read { color: #4ade80; }
.ocw-load-more { align-self: center; margin-bottom: 4px; padding: 7px 16px; border: 1px solid #e0dcf0; background: #fff; color: #8B5CF6; border-radius: 16px; font-size: 13px; cursor: pointer; }

.ocw-blocked { padding: 10px 16px; background: #fff4f4; color: #d64545; font-size: 13px; text-align: center; border-top: 1px solid #f6d5d5; }
.ocw-error { padding: 9px 16px; background: #fff8e6; color: #b7791f; font-size: 13px; text-align: center; border-top: 1px solid #f3e0b3; }
.ocw-input-area { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; background: #fff; border-top: 1px solid #ececf3; flex-shrink: 0; }
.ocw-input { flex: 1; border: 1px solid #e6e4ef; background: #f7f7fb; border-radius: 20px; padding: 10px 16px; font-size: 14.5px; resize: none; outline: none; max-height: 110px; line-height: 1.4; font-family: inherit; }
.ocw-input:focus { border-color: #8B5CF6; background: #fff; }
.ocw-send { width: 42px; height: 42px; flex-shrink: 0; border: none; border-radius: 50%; color: #fff; cursor: pointer; background: linear-gradient(135deg,#F6055B,#8B5CF6); display: flex; align-items: center; justify-content: center; }
.ocw-send svg { width: 19px; height: 19px; }

@media (max-width: 600px) {
    .ocw { right: 16px; bottom: 16px; }
    .ocw-panel { position: fixed; inset: 0; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

/* Виджет живёт на z-index 9500 и физически лежит поверх кнопок под собой.
   Пока открыт фильтр — прячем: иначе тап по правому краю «Найти» открывает чат. */
body.filter-open .ocw { display: none; }

/* На странице анкеты снизу висит .mobile-cta-bar (z-index 1000, высота ~68px).
   Поднимаем кнопку над ним, чтобы она не перекрывала «Позвонить». */
@media (max-width: 991px) {
    body:has(.mobile-cta-bar) .ocw { bottom: calc(84px + env(safe-area-inset-bottom)); }
}