/* CoreTech Livechat Launcher — frontend styles */

/* Hide the chat-hub bubble that lives in the light DOM (separate from the
   Odoo livechat embed which lives inside a shadow root and is hidden via
   JS-injected styles inside that shadow root). */
html.ct-launcher-active .o-mail-ChatHub-bubble {
    display: none !important;
}

.ct-launcher {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2147483000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: #0f1b2d;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* No gap — children control their own margin-bottom so the hover region
       is one contiguous rectangle and moving the cursor between bubble and
       options does NOT trigger mouseleave on the root. */
    gap: 0;
    /* Padding extends the hover hit-zone slightly beyond the visible boxes. */
    padding: 8px 4px 0 8px;
    /* FIX (5.0.6.2.63): the root box spans the bubble + (invisible) fan +
       greeting area even when everything is closed. With default
       pointer-events it swallowed every tap in that rectangle — page
       content behind it (e.g. the mobile menu's bottom items) could not
       be clicked. Make the ROOT click-transparent and re-enable hits
       only on the real interactive children below. The desktop hover
       flow is unaffected: enter/leave still fire over the children and
       gap-crossings are covered by the HOVER_CLOSE_DELAY grace timer. */
    pointer-events: none;
}
/* Interactive children opt back in. The fan and greeting already manage
   their own pointer-events (none when hidden / auto when shown). */
.ct-launcher-bubble { pointer-events: auto; }
.ct-launcher--composer-open .ct-launcher-fan { pointer-events: auto; }

.ct-launcher-greeting { margin-bottom: 12px; }
.ct-launcher-fan      { margin-bottom: 10px; }

/* ------------- Bubble (launcher button) ------------- */
.ct-launcher-bubble {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(15, 27, 45, 0.18),
                0 4px 10px rgba(15, 27, 45, 0.08),
                inset 0 0 0 1px rgba(15, 27, 45, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.ct-launcher-bubble:hover,
.ct-launcher-bubble:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15, 27, 45, 0.24),
                0 6px 14px rgba(15, 27, 45, 0.1),
                inset 0 0 0 1px rgba(15, 27, 45, 0.08);
    outline: none;
}
.ct-launcher-bubble-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.ct-launcher-bubble-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 145, 234, 0.45);
    animation: ctLauncherPulse 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes ctLauncherPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 145, 234, 0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(0, 145, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 145, 234, 0); }
}
.ct-launcher--open .ct-launcher-bubble-pulse { animation: none; opacity: 0; }

/* ------------- Greeting bubble ------------- */
.ct-launcher-greeting {
    /* Anchored to the launcher root so the message floats directly above
       the bubble icon regardless of whether the fan options are
       expanded. Keeps the position rock-steady and avoids the layout
       shift that previously made the entrance feel stuttery. */
    position: absolute;
    right: 4px;
    bottom: 60px; /* sits just above the 62px bubble (slight tuck) */
    z-index: 2;
    max-width: 290px;
    background: #ffffff;
    color: #0f1b2d;
    border-radius: 14px 14px 4px 14px;
    padding: 14px 36px 14px 16px;
    box-shadow: 0 4px 12px rgba(15, 27, 45, 0.08),
                0 1px 3px rgba(15, 27, 45, 0.05);
    border: 1px solid rgba(15, 27, 45, 0.06);
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    backface-visibility: hidden;
}
.ct-launcher-greeting--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}
/* When the fan is expanded (hover/open), lift the greeting above the
   options column so it doesn't overlap the "Website Live Chat" /
   "WhatsApp Live Chat" pills. The lift is purely a transform so it
   animates smoothly alongside the entrance scale/fade. */
.ct-launcher--open .ct-launcher-greeting--visible {
    transform: translate3d(0, -144px, 0) scale(1);
}
.ct-launcher-greeting-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
    color: #0f1b2d;
}
.ct-launcher-greeting-body {
    font-size: 13px;
    line-height: 1.45;
    color: #4a5868;
}
.ct-launcher-greeting-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: #8794a3;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.ct-launcher-greeting-close:hover {
    background: rgba(15, 27, 45, 0.06);
    color: #0f1b2d;
}

