/**
 * Playloom contact form & AI popup — Page 1271
 * Dark design #0d0d0f, no external/Kevuru styling
 */

/* --- Section --- */
.contact-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 4rem 0;
    background: linear-gradient(180deg, #0d0d0f 0%, #16161a 100%);
    color: #e8e8ea;
}

.contact-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
#bottom-contact-form .wpcf7-list-item-label a{
	color: #FFCC17 !important; 
}
/* Section content: unified glassmorphism (matches popup/chat) */
.contact-section__content {
    background: rgba(255, 255, 255, 0.05);
    background-image: var(--main-form-bg, none);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.contact-section__form {
    max-width: 560px;
}

/* Page 1271: bottom contact section with form/success/chat contexts */
.contact-section__form-wrapper {
    max-width: 560px;
}

.contact-section__form-header {
    margin-bottom: 1.25rem;
}

.contact-section__form-wrapper .chat-wrapper {
    display: none;
    margin-top: 1rem;
}

.contact-section__form-wrapper .js-chat-inner {
    min-height: 300px;
}

/* --- Form wrapper --- */
.contact-form__wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.contact-form__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.contact-form__row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-form__label,
.textarea-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #a0a0a8;
}

.contact-form__input,
.contact-form__textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    min-height: 38px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: #fff;
    background: #25252b;
    border: 1px solid #3a3a42;
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #6366f1;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: #6b6b75;
}

.contact-form__textarea {
    min-height: 82px;
    resize: vertical;
}

.contact-form__error-message {
    font-size: 0.8125rem;
    color: #f87171;
    margin: 0.25rem 0 0 0;
    display: none;
}

.contact-form__message {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.contact-form__message p {
    margin: 0;
}

/* --- Buttons row: single horizontal row --- */
.form-submit-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    margin-top: 0.5rem;
    /* Anchor for the sending spinner drawn as ::after (see below). */
    position: relative;
}

/* Only on page 1271: show Get AI Call and Chat with AI Assistant; on other pages show only Send Form */
.form-submit-group .btn-callback,
.form-submit-group .btn-ai-chat {
    display: none;
}
/* body.page-id-1271 .form-submit-group .btn-callback,
body.page-id-1271 .form-submit-group .btn-ai-chat {
    display: inline-flex;
} */

.form-submit-group .contact-form__submit,
.form-submit-group .btn-send-form,
.form-submit-group .btn-callback,
.form-submit-group .btn-ai-chat,
.contact-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #e8e8ea;
}

.form-submit-group .contact-form__submit:hover:not(:disabled),
.form-submit-group .btn-send-form:hover:not(:disabled) {
    background-color: #FFCC17;
    color: #0d0d0f;
    border-color: rgba(255, 204, 23, 0.5);
}

.form-submit-group .btn-callback:hover:not(:disabled),
.contact-form__btn--call:hover:not(:disabled) {
    background-color: #FFCC17;
    color: #0d0d0f;
    border-color: rgba(255, 204, 23, 0.5);
}

.form-submit-group .btn-ai-chat:hover:not(:disabled),
.contact-form__btn--chat:hover:not(:disabled) {
    background-color: #FFCC17;
    color: #0d0d0f;
    border-color: rgba(255, 204, 23, 0.5);
}

.form-submit-group button:disabled,
.form-submit-group button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Additional questions --- */
.additional-questions__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.additional-questions__email a {
    color: #6366f1;
    text-decoration: none;
}

.additional-questions__email a:hover {
    text-decoration: underline;
}

/* --- Call button (floating) --- */
@keyframes call-button-pulsar {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 4px 28px rgba(34, 197, 94, 0.55), 0 0 0 8px rgba(34, 197, 94, 0.15);
    }
}

.call-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #22c55e;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: call-button-pulsar 2s ease-in-out infinite;
}

.call-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(34, 197, 94, 0.5);
    animation: none;
}

.call-button .call-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* --- Floating Chat Widget: non-blocking, no overlay, anchored near call button --- */
#callPopup.call-popup {
    position: fixed;
    bottom: 100px;   /* ~20px above call button (button bottom: 24px + height 56px + 20px gap) */
    right: 24px;
    left: auto;
    top: auto;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    pointer-events: none;   /* allow clicks through to page; content has pointer-events: auto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

#callPopup.call-popup.active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 540px) {
    #callPopup.call-popup {
        left: 12px;
        right: 12px;
        bottom: 90px;
        max-width: calc(100vw - 24px);
    }
    .call-popup__content {
        min-width: 0;
        width: 100%;
    }
}

/* Popup content: glassmorphism floating panel; only this box receives pointer events */
.call-popup__content {
    pointer-events: auto;
    position: relative;
    width: 100%;
    max-width: 520px;
    min-width: 320px;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Playloom scrollbar for popup content */
.call-popup__content::-webkit-scrollbar {
    width: 6px;
}

.call-popup__content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.call-popup__content::-webkit-scrollbar-thumb {
    background: #6366f1;
    border-radius: 3px;
}

.call-popup__content::-webkit-scrollbar-thumb:hover {
    background: #5558e3;
}

.call-popup__close {
    position: absolute;
    top: 0.25rem;
    right: 1rem;
    z-index: 10;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #a0a0a8;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.call-popup__close:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.3);
}

.call-popup__header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1.25rem;
    z-index: 1;
    padding-right: 48px; /* leave room for close button so it stays clickable */
}

