/* CarPoint chat widget. Палитра и типографика - по мокапу marketing/preview_chat_widget.html */
.cp-chat-btn{position:fixed;right:20px;bottom:96px;width:62px;height:62px;border-radius:50%;background:#FF7101;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(255,113,1,.38);display:flex;align-items:center;justify-content:center;z-index:9060;transition:transform .2s;padding:0}
.cp-chat-btn:hover{transform:scale(1.06)}
.cp-chat-btn svg{width:28px;height:28px;fill:#fff}
.cp-chat-btn .cp-online{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#2ecc71;border:2.5px solid #fff}
.cp-chat-btn .cp-hint{position:absolute;right:74px;top:50%;transform:translateY(-50%);background:#24272C;color:#fff;font-size:13px;font-weight:500;padding:9px 14px;border-radius:10px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.cp-chat-btn .cp-hint::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;background:#24272C}

.cp-panel{position:fixed;right:26px;bottom:104px;width:382px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100vh - 140px);background:#fff;border-radius:18px;box-shadow:0 24px 64px rgba(36,39,44,.28);display:none;flex-direction:column;overflow:hidden;z-index:9070;font-family:'Inter',system-ui,sans-serif;color:#24272C;line-height:1.55}
.cp-panel.cp-open{display:flex;animation:cpPop .25s ease}
@keyframes cpPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.cp-head{background:#24272C;padding:16px 18px;display:flex;align-items:center;gap:12px}
.cp-avatar{width:42px;height:42px;border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.cp-avatar svg{width:22px;height:22px;fill:#fff}
.cp-avatar .cp-st{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background:#2ecc71;border:2px solid #24272C}
.cp-head .cp-t{color:#fff;flex:1;min-width:0}
.cp-head .cp-t b{font-family:'Outfit',system-ui,sans-serif;font-weight:600;font-size:16px;display:block}
.cp-head .cp-t small{color:#9aa0a6;font-size:12px}
.cp-head button{background:none;border:none;color:#9aa0a6;cursor:pointer;line-height:1;padding:4px}
.cp-head button:hover{color:#fff}
.cp-human{font-size:19px}
.cp-close{font-size:22px}

.cp-body{flex:1;overflow-y:auto;padding:18px 16px 10px;background:#f7f7f7;display:flex;flex-direction:column;gap:10px}
.cp-msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:14px;animation:cpIn .25s ease;word-wrap:break-word;overflow-wrap:anywhere}
@keyframes cpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cp-msg.cp-bot{background:#fff;border:1px solid #ECECEC;border-bottom-left-radius:4px;align-self:flex-start}
.cp-msg.cp-user{background:#FF7101;color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.cp-msg a{color:#FF7101;font-weight:600;text-decoration:none}
.cp-msg a:hover{text-decoration:underline}
.cp-lead-ok{background:#FFF5E0;border:1px solid #ffd9ae;border-radius:12px;padding:12px 14px;font-size:13.5px;align-self:stretch;animation:cpIn .25s ease}

.cp-chips{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;animation:cpIn .25s ease}
.cp-chip{background:#fff;border:1.5px solid #FF7101;color:#FF7101;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:13px;padding:8px 14px;border-radius:100px;cursor:pointer;transition:.15s}
.cp-chip:hover{background:#FF7101;color:#fff}

.cp-typing{display:flex;gap:5px;padding:13px 16px;background:#fff;border:1px solid #ECECEC;border-radius:14px;border-bottom-left-radius:4px;align-self:flex-start;width:64px}
.cp-typing i{width:7px;height:7px;border-radius:50%;background:#c4c4c8;animation:cpTp 1s infinite}
.cp-typing i:nth-child(2){animation-delay:.15s}
.cp-typing i:nth-child(3){animation-delay:.3s}
@keyframes cpTp{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}

.cp-input{border-top:1px solid #ECECEC;background:#fff;padding:12px 14px;display:flex;gap:10px;align-items:center}
.cp-input input{flex:1;border:none;outline:none;background:none;font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#24272C}
.cp-input input::placeholder{color:#b6b6bb}
.cp-send{width:38px;height:38px;border-radius:50%;background:#FF7101;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.cp-send svg{width:17px;height:17px;fill:#fff;margin-left:2px}
.cp-foot{background:#fff;text-align:center;font-size:11px;color:#b6b6bb;padding:0 0 9px}

/* ── типографика ответа: абзацы и списки (br на мобильном режет styles.min.css сайта) ── */
.cp-msg p{margin:0 0 6px}
.cp-msg p:last-child{margin:0}
.cp-msg ul{margin:4px 0 6px;padding-left:18px;list-style:disc}
.cp-msg li{margin:3px 0}
.cp-msg br{display:inline !important}

/* ── иконка-марка CarPoint: руль из favicon сайта, перекрашенный в светлую версию ── */
.cp-chat-btn .cp-mark{width:62px;height:62px;border-radius:50%;display:block}
.cp-avatar .cp-mark{width:42px;height:42px;border-radius:50%;display:block}

/* ── карточки машин ── */
.cp-cars{display:flex;flex-direction:column;gap:8px;align-self:stretch;animation:cpIn .25s ease}
.cp-car{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #ECECEC;border-radius:14px;padding:9px 11px;text-decoration:none;color:#24272C;transition:.15s}
.cp-car:hover{border-color:#FF7101;box-shadow:0 4px 14px rgba(255,113,1,.12)}
.cp-car-ph{width:72px;height:54px;border-radius:10px;object-fit:cover;background:#f2f2f4;flex-shrink:0}
.cp-car-noph{display:flex;align-items:center;justify-content:center;font-size:22px}
.cp-car-t{flex:1;min-width:0}
.cp-car-t b{font-family:'Outfit',system-ui,sans-serif;font-weight:600;font-size:14px;display:block;line-height:1.25}
.cp-car-t small{display:block;color:#8E8E93;font-size:12px;margin-top:2px}
.cp-car-t em{display:block;color:#FF7101;font-style:normal;font-weight:600;font-size:12px;margin-top:3px}
.cp-car-go{color:#FF7101;font-weight:600;font-size:12.5px;white-space:nowrap;flex-shrink:0}

/* ── подсказка у кнопки: и на мобильном тоже ── */
.cp-chat-btn .cp-hint{opacity:0;pointer-events:none;transition:opacity .3s}
.cp-chat-btn .cp-hint.cp-show{opacity:1}
@media(max-width:640px){
  .cp-chat-btn .cp-hint{font-size:12.5px;padding:8px 12px;right:70px;max-width:calc(100vw - 110px);white-space:normal;text-align:left}
}
.cp-chat-btn .cp-bubble{width:28px;height:28px;fill:#fff}

/* ответ живого оператора: акцент + подпись, поверх стиля cp-bot */
.cp-msg.cp-op{border-left:3px solid #FF7101}
.cp-msg.cp-op::before{content:'CarPoint';display:block;font-size:11px;font-weight:700;color:#FF7101;margin-bottom:2px}