:root {
    --primary-color: #e53935;
    --bg-color: #ffffff;
    --text-color: #333333;
    --gray-light: #f4f4f7;
    --gray-medium: #e5e7eb;
    --accent-color: #e53935;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    font-family: 'Inter', sans-serif;
    background: transparent;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    /* Lock document scroll on mobile so the red header cannot rubber-band off-screen. */
    position: fixed;
    inset: 0;
    width: 100%;
}

#focalContainer {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    opacity: 0;
    transition: opacity 0.15s ease;
    overflow: hidden;
    min-height: 0;
}

#focalContainer.focal-config-ready {
    opacity: 1;
}

/* Header */
.focalHeader {
    background: var(--primary-color);
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    min-height: 56px;
    width: 100%;
    z-index: 20;
    position: relative;
}

/* Mobile: pin status header so it cannot be clipped by 100vh / browser chrome. */
@media (max-width: 900px) {
    .focalHeader {
        position: sticky;
        top: 0;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-bottom: 12px;
        min-height: calc(52px + env(safe-area-inset-top, 0px));
    }

    .focalChatBody {
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    .focalBrandLogo {
        max-height: 40px !important;
        height: 40px !important;
    }
}

.focalHeaderInfo {
    display: flex;
    align-items: center;
    gap: 10px;
}

#focalLayerTitle {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

#focalCloseBtn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 20px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

#focalCloseBtn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Chat Body */
.focalChatBody {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
}

.focalGreeting {
    text-align: center;
    margin-bottom: 24px;
    padding: 0 10px;
}

.focalAgentAvatars {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.focalAgentAvatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid white;
    margin-left: -12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.focalAgentAvatar:first-child {
    margin-left: 0;
}

.focalStartGreetingText {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    white-space: pre-line;
}

/* Messages */
.focalMessage {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: messageIn 0.3s ease-out;
}

@keyframes messageIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.focalMessageFromUser {
    align-self: flex-end;
}

.focalMessageFromBot {
    align-self: flex-start;
    max-width: 100%;
    width: 100%;
}

.focalMessageFromBot .focalMessageBodyWrap {
    align-self: flex-start;
    max-width: 85%;
}

.focalMessageBodyWrap {
    padding: 12px 16px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* The handoff card/waiting reply is denser than normal text, so give its
   bubble tighter padding - scoped so ordinary text replies keep their usual
   breathing room. A hidden card (the spinner waiting for the contact form)
   leaves the bubble as it is. */
.focalMessageBodyWrap:has(> .focalHandoffCard:not([hidden]), > .focalHandoffWaiting) {
    padding: 8px 10px;
}

/* Live-agent handoff offer + waiting mockup (see script.js - no live
   handoff exists yet, this is UI-only). The card
   sits inside the SAME bubble as the bot's offer sentence (not its own
   bubble) so the button reads as a direct answer to that question. */
.focalHandoffCard {
    margin-top: 10px;
}

.focalHandoffBtn {
    background-color: var(--primary-color, #e53935);
    color: white;
    border: none;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: opacity 0.2s, box-shadow 0.2s, transform 0.2s;
}

.focalHandoffBtn:hover {
    opacity: 0.92;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

/* T8824 (2026-09-17): three small overlapping agent avatars replace the
   generic headset icon — same visual language as .focalAgentAvatars in the
   greeting, scaled down for a button. */
.focalHandoffAvatars {
    display: inline-flex;
    flex-shrink: 0;
}

.focalHandoffAvatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid white;
    margin-left: -7px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.focalHandoffAvatar:first-child {
    margin-left: 0;
}

.focalHandoffWaiting {
    display: flex;
    align-items: center;
    gap: 10px;
    /* The button turns into this row mid multi-click; the remaining clicks
       must not select its text. */
    user-select: none;
}

.focalHandoffWaitingText {
    line-height: 1.4;
}

.focalHandoffSpinner {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--primary-color, #e53935);
    border-radius: 50%;
    animation: focalHandoffSpin 0.8s linear infinite;
}

@keyframes focalHandoffSpin {
    to {
        transform: rotate(360deg);
    }
}

.focalMessageBodyWrap a {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: opacity 0.2s;
    word-break: break-word;
}

.focalMessageBodyWrap a:hover {
    opacity: 0.8;
}

/* Links in bot messages: use primary brand color */
.focalMessageFromBot .focalMessageBodyWrap a {
    color: var(--primary-color, #2563eb);
}

/* Links in user messages: keep white/inherited */
.focalMessageFromUser .focalMessageBodyWrap a {
    color: inherit;
}

.focalMessageFromUser .focalMessageBodyWrap {
    background: var(--primary-color);
    color: white;
    border-bottom-right-radius: 4px;
}

/* Delivery note under a visitor's live chat message: only while it is being
   sent or when it failed (a delivered message has none). */
.focalDeliveryNote {
    align-self: flex-end;
    margin-top: 4px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
}

.focalDeliveryNote:empty {
    display: none;
}

.focalDeliveryNote[data-delivery="not_sent"],
.focalDeliveryNote[data-delivery="unknown"] {
    color: #dc2626;
}

.focalDeliveryRecover {
    align-self: flex-end;
    margin-top: 2px;
    padding: 0 4px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: var(--primary-color, #e53935);
    text-decoration: underline;
    cursor: pointer;
}

.focalMessageFromBot .focalMessageBodyWrap {
    background: var(--gray-light);
    color: var(--text-color);
    border-bottom-left-radius: 4px;
    border: 1px solid #f1f5f9;
}

/* Product Cards Base styles */
.focalProductCards {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.focalProductList {
    flex-direction: column;
    align-self: flex-start;
    max-width: 85%;
}

/* Carousel wrapper */
.focalProductCarouselWrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.focalCarouselBtn {
    position: absolute;
    z-index: 10;
    background: var(--primary-color, #e53935);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: white;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    padding-bottom: 2px;
    transition: all 0.2s;
    user-select: none;
}

.focalCarouselBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.focalCarouselBtn:active {
    transform: scale(0.95);
}

.focalCarouselLeft {
    left: 8px;
}

.focalCarouselRight {
    right: 8px;
}

/* Set by script.js when the row does not overflow or an arrow cannot scroll further */
.focalCarouselBtn[hidden],
.focalCarouselDots[hidden] {
    display: none;
}

.focalProductCarousel {
    flex-direction: row;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 8px 0;
    scrollbar-width: none;
    /* Firefox */
    width: 100%;
    cursor: grab;
}

.focalProductCarousel.focal-dragging {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    cursor: grabbing !important;
}

/* Set by script.js while the row does not overflow (see updateCarouselControls) */
.focalProductCarousel.focal-carousel-fits {
    scroll-snap-type: none;
}

.focalProductCarousel.focal-dragging * {
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.focalProductCarousel::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Adjust wrapper layout for cards */
.focalProductCard {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}

.focalProductCarousel .focalProductCard {
    flex-direction: column;
    width: 220px;
    align-items: center;
    text-align: center;
    /* Fixed width in carousel mode */
    /* start, not center: the first card stays flush with the bot bubble */
    scroll-snap-align: start;
    overflow: hidden; /* prevent title / content from breaking out of the card border */
}

.focalProductCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.focalProductImage {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.focalProductCarousel .focalProductImage {
    width: 100%;
    height: 140px;
    background: transparent;
}

.focalProductImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.focalProductInfo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    justify-content: center;
}

.focalProductCarousel .focalProductInfo {
    align-items: center;
}

.focalProductTitle {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    line-height: 18px;
    max-height: 36px; /* cap at exactly 2 lines (2 × 18px) */
    /* Exactly 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word; /* break long model numbers instead of overflowing */
}

.focalProductPrice {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.focalProductLink {
    margin-top: auto;
    background-color: var(--primary-color, #e53935);
    color: white;
    padding: 8px 24px;
    border-radius: 20px;
    /* Pill shape */
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    transition: opacity 0.2s;
    text-decoration: none;
}

.focalProductList .focalProductLink {
    width: auto;
    align-self: flex-start;
}

.focalProductLink:hover {
    opacity: 0.9;
}

/* Hide SVG icon in the carousel link if we want it to exactly look like the screenshot, but keeping it small is also fine. The screenshot has no icon though, so we hide it. */
.focalProductLink svg {
    display: none;
}

/* Typing indicator */
.focalTyping {
    padding: 0 20px 15px;
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.focalCarouselDots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.focalCarouselDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.2s;
    cursor: pointer;
}

.focalCarouselDot.active {
    background: var(--primary-color, #e53935);
    transform: scale(1.2);
}

.dots {
    display: flex;
    gap: 4px;
}

.dot {
    width: 5px;
    height: 5px;
    background: #cbd5e1;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
    animation-delay: -0.32s;
}

.dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.3;
    }

    40% {
        transform: scale(1.0);
        opacity: 1;
    }
}

/* Footer */
.focalFooter {
    padding: 8px 20px 8px 20px;
    background: white;
    border-top: 1px solid #f1f5f9;
}

.focalPredefinedButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px 8px;
    background: white;
}

.focalPredefinedBtn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.focalPredefinedBtn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.focalDisclaimer {
    font-size: 11px;
    color: #64748b;
    /* Slightly darker than placeholder for visibility */
    margin-bottom: 6px;
    padding-left: 16px;
    /* Aligns with input text */
    text-align: left;
    font-weight: 500;
}

.focalDisclaimer a {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.focalDisclaimer a:hover,
.focalDisclaimer span[style*="cursor"]:hover {
    opacity: 0.75;
}

.focalInputWrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    padding: 10px 16px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s;
}

.focalInputWrapper:focus-within {
    border-color: #cbd5e1;
    background: white;
}

#messageInput {
    flex: 1;
    border: none;
    background: none;
    resize: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    padding: 4px 0;
    line-height: 1.4;
    color: var(--text-color);
}

#sendButton {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
}

#sendButton:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#sendButton:active {
    transform: scale(0.95);
}

.focalPowerBy {
    font-size: 9px;
    text-align: center;
    color: #94a3b8;
    margin-top: 6px;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.focalPowerBy a:hover {
    text-decoration: underline !important;
    color: #64748b !important;
    cursor: pointer;
}

/* Launcher / Minimized Icon */
.focalLauncher {
    position: fixed;
    bottom: 0;
    right: 0;
    /* Centered in the 80x80 iframe */
    top: 0;
    left: 0;
    margin: auto;

    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, opacity 0.15s ease;
    animation: launcherIn 0.3s ease-out;
    z-index: 1000;
    opacity: 0;
}

.focalLauncher.focal-config-ready {
    opacity: 1;
}

.focalLauncher:hover {
    transform: scale(1.1);
}

.focalLauncher:active {
    transform: scale(0.95);
}

@keyframes launcherIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal */
.focalModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    backdrop-filter: blur(2px);
}

.focalModal {
    background: white;
    padding: 24px;
    border-radius: 20px;
    max-width: 400px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: scaleInModal 0.2s ease-out;
}

@keyframes scaleInModal {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.focalModalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.focalModalTitle {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}

.focalModalClose {
    background: none;
    border: none;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
}

.focalModalContent {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
}

.focalModalAction {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.focalModalBtn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* CSAT Rating Component */
.focalCsatContainer {
    padding: 0 20px 16px;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.focalCsatCard {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.focalCsatHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.focalCsatTitle {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.focalCsatClose {
    background: none;
    border: none;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.focalCsatClose:hover {
    background: #f1f5f9;
    color: #64748b;
}

.focalCsatSubtitle {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 12px 0;
}

.focalCsatStars {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}

.focalCsatStar {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #cbd5e1;
}

.focalCsatStar:hover {
    transform: scale(1.15);
}

/* Hovered, previewed and selected stars are star-yellow. */
.focalCsatStar:hover,
.focalCsatStar.hover-preview,
.focalCsatStar.active {
    color: #fbbf24;
}

.focalCsatStar.active {
    animation: starPop 0.3s ease-out;
}

@keyframes starPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.focalCsatStar svg {
    display: block;
    fill: currentColor;
    stroke: currentColor;
}

.focalCsatFeedbackSection {
    animation: fadeIn 0.3s ease-out;
}

/* Opacity only: height cannot animate to auto, it jumps at the midpoint and resizes the chat area a second time. */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.focalCsatTextarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    font-family: inherit;
    font-size: 13px;
    color: #334155;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 12px;
}

.focalCsatTextarea:focus {
    border-color: #94a3b8;
}

.focalCsatTextarea::placeholder {
    color: #94a3b8;
}

.focalCsatSubmitBtn {
    width: 100%;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.focalCsatSubmitBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.focalCsatSubmitBtn:active {
    transform: translateY(0);
}

.focalCsatSubmitBtn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.focalCsatError {
    margin: 8px 0 0;
    font-size: 12px;
    color: #dc2626;
    text-align: center;
}

.focalCsatThankYou {
    text-align: center;
    padding: 20px 0;
    animation: fadeIn 0.4s ease-out;
}

.focalCsatThankYou svg {
    margin: 0 auto 12px;
    display: block;
}

.focalCsatThankYouText {
    font-size: 15px;
    font-weight: 600;
    color: #10b981;
    margin: 0;
}

/* Contact details form (live-agent handoff / lost connection). Shares the
   CSAT card's look; see script.js showContactCapture. */
.focalContactFields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.focalContactInput {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    color: #334155;
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s;
}

.focalContactInput:focus {
    border-color: #94a3b8;
}

.focalContactInput::placeholder {
    color: #94a3b8;
}

.focalContactInput[aria-invalid="true"] {
    border-color: #dc2626;
}

.focalContactError {
    margin: 8px 0 0;
}

.focalContactActions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.focalContactActions .focalCsatSubmitBtn {
    flex: 1;
    width: auto;
}

.focalContactSkipBtn {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 12px 18px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.focalContactSkipBtn:hover {
    background: #f1f5f9;
    color: #334155;
}

/* Dropdown Menu */
.focalDropdownMenu {
    position: absolute;
    top: 36px;
    right: 0;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* Shared by the 3-dot menu and the language dropdown (#focalLanguageDropdown)
       — wide enough for "Bahasa Melayu" + its checkmark (T8824: was 180px
       before the language switcher). */
    min-width: 220px;
    z-index: 1000;
    overflow: hidden;
    animation: focalDropdownFadeIn 0.15s ease-out;
}

@keyframes focalDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.focalDropdownItem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    color: #333;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.focalDropdownItem:hover {
    background: #f3f4f6;
}

.focalDropdownItem:active {
    background: #e5e7eb;
}

.focalDropdownItem:disabled {
    opacity: 0.5;
    background: none;
    cursor: default;
}

.focalDropdownItem svg {
    flex-shrink: 0;
    color: #666;
}

.focalDropdownItem+.focalDropdownItem {
    border-top: 1px solid #f0f0f0;
}

/* Language switcher (T8824, 2026-09-19): its own header control — a pill
   showing the current language, not a row buried inside the 3-dot menu —
   plus the flyout list it opens (#focalLanguageDropdown, sharing
   .focalDropdownMenu's panel chrome). */
.focalLanguagePill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: white;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background 0.2s;
}

.focalLanguagePill:hover {
    background: rgba(255, 255, 255, 0.28);
}

.focalDropdownSectionLabel {
    padding: 10px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.focalDropdownLangOption .focalDropdownCheck {
    opacity: 0;
    flex-shrink: 0;
    color: var(--primary-color, #e53935);
}

.focalDropdownLangOption.active {
    color: var(--primary-color, #e53935);
    font-weight: 700;
}

.focalDropdownLangOption.active .focalDropdownCheck {
    opacity: 1;
}

/* Diagnostic mode only (?diagnostic=1 with the diagnostic setting on). */
.focalDiagnostics {
    margin-top: 6px;
    font-size: 12px;
    color: #555;
}

.focalDiagnostics pre {
    max-height: 240px;
    overflow: auto;
    margin: 4px 0 0;
    padding: 8px;
    background: #f4f4f5;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-all;
}