.call-popup__header .js-popup-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

/* Form title "Form": bottom contact — ClashDisplay 24px, line-height 28px, bold, uppercase, white */
#bottom-contact-form .js-popup-title,
#bottom-contact-form .contact-section__form-header .js-popup-title {
    font-family: "ClashDisplay", sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    text-align: left !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
}

/* Form title "Form": popup — ClashDisplay 18px, bold, uppercase, white */
#callPopup .js-popup-title,
#callPopup .call-popup__header .js-popup-title {
    font-family: "ClashDisplay", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    text-align: left !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
}

/* Back button: layout only; visibility controlled by .contact-form-context[data-state] below */
.call-popup__header .js-back-toggle,
.contact-section__form-header .js-back-toggle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.12);
    color: #e8e8ea;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}

.call-popup__header .js-back-toggle svg,
.contact-section__form-header .js-back-toggle svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.call-popup__header .js-back-toggle:hover,
.contact-section__form-header .js-back-toggle:hover {
    color: #fff;
    background: rgba(99, 102, 241, 0.35);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-50%) translateX(-3px);
}

/* Back button: hidden by default; shown in chat via [data-state] rules below. */
.js-back-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.js-success-container {
    display: none;
    text-align: center;
    padding: 20px;
}

.js-success-container.is-visible {
    display: block;
}

/* When our JS shows success containers, it uses display:flex — make layout vertical (footer + popup). */
#bottom-contact-form .js-success-container,
#callPopup .js-success-container,
.contact-form-context .js-success-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.chat-wrapper {
    display: none;
    flex-direction: column;
    height: 100%;
}

.chat-wrapper.is-visible {
    display: flex;
}

.chat-wrapper #formContainer,
.chat-wrapper .form-container,
.chat-wrapper form.wpcf7-form {
    display: none !important;
}

.chat-wrapper .wpcf7-response-output,
.chat-wrapper .wpcf7-mail-sent-ok,
.chat-wrapper #successContainer {
    display: none !important;
}

/* Remove CF7 standard response output in Playloom section + popup (use custom success UI instead).
   Gated on html.cf7-js-feedback: the custom success UI lives in general.js, so if that
   script never runs the native CF7 message must stay on screen rather than the user
   clicking "Send Form" and seeing nothing at all. */
html.cf7-js-feedback #callPopup .wpcf7-response-output,
html.cf7-js-feedback #bottom-contact-form .wpcf7-response-output,
html.cf7-js-feedback #callPopup .wpcf7-mail-sent-ok,
html.cf7-js-feedback #bottom-contact-form .wpcf7-mail-sent-ok,
html.cf7-js-feedback #callPopup .wpcf7-mail-sent-ng,
html.cf7-js-feedback #bottom-contact-form .wpcf7-mail-sent-ng,
html.cf7-js-feedback #callPopup .wpcf7-validation-errors,
html.cf7-js-feedback #bottom-contact-form .wpcf7-validation-errors,
html.cf7-js-feedback #callPopup .wpcf7-spam,
html.cf7-js-feedback #bottom-contact-form .wpcf7-spam {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide the theme CF7 toast only once the custom success / chat view has taken over.
   This used to hide it unconditionally, which permanently suppressed all submission
   feedback in the bottom contact section — the custom UI that was meant to replace it
   lives in custom.js, and that file is entirely commented out. While the container is
   still in its "form" state the toast must be allowed to show. */
#callPopup:not([data-state="form"]) .contact-form__message,
#bottom-contact-form:not([data-state="form"]) .contact-form__message,
#callPopup:not([data-state="form"]) .sidebar-contact-form__message,
#bottom-contact-form:not([data-state="form"]) .sidebar-contact-form__message {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.call-popup.active .chat-wrapper ~ #formContainer,
.call-popup.active .chat-wrapper ~ #successContainer {
    display: none !important;
}

/* ==========================================================================
   CF7 submission feedback toast (success / validation / spam / mail failure)
   Rendered by general.js. Declared here because build/css/custom.css is
   enqueued on every page; !important overrides the compiled per-section rules
   in build/css/sections/*.min.css which would otherwise force display: flex
   on an empty box and keep it permanently visible-but-blank.
   ========================================================================== */
.contact-form__message,
.sidebar-contact-form__message {
    display: none !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 14px;
    border-radius: 5px;
    color: #ffffff;
    border-left: 4px solid rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
}

.contact-form__message.contact-form__message--visible,
.sidebar-contact-form__message.contact-form__message--visible {
    display: flex !important;
}

/* Darkened from #08beb2: white text on that teal measured ~2.3:1, below WCAG AA. */
.contact-form__message--success {
    background-color: #0a7d75 !important;
}

.contact-form__message--error {
    background-color: #9d40ad !important;
}

/* ==========================================================================
   "Sending…" state for the CF7 submit button
   CF7 puts class="submitting" / data-status="submitting" on the <form> for the
   duration of the request, so the spinner needs no JS of its own. general.js
   additionally disables the control and swaps its label, which is what stops
   a second submission while the first is still in flight.
   !important is needed because the compiled per-section rules in
   build/css/sections/*.min.css carry deeper selectors than these.
   ========================================================================== */