/* ------------- Fan-out options ------------- */
.ct-launcher-fan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}
.ct-launcher--open .ct-launcher-fan {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Keep the fan visible while a session (composer) is active. */
.ct-launcher--session .ct-launcher-fan {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ct-launcher-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(15, 27, 45, 0.06);
    background: #ffffff;
    color: #0f1b2d;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 27, 45, 0.12),
                0 2px 6px rgba(15, 27, 45, 0.06);
    transition: transform 160ms ease,
                box-shadow 160ms ease,
                border-color 160ms ease,
                background 160ms ease;
}
.ct-launcher-option:hover,
.ct-launcher-option:focus-visible {
    transform: translateY(-1px);
    background: #fbfdff;
    border-color: rgba(15, 27, 45, 0.1);
    box-shadow: 0 14px 30px rgba(15, 27, 45, 0.16),
                0 4px 10px rgba(15, 27, 45, 0.08);
    outline: none;
}
.ct-launcher-option-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f4f7fb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ct-launcher-option-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.ct-launcher-option--wa .ct-launcher-option-icon { background: #eaf7ef; }
.ct-launcher-option-text { display: flex; flex-direction: column; line-height: 1.25; }
.ct-launcher-option-title { font-weight: 600; font-size: 14px; color: #0f1b2d; }
.ct-launcher-option-sub   { font-size: 12px; color: #6b7886; margin-top: 2px; }

/* Slight stagger so the two options feel like they fan up. */
.ct-launcher--open .ct-launcher-fan > .ct-launcher-option {
    animation: ctLauncherFanIn 240ms ease both;
}
.ct-launcher--open .ct-launcher-fan > .ct-launcher-option:nth-child(2) { animation-delay: 60ms; }
@keyframes ctLauncherFanIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------- WhatsApp account sub-picker ------------- */
.ct-launcher-wa-picker {
    margin-top: 6px;
    background: #ffffff;
    border-radius: 14px;
    padding: 8px;
    border: 1px solid rgba(15, 27, 45, 0.06);
    box-shadow: 0 12px 28px rgba(15, 27, 45, 0.14);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 260px;
}
.ct-launcher-wa-picker-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7886;
    padding: 6px 10px 4px;
}
.ct-launcher-wa-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #0f1b2d;
}
.ct-launcher-wa-picker-item:hover { background: #eaf7ef; }
.ct-launcher-wa-picker-label { font-weight: 600; }
.ct-launcher-wa-picker-num   { color: #6b7886; font-size: 12px; }

/* ------------- Mobile tweaks ------------- */
@media (max-width: 480px) {
    .ct-launcher { right: 14px; bottom: 14px; }
    .ct-launcher-greeting { max-width: calc(100vw - 36px); }
    .ct-launcher-option,
    .ct-launcher-wa-picker { min-width: min(280px, calc(100vw - 36px)); }
}


/* ============================================================
   WhatsApp composer panel — chat-window style popup
   ============================================================ */
/* Hide the two pick options once a chat session is active. */
.ct-launcher.ct-launcher--session .ct-launcher-option,
.ct-launcher.ct-launcher--composer-open .ct-launcher-option {
    display: none !important;
}
/* Once a chat is picked, hide the launcher bubble itself so the chat window
   takes over. For website mode hide the whole launcher (native chat replaces it);
   for whatsapp mode keep the composer (lives inside .ct-launcher-fan) visible.
   For our custom CT_WebChat panel (data-mode="ctweb") also hide the bubble \u2014
   the minimized chat bar itself acts as the toggle. */
.ct-launcher.ct-launcher--session .ct-launcher-bubble,
.ct-launcher.ct-launcher--session .ct-launcher-greeting {
    display: none !important;
}
.ct-launcher.ct-launcher--session[data-mode="web"] {
    display: none !important;
}

.ct-launcher-wa-composer {
    margin-top: 6px;
    width: 320px;
    max-width: calc(100vw - 36px);
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(15, 27, 45, 0.06);
    box-shadow: 0 18px 42px rgba(15, 27, 45, 0.22),
                0 6px 14px rgba(15, 27, 45, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ctLauncherFanIn 220ms ease both;
}

.ct-wa-composer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    background: linear-gradient(135deg, #128c7e 0%, #25d366 100%);
    color: #ffffff;
}
.ct-wa-composer-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-wa-composer-avatar img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.ct-wa-composer-titleblock { flex: 1 1 auto; line-height: 1.2; min-width: 0; }
.ct-wa-composer-title    { font-weight: 700; font-size: 14px; }
.ct-wa-composer-subtitle { font-size: 11.5px; opacity: 0.85; margin-top: 2px; }
.ct-wa-header-phone { font-weight: 600; letter-spacing: 0.2px; }
.ct-wa-change-number {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0;
    margin: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.95;
}
.ct-wa-change-number:hover { opacity: 1; }
.ct-wa-change-number:focus { outline: 1px dotted rgba(255,255,255,0.7); outline-offset: 2px; }
.ct-wa-composer-close,
.ct-wa-composer-min {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.85;
    transition: background 150ms ease, opacity 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-wa-composer-min { font-size: 22px; }
.ct-wa-composer-close:hover,
.ct-wa-composer-min:hover {
    background: rgba(255, 255, 255, 0.18);
    opacity: 1;
}

/* Minimized composer collapses to just the header bar. */
.ct-launcher-wa-composer.ct-launcher-wa-composer--minimized .ct-wa-composer-body,
.ct-launcher-wa-composer.ct-launcher-wa-composer--minimized .ct-wa-composer-form,
.ct-launcher-wa-composer.ct-launcher-wa-composer--minimized .ct-wa-composer-footer {
    display: none !important;
}
.ct-launcher-wa-composer.ct-launcher-wa-composer--minimized .ct-wa-composer-header {
    cursor: pointer;
}

.ct-wa-composer-body {
    background: #e9f5ee;
    padding: 14px 12px;
    min-height: 70px;
}
.ct-wa-composer-bubble {
    background: #ffffff;
    color: #0f1b2d;
    border-radius: 4px 12px 12px 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    max-width: 88%;
    box-shadow: 0 1px 1px rgba(15, 27, 45, 0.05);
}

.ct-wa-composer-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px;
    background: #ffffff;
    border-top: 1px solid rgba(15, 27, 45, 0.06);
}
.ct-wa-composer-input {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid rgba(15, 27, 45, 0.12);
    border-radius: 18px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: #0f1b2d;
    background: #f4f7fb;
    outline: none;
    transition: border-color 150ms ease, background 150ms ease;
    max-height: 110px;
}
.ct-wa-composer-input:focus {
    background: #ffffff;
    border-color: #25d366;
}
.ct-wa-composer-send {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, transform 120ms ease;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.35);
}
.ct-wa-composer-send:hover    { background: #128c7e; }
.ct-wa-composer-send:active   { transform: scale(0.94); }
.ct-wa-composer-send svg      { display: block; }

.ct-wa-composer-footer {
    padding: 6px 12px 10px;
    font-size: 11px;
    color: #6b7886;
    text-align: center;
    background: #ffffff;
    letter-spacing: 0.02em;
}

/* =====================================================================
   Pre-chat form + bidirectional chat thread (in-website WhatsApp).
   ===================================================================== */

/* The stage swaps between the pre-chat form and the live thread. */
.ct-wa-composer-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- Pre-chat form ------------------------------------------------- */
.ct-wa-composer-form--prechat {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    background: #ffffff;
    border-top: 1px solid rgba(15, 27, 45, 0.06);
}
.ct-wa-prechat-name,
.ct-wa-prechat-phone {
    border: 1px solid rgba(15, 27, 45, 0.12);
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: #0f1b2d;
    background: #f4f7fb;
    outline: none;
    transition: border-color 150ms ease, background 150ms ease;
}
.ct-wa-prechat-name:focus,
.ct-wa-prechat-phone:focus,
.ct-wa-prechat-msg:focus {
    background: #ffffff;
    border-color: #25d366;
}
/* Phone box: country selector + national number side by side. */
/* Twemoji Country Flags polyfill — Windows desktop ships no flag glyphs in
   Segoe UI Emoji, so the regional-indicator pairs render as plain ISO
   letters ("BZ", "US"...). Loading just the flag block via @font-face
   restores the flags everywhere without affecting other emoji. */
@font-face {
    font-family: "Twemoji Country Flags";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2") format("woff2");
}
.ct-wa-prechat-cc-flag,
.ct-wa-prechat-cc-row-flag,
.ct-wa-header-flag {
    font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.ct-wa-prechat-phonebox {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.ct-wa-prechat-phonebox .ct-wa-prechat-phone {
    flex: 1 1 auto;
    min-width: 0;
}
.ct-wa-prechat-cc {
    position: relative;
    flex: 0 0 auto;
}
.ct-wa-prechat-cc-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(15, 27, 45, 0.12);
    border-radius: 10px;
    padding: 9px 10px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: #0f1b2d;
    background: #f4f7fb;
    cursor: pointer;
    user-select: none;
    height: 100%;
    box-sizing: border-box;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.ct-wa-prechat-cc-display:hover { background: #ffffff; }
.ct-wa-prechat-cc--open .ct-wa-prechat-cc-display,
.ct-wa-prechat-cc-display:focus-visible {
    background: #ffffff;
    border-color: #25d366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
    outline: none;
}
.ct-wa-prechat-cc-flag { font-size: 18px; line-height: 1; }
.ct-wa-prechat-cc-dial { font-weight: 600; font-variant-numeric: tabular-nums; }
.ct-wa-prechat-cc-caret {
    font-size: 10px;
    opacity: 0.6;
    margin-left: 2px;
    transition: transform 150ms ease;
}
.ct-wa-prechat-cc--open .ct-wa-prechat-cc-caret { transform: rotate(180deg); }

/* Custom dropdown panel ------------------------------------------------ */
.ct-wa-prechat-cc-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483000;
    width: 270px;
    max-width: calc(100vw - 16px);
    background: #ffffff;
    border: 1px solid rgba(15, 27, 45, 0.10);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 27, 45, 0.18), 0 2px 8px rgba(15, 27, 45, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ctWaCcFade 140ms ease-out;
}
.ct-wa-prechat-cc-menu[hidden] { display: none; }
@keyframes ctWaCcFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ct-wa-prechat-cc-search-wrap {
    padding: 8px;
    border-bottom: 1px solid rgba(15, 27, 45, 0.06);
    background: #f8fafc;
}
.ct-wa-prechat-cc-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(15, 27, 45, 0.12);
    border-radius: 8px;
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    color: #0f1b2d;
    background: #ffffff;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ct-wa-prechat-cc-search:focus {
    border-color: #25d366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}
.ct-wa-prechat-cc-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.ct-wa-prechat-cc-list::-webkit-scrollbar { width: 8px; }
.ct-wa-prechat-cc-list::-webkit-scrollbar-thumb {
    background: rgba(15, 27, 45, 0.18);
    border-radius: 8px;
}
.ct-wa-prechat-cc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #0f1b2d;
    cursor: pointer;
    transition: background 100ms ease;
}
.ct-wa-prechat-cc-row-flag { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.ct-wa-prechat-cc-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-wa-prechat-cc-row-dial { flex: 0 0 auto; color: #5a6a82; font-variant-numeric: tabular-nums; }
.ct-wa-prechat-cc-row--active,
.ct-wa-prechat-cc-row:hover {
    background: rgba(37, 211, 102, 0.10);
}
.ct-wa-prechat-cc-row--selected {
    background: rgba(37, 211, 102, 0.16);
    font-weight: 600;
}
.ct-wa-prechat-cc-row--selected .ct-wa-prechat-cc-row-dial { color: #0f1b2d; }
.ct-wa-prechat-msg {
    border: 1px solid rgba(15, 27, 45, 0.12);
    border-radius: 12px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: #0f1b2d;
    background: #f4f7fb;
    outline: none;
    resize: none;
    max-height: 120px;
}
.ct-wa-prechat-error {
    color: #c0392b;
    font-size: 12px;
    line-height: 1.3;
    padding: 2px 2px 0;
}
.ct-wa-prechat-submit {
    margin-top: 2px;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #25d366;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 150ms ease, transform 100ms ease;
}
.ct-wa-prechat-submit:hover    { background: #128c7e; }
.ct-wa-prechat-submit:active   { transform: scale(0.98); }
.ct-wa-prechat-submit:disabled { background: #a8d8b9; cursor: wait; }

/* ---- Live thread --------------------------------------------------- */
.ct-wa-thread {
    flex: 1 1 auto;
    min-height: 220px;
    max-height: 360px;
    overflow-y: auto;
    padding: 12px;
    background: #e9f5ee;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
}
.ct-wa-msg {
    display: flex;
    width: 100%;
}
.ct-wa-msg--in  { justify-content: flex-start; }
.ct-wa-msg--out { justify-content: flex-end; }
.ct-wa-msg-bubble {
    max-width: 78%;
    padding: 8px 11px;
    font-size: 13px;
    line-height: 1.4;
    color: #0f1b2d;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(15, 27, 45, 0.05);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.ct-wa-msg--in  .ct-wa-msg-bubble { background: #ffffff; border-radius: 4px 12px 12px 12px; }
.ct-wa-msg--out .ct-wa-msg-bubble { background: #d9fdd3; border-radius: 12px 4px 12px 12px; }

/* Attachments inside a message bubble. */
.ct-wa-msg-atts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.ct-wa-msg-text + .ct-wa-msg-atts { margin-top: 6px; }
.ct-wa-msg-bubble:has(> .ct-wa-msg-atts:only-child) { padding: 4px; }
.ct-wa-msg-att--image {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}
.ct-wa-msg-att--image img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
    border-radius: 8px;
    cursor: zoom-in;
}
.ct-wa-msg-att--audio,
.ct-wa-msg-att--video {
    display: block;
    width: 100%;
    max-width: 260px;
    border-radius: 8px;
}
.ct-wa-msg-att--audio { height: 36px; }
.ct-wa-msg-att--file,
.ct-wa-msg-att--pdf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(15, 27, 45, 0.10);
    border-radius: 10px;
    color: #0f1b2d;
    text-decoration: none;
    font-size: 12.5px;
    max-width: 280px;
    min-width: 220px;
    transition: background 120ms ease, border-color 120ms ease, transform 100ms ease;
}
.ct-wa-msg--out .ct-wa-msg-att--file,
.ct-wa-msg--out .ct-wa-msg-att--pdf {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(15, 27, 45, 0.08);
}
.ct-wa-msg-att--file:hover,
.ct-wa-msg-att--pdf:hover {
    background: #ffffff;
    border-color: rgba(15, 27, 45, 0.18);
    text-decoration: none;
    transform: translateY(-1px);
}
.ct-wa-att-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 27, 45, 0.04);
}
.ct-wa-att-thumb--pdf { background: rgba(227, 76, 58, 0.08); }
.ct-wa-att-thumb svg { display: block; }
.ct-wa-att-meta {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}
.ct-wa-att-name {
    font-weight: 600;
    color: #1f2a37;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-wa-att-sub {
    font-size: 11px;
    color: #5a6a82;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-wa-att-action {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a6a82;
    background: rgba(15, 27, 45, 0.05);
    transition: background 120ms ease, color 120ms ease;
}
.ct-wa-msg-att--file:hover .ct-wa-att-action,
.ct-wa-msg-att--pdf:hover .ct-wa-att-action {
    background: #25d366;
    color: #ffffff;
}
.ct-wa-msg-att-ic { font-size: 14px; line-height: 1; }
.ct-wa-msg-att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* When the thread is on screen, hide the static greeting bubble that the
   form-step composer used (we still keep the bubble class generic). */
.ct-launcher-wa-composer .ct-wa-thread + .ct-wa-composer-form {
    background: #ffffff;
    border-top: 1px solid rgba(15, 27, 45, 0.06);
}

/* Minimized state must also collapse the new stage container. */
.ct-launcher-wa-composer.ct-launcher-wa-composer--minimized .ct-wa-composer-stage {
    display: none !important;
}
/* ───── Typing indicator (agent is typing on the backend) ───── */
.ct-wa-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 8px;
    margin-left: 6px;
}
.ct-wa-typing[hidden] { display: none !important; }
.ct-wa-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8794a3;
    opacity: 0.45;
    animation: ctWaTypingBlink 1.2s infinite ease-in-out;
}
.ct-wa-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.ct-wa-typing-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes ctWaTypingBlink {
    0%, 80%, 100% { transform: scale(0.85); opacity: 0.35; }
    40%           { transform: scale(1.15); opacity: 1; }
}

/* ───── Message status (sent / delivered / seen) ───── */
.ct-wa-msg-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: -2px;
    line-height: 1;
}
.ct-wa-msg-meta--in { justify-content: flex-start; }
.ct-wa-msg-time {
    font-size: 10.5px;
    color: #6b7886;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    opacity: 0.85;
}
.ct-wa-msg--out .ct-wa-msg-time { color: #4d6855; }
.ct-wa-msg-status {
    display: inline-flex;
    align-items: center;
    color: #66808a;
}
.ct-wa-msg-status--pending { color: #9aa5ad; }
.ct-wa-msg-status--sent    { color: #66808a; }
.ct-wa-msg-status--seen    { color: #1e88e5; }
.ct-wa-msg-status svg { display: block; }

/* ───── Day separator pill (Today / Yesterday / date) ───── */
.ct-wa-day {
    display: flex;
    justify-content: center;
    margin: 8px 0 4px;
}
.ct-wa-day > span {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #4d6855;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06);
    backdrop-filter: blur(4px);
}

/* ───── Avatar to the left of incoming bubbles ───── */
.ct-wa-msg { align-items: flex-end; gap: 6px; }
.ct-wa-msg-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: #25d366;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(15, 27, 45, 0.10);
    align-self: flex-end;
    margin-bottom: 2px;
}
.ct-wa-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ct-wa-msg-avatar--initial { background: #0aa66d; }

/* ───── Composer action buttons (emoji + attach) ───── */
.ct-wa-composer-form--thread {
    position: relative;
    align-items: center;
    padding: 8px 10px 10px;
    gap: 6px;
}
.ct-wa-cm-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}
.ct-wa-cm-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5a6a82;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease, transform 100ms ease;
    padding: 0;
}
.ct-wa-cm-btn:hover { background: rgba(37, 211, 102, 0.10); color: #128c7e; }
.ct-wa-cm-btn:active { transform: scale(0.92); }
.ct-wa-cm-btn:disabled { opacity: 0.4; cursor: wait; }
.ct-wa-cm-btn svg { display: block; }

/* Emoji picker popover (anchored above the composer). */
.ct-wa-cm-emoji-pop {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 8px;
    z-index: 2147483050;
    width: 260px;
    max-width: calc(100% - 16px);
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(15, 27, 45, 0.10);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 27, 45, 0.18), 0 2px 6px rgba(15, 27, 45, 0.08);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    animation: ctWaCcFade 140ms ease-out;
}
.ct-wa-cm-emoji-pop[hidden] { display: none; }
.ct-wa-cm-emoji-cell {
    border: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    padding: 4px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 100ms ease;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.ct-wa-cm-emoji-cell:hover { background: rgba(37, 211, 102, 0.12); }

/* Slightly polished send button (more depth + subtle gradient). */
.ct-wa-composer-send {
    background: linear-gradient(180deg, #2ee07a 0%, #1ebd5d 100%);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.40),
                inset 0 -1px 0 rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.ct-wa-composer-send:hover {
    background: linear-gradient(180deg, #2bd673 0%, #15a64f 100%);
}

/* ───── Header overflow menu (anchored to the avatar) ───── */
.ct-wa-composer-header { position: relative; }
button.ct-wa-composer-avatar {
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    position: relative;
    transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}
button.ct-wa-composer-avatar:hover {
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
button.ct-wa-composer-avatar:active { transform: scale(0.96); }
.ct-wa-composer-menu-pop {
    position: absolute;
    top: calc(100% - 6px);
    left: 10px;
    right: auto;
    z-index: 2147483100;
    min-width: 220px;
    background: #fff;
    border: 1px solid rgba(15, 27, 45, 0.10);
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(15, 27, 45, 0.20), 0 2px 6px rgba(15, 27, 45, 0.08);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: ctWaCcFade 140ms ease-out;
}
.ct-wa-composer-menu-pop[hidden] { display: none; }
.ct-wa-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: #1f2a37;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
}
.ct-wa-menu-item:hover { background: rgba(37, 211, 102, 0.10); color: #128c7e; }
.ct-wa-menu-ic { display: inline-flex; color: #5a6a82; }
.ct-wa-menu-item:hover .ct-wa-menu-ic { color: #128c7e; }
.ct-wa-menu-label { flex: 1; }

/* ───── In-thread search bar ───── */
.ct-wa-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #f4f7fb;
    border-bottom: 1px solid rgba(15, 27, 45, 0.08);
    flex: 0 0 auto;
}
.ct-wa-search[hidden] { display: none; }
.ct-wa-search-input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(15, 27, 45, 0.12);
    background: #fff;
    border-radius: 16px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
.ct-wa-search-input:focus { border-color: #25d366; box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.18); }
.ct-wa-search-count { font-size: 11px; color: #5a6a82; min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.ct-wa-search-prev,
.ct-wa-search-next,
.ct-wa-search-close {
    width: 26px; height: 26px;
    border: 0; background: transparent; cursor: pointer;
    color: #5a6a82; font-size: 14px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 100ms ease, color 100ms ease;
}
.ct-wa-search-prev:hover,
.ct-wa-search-next:hover,
.ct-wa-search-close:hover { background: rgba(15, 27, 45, 0.06); color: #128c7e; }

/* Search match highlight on matching rows */
.ct-wa-msg--match .ct-wa-msg-bubble {
    box-shadow: 0 0 0 2px rgba(255, 200, 60, 0.50);
}
.ct-wa-msg--match-current .ct-wa-msg-bubble {
    box-shadow: 0 0 0 2px rgba(255, 154, 0, 0.95);
    animation: ctWaMatchPulse 1.2s ease-out;
}
@keyframes ctWaMatchPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 154, 0, 0.55); }
    60%  { box-shadow: 0 0 0 8px rgba(255, 154, 0, 0); }
    100% { box-shadow: 0 0 0 2px rgba(255, 154, 0, 0.95); }
}

/* ───── Reply preview (above composer) ───── */
.ct-wa-reply-preview {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 10px 4px;
    padding: 6px 8px;
    background: rgba(37, 211, 102, 0.10);
    border-left: 3px solid #25d366;
    border-radius: 6px;
    font-size: 12px;
}
.ct-wa-reply-preview[hidden] { display: none; }
.ct-wa-reply-preview-body { flex: 1; min-width: 0; }
.ct-wa-reply-preview-author { font-weight: 600; color: #128c7e; line-height: 1.2; }
.ct-wa-reply-preview-text {
    color: #4d5b6b;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.6em;
}
.ct-wa-reply-cancel {
    border: 0; background: transparent; cursor: pointer;
    color: #5a6a82; font-size: 16px; line-height: 1;
    padding: 0 4px; align-self: flex-start;
}
.ct-wa-reply-cancel:hover { color: #d23f3f; }

/* ───── Reply hover action on each message ───── */
.ct-wa-msg { position: relative; }
.ct-wa-msg-action {
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #5a6a82;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 120ms ease, background 120ms ease, color 120ms ease, transform 100ms ease;
    box-shadow: 0 1px 3px rgba(15, 27, 45, 0.18);
    align-self: center;
    flex: 0 0 24px;
    margin: 0 2px;
}
.ct-wa-msg:hover .ct-wa-msg-action { opacity: 1; }
.ct-wa-msg-action:hover { background: #25d366; color: #fff; transform: scale(1.05); }
.ct-wa-msg--out .ct-wa-msg-action { order: -1; }   /* reply icon left of outgoing bubble */
.ct-wa-msg--in  .ct-wa-msg-action { order: 99; }   /* reply icon right of incoming bubble */

/* ───── Quoted reply pill inside a bubble ───── */
.ct-wa-msg-quote {
    margin: 0 0 4px;
    padding: 4px 8px;
    border-left: 3px solid #128c7e;
    background: rgba(15, 27, 45, 0.05);
    border-radius: 4px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #4d5b6b;
    max-width: 100%;
    overflow: hidden;
}
.ct-wa-msg--out .ct-wa-msg-quote { background: rgba(255, 255, 255, 0.35); border-left-color: #0a6b4f; }
.ct-wa-msg-quote-author { font-weight: 600; color: #128c7e; margin-bottom: 1px; }
.ct-wa-msg--out .ct-wa-msg-quote-author { color: #0a6b4f; }
.ct-wa-msg-quote-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.6em;
    white-space: pre-wrap;
}

/* Generic fade keyframe used by menu + emoji pop. */
@keyframes ctWaCcFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}



/* ----- Linkified URLs ----- */
.ct-wa-msg-text a.ct-wa-link {
    color: #1d75f0;
    text-decoration: underline;
    text-decoration-color: rgba(29, 117, 240, 0.45);
    word-break: break-word;
}
.ct-wa-msg-text a.ct-wa-link:hover { color: #155bb8; text-decoration-color: currentColor; }
.ct-wa-msg--out .ct-wa-msg-text a.ct-wa-link { color: #0b66c9; }

/* ----- WhatsApp-style link preview card ----- */
.ct-wa-link-preview {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 6px 0 4px 0;
    padding: 6px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(15, 27, 45, 0.10);
    border-left: 3px solid #1d75f0;
    border-radius: 8px;
    max-width: 280px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 120ms ease;
}
.ct-wa-link-preview:hover { background: #fff; }
.ct-wa-msg--out .ct-wa-link-preview {
    background: rgba(255, 255, 255, 0.35);
    border-left-color: #0b66c9;
}
.ct-wa-link-preview-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(15, 27, 45, 0.06);
}
.ct-wa-link-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ct-wa-link-preview-body {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ct-wa-link-preview-title {
    font-weight: 600;
    font-size: 12.5px;
    color: #1f2a37;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-wa-link-preview-desc {
    font-size: 11.5px;
    color: #4d5b6b;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.6em;
}
.ct-wa-link-preview-site {
    font-size: 10.5px;
    color: #5a6a82;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- Media placeholder card (when bridge stored only emoji text) ----- */
.ct-wa-media-placeholder {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px dashed rgba(15, 27, 45, 0.18);
    border-radius: 10px;
    max-width: 280px;
    min-width: 200px;
}
.ct-wa-msg--out .ct-wa-media-placeholder { background: rgba(255, 255, 255, 0.35); }
.ct-wa-media-placeholder-ic {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(18, 140, 126, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ct-wa-media-placeholder-body { flex: 1 1 auto; min-width: 0; }
.ct-wa-media-placeholder-title {
    font-weight: 600;
    font-size: 13px;
    color: #1f2a37;
}
.ct-wa-media-placeholder-sub {
    font-size: 11.5px;
    color: #5a6a82;
    margin-top: 1px;
}