/* Home page contact: views/site/_contact-chat.php; behaviour in assets/js/home-contact.js */
.cc-layer { display: block; height: 20px; margin: 0 59px; border-radius: 30px 30px 0 0; background: #3A3466; }
.cc-layer-2 { margin: 0 30px; background: #2B2652; }
.cc { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; padding: 44px; border-radius: 32px; color: #fff; background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(160deg, #0B0920, #16123A 55%, #1F1950); box-shadow: 0 34px 70px -34px rgba(17, 14, 45, .85); }
.cc-glow { position: absolute; z-index: -1; top: -34%; inset-inline-end: -12%; width: 720px; max-width: 100%; height: 620px; border-radius: 50%; background: radial-gradient(closest-side, rgba(238, 93, 56, .34), rgba(155, 123, 255, .14) 60%, transparent); }
.cc-kicker { color: #FF9A6B; font-size: 14px; font-weight: 700; }
.cc-side h2 { margin-top: 10px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.38; }
.cc-lead { margin-top: 10px; color: rgba(255, 255, 255, .68); line-height: 2; }
.cc-ways { margin: 20px 0 0; padding: 0; list-style: none; }
.cc-ways li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.cc-ways a { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-radius: 14px; color: #fff; transition: background .2s, padding .2s; }
.cc-ways a:hover { padding-inline-start: 12px; background: rgba(255, 255, 255, .07); }
.cc-way-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #FF9A6B; background: rgba(238, 93, 56, .18); transition: background .2s, color .2s; }
.cc-ways a:hover .cc-way-icon { color: #fff; background: #EE5D38; }
.cc-way-text { min-width: 0; }
.cc-way-text small { display: block; color: rgba(255, 255, 255, .55); font-size: 12px; line-height: 1.6; }
.cc-way-text b { display: block; font-size: 14px; font-weight: 600; line-height: 1.7; }

.cc-chat { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 26px; color: #110E2D; background: #fff; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .75); }
.cc-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #EEEEF3; }
.cc-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: #FFF3EE; }
.cc-avatar img { width: 34px; height: auto; }
.cc-chat-head b { display: block; font-size: 14px; line-height: 1.6; }
.cc-chat-head small { display: flex; align-items: center; gap: 6px; color: #8A8899; font-size: 12px; }
.cc-chat-head small i { width: 7px; height: 7px; border-radius: 50%; background: #2FBF71; box-shadow: 0 0 0 3px rgba(47, 191, 113, .2); }
.cc-count { margin-inline-start: auto; color: #8A8899; font-size: 12px; }
.cc-log { display: flex; flex-direction: column; gap: 10px; height: 300px; padding: 16px 18px; overflow-y: auto; background: radial-gradient(rgba(17, 14, 45, .05) 1px, transparent 1.4px) 0 0 / 16px 16px, #FAFAFC; }
.cc-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; animation: ccIn .3s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes ccIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.cc-msg.is-bot { align-self: flex-start; color: #110E2D; background: #fff; box-shadow: 0 8px 18px -14px rgba(17, 14, 45, .5), inset 0 0 0 1px #EEEEF3; border-start-start-radius: 4px; }
.cc-msg.is-me { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #EE5D38, #D94A26); border-start-end-radius: 4px; }
.cc-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.cc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #B4B3C2; animation: ccDot 1s infinite; }
.cc-typing i:nth-child(2) { animation-delay: .15s; }
.cc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ccDot { 30% { transform: translateY(-4px); background: #EE5D38; } }
.cc-input { position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 12px; border-top: 1px solid #EEEEF3; }
.cc-step { flex: 1; min-width: 0; }
.cc-step input, .cc-step textarea { display: block; width: 100%; padding: 13px 15px; border: 1.5px solid transparent; border-radius: 15px; color: #110E2D; font-size: 13px; line-height: 1.6; background: #F3F3F7; outline: 0; resize: none; transition: border-color .2s, background .2s; }
.cc-step input:focus, .cc-step textarea:focus { border-color: #EE5D38; background: #fff; }
.cc-chat.is-wrong .cc-step { animation: ccShake .36s; }
@keyframes ccShake { 25% { transform: translateX(5px); } 50% { transform: translateX(-5px); } 75% { transform: translateX(3px); } }
.cc-topics { display: flex; flex-wrap: wrap; gap: 7px; }
.cc-topic { padding: 9px 15px; border-radius: 13px; color: #EE5D38; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1.5px #F9CFC3; transition: background .2s, color .2s, transform .2s; }
.cc-topic:hover { color: #fff; background: #EE5D38; transform: translateY(-2px); }
.cc-topic-other { color: #55536B; box-shadow: inset 0 0 0 1.5px #DDDCE6; border-style: dashed; }
.cc-other-input { display: none !important; }
.cc-chat.is-other .cc-topic { display: none; }
.cc-chat.is-other .cc-other-input { display: block !important; }
.cc-skip { margin-top: 6px; padding: 2px 6px; color: #8A8899; font-size: 12px; }
.cc-skip:hover { color: #EE5D38; }
.cc-code { display: flex; gap: 8px; align-items: stretch; }
.cc-captcha { flex: none; display: grid; place-items: center; width: 120px; overflow: hidden; border-radius: 15px; background: #FFE3DB; cursor: pointer; }
.cc-captcha img { max-height: 46px; background: transparent; }
.cc-next { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: #EE5D38; transition: background .2s, transform .2s; }
.cc-next:hover { background: #DB4E2B; transform: translateY(-2px); }
.cc-next i { position: absolute; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; opacity: 0; }
.cc-next.is-busy svg { visibility: hidden; }
.cc-next.is-busy i { opacity: 1; animation: ccSpin .7s linear infinite; }
@keyframes ccSpin { to { transform: rotate(360deg); } }

/* one question at a time once the script is running; without it every field shows */
.cc-chat:not(.is-live) .cc-input { flex-direction: column; align-items: stretch; }
.cc-chat:not(.is-live) .cc-log { height: auto; }
.cc-chat.is-live .cc-step:not(.is-on) { display: none; }
.cc-chat.is-live .cc-msg[data-cc-q]:not(.is-shown) { display: none; }
.cc-chat.is-live.at-topics .cc-next { display: none; }

@media (max-width: 1023px) {
    .cc { grid-template-columns: minmax(0, 1fr); padding: 32px 22px; }
}
@media (max-width: 767px) {
    .cc-layer { margin: 0 34px; height: 14px; }
    .cc-layer-2 { margin: 0 17px; }
    .cc { padding: 24px 12px 12px; border-radius: 24px; gap: 22px; }
    .cc-side { padding: 0 8px; }
    .cc-log { height: 270px; padding: 12px; }
    .cc-captcha { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-msg, .cc-typing i { animation: none; }
}