/* The disabled look itself is defined by the .form-submit-group rule further
   down (it is more specific and already !important); this only covers the
   window where CF7 is submitting but the control is not disabled. */
form.wpcf7-form.submitting .contact-form__submit {
    opacity: 0.5 !important;
    cursor: progress !important;
    box-shadow: none !important;
    transform: none !important;
    /* Keep room for the spinner so the label does not sit under it. */
    padding-right: 44px !important;
}

/* Neutralise the lift/glow hover while the request is in flight. */
form.wpcf7-form.submitting .contact-form__submit:hover {
    box-shadow: none !important;
    transform: none !important;
}

form.wpcf7-form.submitting .form-submit-group::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    box-sizing: border-box;
    border: 2px solid rgba(1, 2, 30, 0.28);
    border-top-color: #01021E;
    border-radius: 50%;
    animation: playloom-spin 0.7s linear infinite;
    pointer-events: none;
}

@keyframes playloom-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    form.wpcf7-form.submitting .form-submit-group::after {
        animation-duration: 2.4s;
    }
}

/* --- Chat wrapper: right-aligned in parent --- */
.contact-form-context,
.call-popup__content {
    display: flex;
    flex-direction: column;
}

/* No stacking: form and chat full-width; state controls visibility (no !important on defaults). */
.contact-form-context .js-form-container,
.contact-form-context .chat-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* State-based visibility for form/chat containers + Back button (avoid inline display "sticking"). */
.chat-wrapper-parent .chat-wrapper,
.contact-form-context .chat-wrapper {
    display: none;
}
.chat-wrapper-parent .js-form-container,
.contact-form-context .js-form-container {
    display: block;
}

.chat-wrapper-parent[data-state="chat"] .chat-wrapper,
.contact-form-context[data-state="chat"] .chat-wrapper {
    display: block;
}
.chat-wrapper-parent[data-state="chat"] .js-form-container,
.contact-form-context[data-state="chat"] .js-form-container,
.chat-wrapper-parent[data-state="chat"] .js-success-container,
.contact-form-context[data-state="chat"] .js-success-container {
    display: none;
}

/* Back button: in chat view always visible; in form view visible only when chat is unlocked. */
.chat-wrapper-parent[data-state="form"] .js-back-toggle,
.contact-form-context[data-state="form"] .js-back-toggle {
    display: none;
}
/* When chat is unlocked, show Back in form view too so user can switch to chat anytime. */
body.chat-unlocked .chat-wrapper-parent[data-state="form"] .js-back-toggle,
body.chat-unlocked .contact-form-context[data-state="form"] .js-back-toggle {
    display: flex;
}
.chat-wrapper-parent[data-state="chat"] .js-back-toggle,
.contact-form-context[data-state="chat"] .js-back-toggle {
    display: flex;
}

.chat-wrapper {
    align-self: flex-end;
    max-width: 100%;
    width: 100%;
}

@media (min-width: 520px) {
    .chat-wrapper {
        max-width: 500px;
        min-width: 550px !important;
    }
	.call-popup .chat-wrapper{
		min-width: 475px !important;
	}
}

/* --- Chat UI: Glassmorphism + professional messenger (Playloom palette) --- */
#chatContainer.js-chat-inner,
.chat-wrapper .js-chat-inner {
    display: flex;
    flex-direction: column;
    height: 550px;
    max-height: 85vh;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

#chatMessages.js-chat-messages,
#footerChatMessages.js-chat-messages,
.chat-wrapper .js-chat-messages {
    flex: 1;
    min-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Playloom custom scrollbar: thin, accent thumb */
#chatMessages.js-chat-messages::-webkit-scrollbar,
#footerChatMessages.js-chat-messages::-webkit-scrollbar,
.chat-wrapper .js-chat-messages::-webkit-scrollbar {
    width: 6px;
}

#chatMessages.js-chat-messages::-webkit-scrollbar-track,
#footerChatMessages.js-chat-messages::-webkit-scrollbar-track,
.chat-wrapper .js-chat-messages::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

#chatMessages.js-chat-messages::-webkit-scrollbar-thumb,
#footerChatMessages.js-chat-messages::-webkit-scrollbar-thumb,
.chat-wrapper .js-chat-messages::-webkit-scrollbar-thumb {
    background: #6366f1;
    border-radius: 3px;
}

#chatMessages.js-chat-messages::-webkit-scrollbar-thumb:hover,
#footerChatMessages.js-chat-messages::-webkit-scrollbar-thumb:hover,
.chat-wrapper .js-chat-messages::-webkit-scrollbar-thumb:hover {
    background: #5558e3;
}

.status.js-status {
    font-size: 0.8125rem;
    font-style: italic;
    color: #a0a0a8;
    margin: 0 12px 6px;
    flex-shrink: 0;
}

.chat-footer {
    flex-shrink: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.chat-footer .input-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #3a3a42;
    border-radius: 12px;
    background: #25252b;
    padding: 4px 4px 4px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-footer .input-wrapper:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.chat-footer .js-chat-input {
    flex: 1;
    min-width: 0;
    padding: 10px 8px 10px 0;
    font-size: 0.9375rem;
    font-family: inherit;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #e8e8ea;
}

.chat-footer .js-chat-input::placeholder {
    color: #6b6b75;
}

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

.chat-footer .js-chat-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    background: #6366f1;
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
}

.chat-footer .js-chat-send:hover {
    background: #5558e3;
}

.chat-footer .js-chat-send:active {
    transform: scale(0.97);
}

/* Send arrow icon */
.chat-footer .js-chat-send {
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

/* --- Message bubbles --- */
.msg-wrapper {
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
}

/* User messages: right-aligned, Playloom secondary background, sharper bottom-right */
.msg-wrapper.user-msg-wrapper,
.msg-wrapper.message-user {
    justify-content: flex-end;
}

.msg-wrapper.user-msg-wrapper .msg-text,
.msg-wrapper.message-user .msg-text {
    max-width: 85%;
    padding: 10px 15px;
    font-size: 0.9375rem;
    line-height: 1.5;
    font-family: inherit;
    color: #e8e8ea;
    background: #2d2d34;
    border-radius: 12px 12px 4px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Agent messages: left-aligned, avatar + bubble, lighter bubble, sharper bottom-left */
.msg-wrapper.ai-msg-wrapper,
.msg-wrapper.message-agent {
    justify-content: flex-start;
    gap: 10px;
    /* During typing the bubble height changes; keep avatar vertically stable. */
    align-items: center !important;
    /* Keep avatar fully inside chat viewport (prevents left-edge clipping). */
    padding-left: 10px !important;
    box-sizing: border-box;
}

.msg-wrapper.ai-msg-wrapper .ai-avatar,
.msg-wrapper.message-agent .ai-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    overflow: visible !important; /* prevent svg clipping during typing/stream */
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 0;
    align-self: center !important;
    margin: 0 !important;
}

.msg-wrapper.ai-msg-wrapper .ai-avatar svg,
.msg-wrapper.message-agent .ai-avatar svg {
    width: 72% !important;
    height: 72% !important;
    display: block;
    overflow: visible !important;
}

/* Popup: ensure AI avatar is visible (override any stacking/ID issues) */
#callPopup .msg-wrapper.ai-msg-wrapper .ai-avatar,
#callPopup .msg-wrapper.message-agent .ai-avatar {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    visibility: visible !important;
    opacity: 1 !important;
}
#callPopup .msg-wrapper.ai-msg-wrapper .ai-avatar svg,
#callPopup .msg-wrapper.message-agent .ai-avatar svg {
    width: 72% !important;
    height: 72% !important;
    overflow: visible !important;
}

.msg-wrapper.ai-msg-wrapper .msg-text,
.msg-wrapper.message-agent .msg-text {
    position: relative;
    max-width: 85%;
    padding: 10px 25px 10px 15px;
    font-size: 0.9375rem;
    line-height: 1.5;
    font-family: inherit;
    color: #e8e8ea;
    background: #25252b;
    border: 1px solid #3a3a42;
    border-radius: 12px 12px 12px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.msg-wrapper.ai-msg-wrapper .ai-msg-content,
.msg-wrapper.message-agent .ai-msg-content {
    white-space: pre-line;
    word-wrap: break-word;
}

/* AI message links color override (so links stay readable on dark bubbles). */
.msg-wrapper.ai-msg-wrapper .ai-msg-content a,
.msg-wrapper.message-agent .ai-msg-content a {
    color: #FFD84D !important;
}

/* Complaint button inside agent bubble */
.msg-wrapper.ai-msg-wrapper .msg-text .complaint-btn,
.msg-wrapper.message-agent .msg-text .complaint-btn {
    margin-top: 6px;
}

.complaint-form {
    flex-direction: column;
}

.complaint-form .complaint-textarea{
    color: #000 !important;

}

.complaint-form .complaint-textarea::placeholder {
    color: #000 !important;
}

.thank-you_title,
.app-thank-you-text {
    color: #e8e8ea;
}

.app-thank-you-icon {
    display: block;
    margin: 1em auto;
}

/* ==========================================================================
   FORCED LAYOUT OVERRIDES — !important to override theme/CF7 and force layout
   ========================================================================== */

/* Cleanup: hide CF7 spinner */
.wpcf7-spinner {
    display: none !important;
}

/* --- 1. FORCE THREE-BUTTON ROW --- */
.contact-form__wrapper .form-submit-group,
.contact-form__row.form-submit-group,
.form-submit-group,
#formContainer .form-submit-group,
#footerFormContainer .form-submit-group,
.js-form-container .form-submit-group,
.wpcf7 .contact-form__wrapper .contact-form__row:last-of-type,
.wpcf7-form .form-submit-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    margin-top: 0.5rem !important;
}

.form-submit-group .contact-form__submit,
.form-submit-group .btn-send-form,
.form-submit-group .btn-callback,
.form-submit-group .btn-ai-chat,
.form-submit-group input[type="submit"],
.form-submit-group button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex: 1 !important;
    white-space: nowrap !important;
    padding: 10px 5px !important;
    font-size: 13px !important;
    min-width: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e8e8ea !important;
    transition: background-color 0.25s ease, color 0.25s ease !important;
}

.form-submit-group .contact-form__submit:hover:not(:disabled),
.form-submit-group .btn-send-form:hover:not(:disabled),
.form-submit-group .btn-callback:hover:not(:disabled),
.form-submit-group .btn-ai-chat:hover:not(:disabled),
.form-submit-group input[type="submit"]:hover:not(:disabled),
.form-submit-group button:hover:not(:disabled) {
    background-color: #FFCC17 !important;
    color: #0d0d0f !important;
    border-color: rgba(255, 204, 23, 0.5) !important;
}

/* For this form "disabled" now means "sending": general.js locks the control
   for the duration of the CF7 request. pointer-events:none stops a second
   click landing; padding-right reserves room for the spinner drawn on
   .form-submit-group::after. */
.form-submit-group button:disabled,
.form-submit-group button[disabled],
.form-submit-group input[type="submit"]:disabled,
.form-submit-group input[type="submit"][disabled] {
    opacity: 0.5 !important;
    cursor: progress !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
    padding-right: 44px !important;
}

/* --- 2. COMPACT FORM HEIGHT (Popup & Bottom Contact) --- */
.contact-form-context .contact-form__input,
.contact-form-context .contact-form__textarea,
#formContainer .contact-form__input,
#formContainer .contact-form__textarea,
#footerFormContainer .contact-form__input,
#footerFormContainer .contact-form__textarea,
.js-form-container .contact-form__input,
.js-form-container .contact-form__textarea,
.contact-form__wrapper .contact-form__input,
.contact-form__wrapper .contact-form__textarea {
    height: 32px !important;
    min-height: 32px !important;
    margin-bottom: 6px !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.contact-form-context .contact-form__textarea,
#formContainer .contact-form__textarea,
#footerFormContainer .contact-form__textarea,
.js-form-container .contact-form__textarea,
.contact-form__wrapper .contact-form__textarea {
    height: 60px !important;
    min-height: 60px !important;
    resize: vertical !important;
}

.contact-form-context .contact-form__row,
#formContainer .contact-form__row,
#footerFormContainer .contact-form__row,
.js-form-container .contact-form__row {
    margin-bottom: 6px !important;
}

/* Labels / titles: readable but still tight */
.contact-form__label,
.textarea-label,
.wpcf7-form label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.1 !important;
}

/* Title sizing: 24px bottom contact, 18px popup */
#bottom-contact-form .contact-form__title,
.bottom-contact-section .contact-form__title {
    font-size: 24px !important;
    text-transform: uppercase;
}
#callPopup .contact-form__title {
    font-size: 18px !important;
    text-transform: uppercase;
}

/* Checkbox refactor (CF7 acceptance) */
#callPopup .wpcf7-list-item,
#bottom-contact-form .wpcf7-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #ffffff !important;
    line-height: 20px !important;
}

#callPopup .wpcf7-list-item *,
#bottom-contact-form .wpcf7-list-item * {
    color: #ffffff !important;
}

#callPopup .wpcf7-list-item input[type="checkbox"],
#bottom-contact-form .wpcf7-list-item input[type="checkbox"],
#callPopup input.wpcf7-acceptance[type="checkbox"],
#bottom-contact-form input.wpcf7-acceptance[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 6px !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
}

#callPopup .wpcf7-list-item input[type="checkbox"]:checked,
#bottom-contact-form .wpcf7-list-item input[type="checkbox"]:checked,
#callPopup input.wpcf7-acceptance[type="checkbox"]:checked,
#bottom-contact-form input.wpcf7-acceptance[type="checkbox"]:checked {
    background: #FFCC17 !important;
    border-color: #FFCC17 !important;
}

#callPopup .wpcf7-list-item input[type="checkbox"]:focus-visible,
#bottom-contact-form .wpcf7-list-item input[type="checkbox"]:focus-visible,
#callPopup input.wpcf7-acceptance[type="checkbox"]:focus-visible,
#bottom-contact-form input.wpcf7-acceptance[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 204, 23, 0.35) !important; /* no layout shift */
}

#callPopup .wpcf7-list-item input[type="checkbox"]:checked::after,
#bottom-contact-form .wpcf7-list-item input[type="checkbox"]:checked::after,
#callPopup input.wpcf7-acceptance[type="checkbox"]:checked::after,
#bottom-contact-form input.wpcf7-acceptance[type="checkbox"]:checked::after {
    content: "✓" !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #0d0d0f !important;
    font-weight: 800 !important;
}

#callPopup .wpcf7-list-item-label,
#bottom-contact-form .wpcf7-list-item-label {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Chat stability: reserve status line height so footer never gets pushed/cut off */
#chatContainer.js-chat-inner,
.chat-wrapper .js-chat-inner {
    position: relative !important;
}

.status.js-status {
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 12px 6px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.chat-footer {
    flex-shrink: 0 !important;
}

/* contact_bottom: transparent inputs with subtle bottom border */
#bottom-contact-form input[type="text"],
#bottom-contact-form input[type="email"],
#bottom-contact-form input[type="tel"],
#bottom-contact-form textarea,
#bottom-contact-form .contact-form__input,
#bottom-contact-form .contact-form__textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
}

#bottom-contact-form input[type="text"]:focus,
#bottom-contact-form input[type="email"]:focus,
#bottom-contact-form input[type="tel"]:focus,
#bottom-contact-form textarea:focus,
#bottom-contact-form .contact-form__input:focus,
#bottom-contact-form .contact-form__textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Outline-free inputs: no outline or box-shadow on focus globally */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
.contact-form__input,
.contact-form__textarea {
    outline: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

#bottom-contact-form input[type="text"]::placeholder,
#bottom-contact-form input[type="email"]::placeholder,
#bottom-contact-form input[type="tel"]::placeholder,
#bottom-contact-form textarea::placeholder,
#bottom-contact-form .contact-form__input::placeholder,
#bottom-contact-form .contact-form__textarea::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Button row spacing */
.form-submit-group {
    margin-top: 10px !important;
}

/* --- 2A. contact_bottom: no internal scroll, overflow visible --- */
#bottom-contact-form,
#bottom-contact-form .contact-form-context,
#bottom-contact-form .js-form-container,
#bottom-contact-form .contact-form__wrapper,
#bottom-contact-form .wpcf7,
#bottom-contact-form .wpcf7-form {
    overflow: visible !important;
    max-height: none !important;
}

#bottom-contact-form .contact-form__wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- 2B. Popup: stable height, content determines size; no stacking --- */
#callPopup.call-popup {
    height: auto !important;
    max-height: 90vh !important;
}

#callPopup .call-popup__content,
#callPopup .call-popup__content.contact-form-context {
    height: auto !important;
    max-height: 90vh !important;
}

/* Scroll inside form area only (not the whole widget); header stays fixed, no header scroll */
#callPopup #formContainer.js-form-container {
    max-height: calc(80vh - 100px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Thin Playloom scrollbar for popup form area */
#callPopup #formContainer.js-form-container::-webkit-scrollbar {
    width: 6px !important;
}

#callPopup #formContainer.js-form-container::-webkit-scrollbar-track {
    background: transparent !important;
    border-radius: 3px !important;
}

#callPopup #formContainer.js-form-container::-webkit-scrollbar-thumb {
    background: #6366f1 !important;
    border-radius: 3px !important;
}

#callPopup #formContainer.js-form-container::-webkit-scrollbar-thumb:hover {
    background: #5558e3 !important;
}

/* Reduced padding in popup and form context */
#callPopup .call-popup__content,
.call-popup__content.contact-form-context {
    padding: 1rem 1.25rem !important;
}

.contact-form-context .contact-section__content {
    padding: 1.5rem !important;
}

/* --- 3. CHAT HEIGHT (match form view height, reduce jump) --- */
#chatMessages.js-chat-messages,
#footerChatMessages.js-chat-messages,
.chat-wrapper .js-chat-messages {
    height: 450px !important;
    min-height: 450px !important;
    flex: 1 !important;
}

#chatContainer.js-chat-inner,
.chat-wrapper .js-chat-inner {
    min-height: 520px !important;
    max-height: 85vh !important;
}

/* --- 4. CLOSE BUTTON & HEADER OVERLAP FIX --- */
.call-popup__close {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

.call-popup__header {
    z-index: 1 !important;
    pointer-events: none !important;
    padding-right: 52px !important;
}

.call-popup__header .js-popup-title,
.call-popup__header .js-back-toggle {
    pointer-events: auto !important;
}

/* ==========================================================================
   RESPONSIVE: Form / AI Chat — bottom_contact + Popup (320px–1024px)
   Media queries only; desktop unchanged. No JS changes.
   ========================================================================== */

/* --- 1024px: Tablet — reduce spacing, prevent horizontal scroll --- */
@media (max-width: 1024px) {
    .contact-section {
        padding: 2.5rem 0;
    }
    .contact-section .container {
        padding: 0 1rem;
    }
    .contact-section__content {
        padding: 1.75rem;
        border-radius: 14px;
    }
    .contact-section__form-wrapper,
    .contact-section__form {
        max-width: 100%;
    }
    .contact-section__form-header {
        margin-bottom: 1rem;
    }
    /* Chat wrapper: allow narrow width on tablet */
    .contact-section__form-wrapper .chat-wrapper,
    .chat-wrapper-parent .chat-wrapper {
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 1024px) and (min-width: 521px) {
    .chat-wrapper {
        max-width: 100%;
        min-width: 0;
    }
}

/* --- 768px: Small tablet / large phone — popup wider, buttons can wrap --- */
@media (max-width: 768px) {
    .contact-section {
        padding: 1.5rem 0;
    }
    .contact-section .container {
        padding: 0 0.75rem;
    }
    .contact-section__content {
        padding: 1.25rem;
        border-radius: 12px;
    }
    /* Popup: take 92% width, more screen real estate */
    #callPopup.call-popup {
        left: 4%;
        right: 4%;
        bottom: 80px;
        max-width: 92%;
        width: 92%;
        align-items: flex-end;
        justify-content: center;
    }
    .call-popup__content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: 88vh;
        border-radius: 14px;
        padding: 1.25rem;
    }
    .call-popup__header {
        padding-right: 48px !important;
        margin-bottom: 1rem;
    }
    .call-popup__close {
        top: 0.5rem;
        right: 0.75rem;
        width: 44px;
        height: 44px;
        font-size: 1.75rem;
        border-radius: 12px;
    }
    /* Form title: scale down on popup and bottom_contact */
    #callPopup .js-popup-title,
    #callPopup .call-popup__header .js-popup-title {
        font-size: 16px !important;
        line-height: 20px !important;
    }
    #bottom-contact-form .js-popup-title,
    #bottom-contact-form .contact-section__form-header .js-popup-title {
        font-size: 20px !important;
        line-height: 24px !important;
    }
    /* Back button: touch-friendly */
    .call-popup__header .js-back-toggle,
    .contact-section__form-header .js-back-toggle {
        padding: 14px 18px;
        min-height: 44px;
    }
    .call-popup__header .js-back-toggle svg,
    .contact-section__form-header .js-back-toggle svg {
        width: 20px;
        height: 20px;
    }
    /* 3-button row: allow wrap, centered; remain clickable */
    .contact-form__wrapper .form-submit-group,
    .contact-form__row.form-submit-group,
    .form-submit-group,
    #formContainer .form-submit-group,
    #footerFormContainer .form-submit-group,
    .js-form-container .form-submit-group,
    .wpcf7 .contact-form__wrapper .contact-form__row:last-of-type,
    .wpcf7-form .form-submit-group {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .form-submit-group .contact-form__submit,
    .form-submit-group .btn-send-form,
    .form-submit-group .btn-callback,
    .form-submit-group .btn-ai-chat,
    .form-submit-group input[type="submit"],
    .form-submit-group button {
        min-width: 120px !important;
        padding: 12px 10px !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }
    /* Inputs / textareas: touch-friendly height */
    .contact-form-context .contact-form__input,
    #formContainer .contact-form__input,
    #footerFormContainer .contact-form__input,
    .js-form-container .contact-form__input,
    .contact-form__wrapper .contact-form__input,
    #bottom-contact-form .contact-form__input {
        min-height: 44px !important;
        height: 44px !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
    }
    .contact-form-context .contact-form__textarea,
    #formContainer .contact-form__textarea,
    #footerFormContainer .contact-form__textarea,
    .js-form-container .contact-form__textarea,
    .contact-form__wrapper .contact-form__textarea,
    #bottom-contact-form .contact-form__textarea {
        min-height: 80px !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
    }
    /* Chat: reduced height on small viewport, scroll inside */
    #chatContainer.js-chat-inner,
    .chat-wrapper .js-chat-inner {
        min-height: 380px !important;
        max-height: 75vh !important;
    }
    #chatMessages.js-chat-messages,
    #footerChatMessages.js-chat-messages,
    .chat-wrapper .js-chat-messages {
        min-height: 200px !important;
        height: auto !important;
    }
    .chat-footer .js-chat-input {
        padding: 12px 8px 12px 0;
        font-size: 16px;
        min-height: 44px;
    }
    .chat-footer .js-chat-send {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    /* Popup form scroll: stable internal scroll */
    #callPopup #formContainer.js-form-container {
        max-height: calc(85vh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #callPopup .call-popup__content,
    .call-popup__content.contact-form-context {
        padding: 1rem 1rem !important;
    }
}

/* --- 480px: Phone — full-screen popup overlay, stacked buttons --- */
@media (max-width: 480px) {
    .contact-section {
        padding: 1rem 0;
    }
    .contact-section .container {
        padding: 0 0.5rem;
    }
    .contact-section__content {
        padding: 1rem;
        border-radius: 12px;
    }
    /* Popup: full-screen mobile overlay with clear Close/Back */
    #callPopup.call-popup {
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        max-width: 100%;
        width: 100%;
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }
    .call-popup__content {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 1rem 1rem 1.5rem !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .call-popup__header {
        padding-right: 52px !important;
        margin-bottom: 0.75rem;
    }
    .call-popup__close {
        top: 0.75rem;
        right: 1rem;
        width: 48px;
        height: 48px;
        font-size: 2rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.1);
    }
    /* Form title: smaller on very small screens */
    #callPopup .js-popup-title,
    #callPopup .call-popup__header .js-popup-title {
        font-size: 14px !important;
        line-height: 18px !important;
    }
    #bottom-contact-form .js-popup-title,
    #bottom-contact-form .contact-section__form-header .js-popup-title {
        font-size: 18px !important;
        line-height: 22px !important;
    }
    /* 3-button row: stack vertically, full width, centered */
    .contact-form__wrapper .form-submit-group,
    .contact-form__row.form-submit-group,
    .form-submit-group,
    #formContainer .form-submit-group,
    #footerFormContainer .form-submit-group,
    .js-form-container .form-submit-group,
    .wpcf7 .contact-form__wrapper .contact-form__row:last-of-type,
    .wpcf7-form .form-submit-group {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .form-submit-group .contact-form__submit,
    .form-submit-group .btn-send-form,
    .form-submit-group .btn-callback,
    .form-submit-group .btn-ai-chat,
    .form-submit-group input[type="submit"],
    .form-submit-group button {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 12px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }
    /* Labels: scale down, keep hierarchy */
    .contact-form__label,
    .textarea-label,
    .wpcf7-form label {
        font-size: 14px !important;
    }
    #bottom-contact-form .contact-form__title,
    .bottom-contact-section .contact-form__title {
        font-size: 18px !important;
        margin-top: 25px;
    }
    #callPopup .contact-form__title {
        font-size: 16px !important;
        margin-top: 25px;
    }
    /* Success / thank-you: compact on small screens */
    .js-success-container {
        padding: 1rem;
    }
    .thank-you_title {
        font-size: 1.125rem;
    }
    .app-thank-you-icon {
        width: 80px;
        height: 80px;
    }
    .app-thank-you-text {
        font-size: 0.875rem;
    }
    /* Chat heights for small viewport */
    #chatContainer.js-chat-inner,
    .chat-wrapper .js-chat-inner {
        min-height: 320px !important;
        max-height: 70vh !important;
    }
    #chatMessages.js-chat-messages,
    #footerChatMessages.js-chat-messages,
    .chat-wrapper .js-chat-messages {
        min-height: 180px !important;
    }
    #callPopup #formContainer.js-form-container {
        max-height: calc(100vh - 140px) !important;
    }
}

/* --- 320px: Small phone — minimal padding, visual polish --- */
@media (max-width: 320px) {
    .contact-section .container {
        padding: 0 0.5rem;
    }
    .contact-section__content {
        padding: 0.75rem;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    #bottom-contact-form .js-popup-title,
    #bottom-contact-form .contact-section__form-header .js-popup-title {
        font-size: 16px !important;
        line-height: 20px !important;
    }
    .contact-form__label,
    .textarea-label,
    .wpcf7-form label {
        font-size: 13px !important;
    }
    .form-submit-group .contact-form__submit,
    .form-submit-group .btn-send-form,
    .form-submit-group .btn-callback,
    .form-submit-group .btn-ai-chat,
    .form-submit-group input[type="submit"],
    .form-submit-group button {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
    .call-popup__content {
        padding: 0.75rem 0.75rem 1rem !important;
    }
    .call-popup__close {
        width: 44px;
        height: 44px;
        top: 0.5rem;
        right: 0.5rem;
    }
    .call-popup__header .js-back-toggle,
    .contact-section__form-header .js-back-toggle {
        padding: 12px 14px;
    }
}

/* ==========================================================================
   MOBILE POPUP REFACTOR (Form + Chat) — single-scroll + compact height
   Must come AFTER other breakpoints to override fullscreen/nested scroll.
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* 1) STRICT VIEW SEPARATION — only one view visible; no overlap */
    #callPopup .call-popup__content[data-state="form"] .chat-wrapper,
    #callPopup .call-popup__content[data-state="form"] .chat-wrapper #chatMessages,
    #callPopup .call-popup__content[data-state="form"] .chat-wrapper .chat-footer {
        display: none !important;
    }
    #callPopup .call-popup__content[data-state="chat"] .js-form-container,
    #callPopup .call-popup__content[data-state="chat"] .js-success-container {
        display: none !important;
    }

    /* 2) GLOBAL POPUP — fixed height flex column (header / content / input when chat) */
    #callPopup.call-popup {
        top: 10vh;
        bottom: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        padding: 0;
        overflow: visible;
    }

    #callPopup .call-popup__content {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        display: flex !important;
        flex-direction: column !important;
        height: 75vh !important;
        max-height: 75vh !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 14px;
    }

    /* Header: fixed at top, no shrink */
    #callPopup .call-popup__header {
        min-height: 60px !important;
        flex-shrink: 0 !important;
    }

    /* 3) FORM VIEW — active content takes middle, scrolls; no huge padding */
    #callPopup .call-popup__content[data-state="form"] .js-form-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding-top: 8px !important;
        padding-right: 4px !important;
    }
    #callPopup .call-popup__content[data-state="form"] .js-success-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: auto !important;
        padding-top: 8px !important;
    }

    /* 3-button row: stack vertically */
    #callPopup .contact-form__wrapper .form-submit-group,
    #callPopup .contact-form__row.form-submit-group,
    #callPopup .form-submit-group,
    #callPopup #formContainer .form-submit-group,
    #callPopup .js-form-container .form-submit-group,
    #callPopup .wpcf7-form .form-submit-group {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }
    #callPopup .form-submit-group .contact-form__submit,
    #callPopup .form-submit-group .btn-send-form,
    #callPopup .form-submit-group .btn-callback,
    #callPopup .form-submit-group .btn-ai-chat,
    #callPopup .form-submit-group input[type="submit"],
    #callPopup .form-submit-group button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
    }

    /* 4) CHAT VIEW — .chat-wrapper is the active content; fills middle */
    #callPopup .call-popup__content[data-state="chat"] .chat-wrapper {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #callPopup .call-popup__content[data-state="chat"] #chatContainer.js-chat-inner,
    #callPopup .call-popup__content[data-state="chat"] .chat-wrapper .js-chat-inner {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #callPopup .call-popup__content[data-state="chat"] #chatMessages.js-chat-messages,
    #callPopup .call-popup__content[data-state="chat"] .chat-wrapper .js-chat-messages {
        flex-grow: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #callPopup .call-popup__content[data-state="chat"] .status.js-status {
        flex-shrink: 0 !important;
    }

    #callPopup .call-popup__content[data-state="chat"] .chat-footer {
        flex-shrink: 0 !important;
        padding-bottom: 12px;
    }
    #callPopup .chat-footer .js-chat-send {
        width: 44px;
        height: 44px;
    }
}