/* ==========================================================================
   DAR AL SHIFA - GENESYS WEBCHAT THEME & STYLING
   Brand Colors: Navy (#2E3192) & Gold (#FAB713)
   ========================================================================== */

/* 1. TEXT REPLACEMENTS */
/* Replace "Live Chat" / "Web Chat" with "Dar Al Shifa Chat" */
.cx-webchat .cx-titlebar .cx-title {
    font-size: 0 !important;
}

.cx-webchat .cx-titlebar .cx-title::after {
    content: "Dar Al Shifa Chat" !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Replace "Powered by GENESYS" with "Powered by Dar Al Shifa IT Team" */
.cx-webchat .cx-powered-by {
    font-size: 0 !important;
    text-align: center !important;
    padding: 8px 0 !important;
}

.cx-webchat .cx-powered-by::after {
    content: "Powered by Dar Al Shifa IT Team" !important;
    font-size: 11px !important;
    color: #64748b !important;
    display: inline-block !important;
    letter-spacing: 0.3px !important;
}

.cx-webchat .cx-powered-by * {
    display: none !important;
}

/* 2. DUAL SCROLLBAR FIX (Ensures only html scrolls, prevents body nested scrollbar) */
html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    overflow: visible !important;
    overflow-x: clip !important;
}

/* 3. Z-INDEX & HARDWARE-ACCELERATED STACKING FIX */
.cx-widget,
.cx-side-button-group,
.cx-sidebar,
.cx-webchat,
.cx-webchat-container,
div[data-gwc-widget="WebChat"] {
    z-index: 9999999 !important;
}

/* High specificity override so launcher sits above home 3D Swiper slider */
html body .cx-widget.cx-side-button-group,
html body div.cx-side-button-group {
    z-index: 2147483647 !important;
}

.cx-webchat,
.cx-webchat-container,
div[data-gwc-widget="WebChat"] {
    position: fixed !important;
    z-index: 9999999 !important;
    transform: translateZ(9999px) !important;
    -webkit-transform: translateZ(9999px) !important;
}

/* 4. WHITE CHAT BODY & FORM AREA */
html body .cx-widget.cx-webchat,
html body .cx-widget.cx-webchat .cx-body,
html body .cx-widget.cx-webchat .cx-window,
html body .cx-widget.cx-webchat .cx-frame,
html body .cx-widget.cx-webchat .cx-form,
html body .cx-widget.cx-webchat .cx-form-inputs,
html body .cx-widget.cx-webchat .cx-chat-wrapper,
html body .cx-widget.cx-webchat .cx-transcript,
html body .cx-widget.cx-webchat .cx-input-container,
html body .cx-widget.cx-webchat .cx-footer,
html body .cx-widget.cx-webchat .cx-form-wrapper,
html body .cx-widget.cx-webchat .cx-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

/* Pre-chat Form Labels */
html body .cx-widget.cx-webchat label,
html body .cx-widget.cx-webchat .cx-form-inputs label,
html body .cx-widget.cx-webchat .cx-form-inputs .cx-label {
    color: #1f2937 !important;
}

/* Pre-chat Form Inputs */
html body .cx-widget.cx-webchat input[type="text"],
html body .cx-widget.cx-webchat input[type="email"],
html body .cx-widget.cx-webchat input[type="tel"],
html body .cx-widget.cx-webchat textarea,
html body .cx-widget.cx-webchat select {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #cbd5e1 !important;
}

html body .cx-widget.cx-webchat input::placeholder,
html body .cx-widget.cx-webchat textarea::placeholder {
    color: #94a3b8 !important;
}

/* Cancel / Secondary Button */
html body .cx-widget.cx-webchat .cx-button-secondary,
html body .cx-widget.cx-webchat .cx-btn-default,
html body .cx-widget.cx-webchat .cx-button.cx-cancel,
html body .cx-widget.cx-webchat .cx-cancel {
    background: #eef0f6 !important;
    background-color: #eef0f6 !important;
    color: #2E3192 !important;
    border: 1px solid #2E3192 !important;
}

/* 5. BRAND COLORS (#2E3192 & #FAB713) */
/* Title Bar / Header */
html body .cx-widget.cx-webchat .cx-titlebar,
html body .cx-widget.cx-webchat .cx-window-titlebar,
html body .cx-widget.cx-webchat .cx-header {
    background: #2E3192 !important;
    background-color: #2E3192 !important;
    color: #ffffff !important;
}

/* Launcher (Side Button) */
html body .cx-side-button-group .cx-side-button,
html body .cx-side-button-group .cx-sidebar-button,
html body .cx-widget.cx-sidebar .cx-sidebar-button,
html body .cx-side-button-group .cx-sidebar {
    background: #2E3192 !important;
    background-color: #2E3192 !important;
    color: #ffffff !important;
}

/* Keep launcher visible with gold accent on dark/blue banners across ALL screen sizes */
/*html body .cx-widget.cx-side-button-group,
html body div.cx-side-button-group,
html body .cx-widget.cx-sidebar,
html body div.cx-sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
}*/
html body .cx-widget.cx-side-button-group,
html body div.cx-side-button-group {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
    /*html body .cx-side-button-group .cx-side-button,
html body .cx-side-button-group .cx-sidebar-button,
html body .cx-sidebar .cx-sidebar-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 2px solid #FAB713 !important;
    box-shadow: 0 0 12px rgba(250, 183, 19, 0.7) !important;
}*/
html body .cx-side-button-group .cx-side-button,
html body .cx-side-button-group .cx-sidebar-button {
    border: 2px solid #FAB713 !important;
    box-shadow: 0 0 12px rgba(250, 183, 19, 0.7) !important;
}

/* Primary Buttons (Start Chat) */
html body .cx-widget.cx-webchat .cx-button-primary,
html body .cx-widget.cx-webchat .cx-btn-primary {
    background: #2E3192 !important;
    background-color: #2E3192 !important;
    border-color: #2E3192 !important;
    color: #ffffff !important;
}

html body .cx-widget.cx-webchat .cx-button-primary:hover,
html body .cx-widget.cx-webchat .cx-btn-primary:hover {
    background-color: #22246b !important;
    border-color: #22246b !important;
}

/* User / Customer Outgoing Message Bubbles (Navy Blue #2E3192) */
html body .cx-widget.cx-webchat .cx-message.cx-you .cx-bubble,
html body .cx-widget.cx-webchat .cx-message-you .cx-bubble {
    background: #2E3192 !important;
    background-color: #2E3192 !important;
    border-radius: 8px !important;
}

html body .cx-widget.cx-webchat .cx-message.cx-you .cx-message-text,
html body .cx-widget.cx-webchat .cx-message.cx-you .cx-bubble * {
    color: #ffffff !important;
}

html body .cx-widget.cx-webchat .cx-message.cx-you .cx-bubble-arrow:before,
html body .cx-widget.cx-webchat .cx-message.cx-you .cx-bubble-arrow:after {
    border-left-color: #2E3192 !important;
    border-right-color: #2E3192 !important;
}

/* 6. CHAT TRANSCRIPT & MESSAGE TEXT COLORS */
/* General transcript text default */
html body .cx-widget.cx-webchat .cx-transcript,
html body .cx-widget.cx-webchat .cx-transcript *,
html body .cx-widget.cx-webchat .cx-message-text {
    color: #1e293b !important;
}

/* Agent Incoming Message Bubbles (Gold #FAB713) */
html body .cx-widget.cx-webchat .cx-message.cx-agent .cx-bubble,
html body .cx-widget.cx-webchat .cx-message.cx-them .cx-bubble,
html body .cx-widget.cx-webchat .cx-message-them .cx-bubble {
    background-color: #FAB713 !important;
    background: #FAB713 !important;
    border: 1px solid #e0a30b !important;
    border-radius: 8px !important;
}

html body .cx-widget.cx-webchat .cx-message.cx-agent .cx-message-text,
html body .cx-widget.cx-webchat .cx-message.cx-them .cx-message-text,
html body .cx-widget.cx-webchat .cx-message-them .cx-message-text,
html body .cx-widget.cx-webchat .cx-message.cx-agent .cx-bubble *,
html body .cx-widget.cx-webchat .cx-message.cx-them .cx-bubble * {
    color: #1e2454 !important;
}

html body .cx-widget.cx-webchat .cx-message.cx-agent .cx-bubble-arrow:before,
html body .cx-widget.cx-webchat .cx-message.cx-agent .cx-bubble-arrow:after,
html body .cx-widget.cx-webchat .cx-message.cx-them .cx-bubble-arrow:before,
html body .cx-widget.cx-webchat .cx-message.cx-them .cx-bubble-arrow:after {
    border-left-color: #FAB713 !important;
    border-right-color: #FAB713 !important;
}

/* Agent / Participant Name */
html body .cx-widget.cx-webchat .cx-name,
html body .cx-widget.cx-webchat .cx-author,
html body .cx-widget.cx-webchat .cx-sender,
html body .cx-widget.cx-webchat .cx-agent-name,
html body .cx-widget.cx-webchat .cx-participant,
html body .cx-widget.cx-webchat .cx-message .cx-name,
html body .cx-widget.cx-webchat .cx-bubble .cx-name {
    color: #1e2454 !important;
    font-weight: 600 !important;
}

/* Agent Typing Indicator Bubble */
html body .cx-widget.cx-webchat .cx-typing,
html body .cx-widget.cx-webchat .cx-typing *,
html body .cx-widget.cx-webchat .cx-typing-indicator,
html body .cx-widget.cx-webchat .cx-typing-indicator *,
html body .cx-widget.cx-webchat .cx-message-typing,
html body .cx-widget.cx-webchat .cx-message-typing *,
html body .cx-widget.cx-webchat .cx-is-typing,
html body .cx-widget.cx-webchat .cx-is-typing * {
    color: #1e2454 !important;
}

html body .cx-widget.cx-webchat .cx-typing .cx-bubble,
html body .cx-widget.cx-webchat .cx-typing-indicator .cx-bubble,
html body .cx-widget.cx-webchat .cx-message-typing .cx-bubble {
    background-color: #FAB713 !important;
    background: #FAB713 !important;
    border: 1px solid #e0a30b !important;
    border-radius: 8px !important;
    color: #1e2454 !important;
}

/* Typing Animated Dots */
html body .cx-widget.cx-webchat .cx-dots .cx-dot,
html body .cx-widget.cx-webchat .cx-typing-dots span,
html body .cx-widget.cx-webchat .cx-typing .cx-dot {
    background-color: #2E3192 !important;
    color: #2E3192 !important;
}

/* System Notifications (Chat Started, Chat Ended, Status) */
html body .cx-widget.cx-webchat .cx-system,
html body .cx-widget.cx-webchat .cx-system .cx-message-text,
html body .cx-widget.cx-webchat .cx-system-message,
html body .cx-widget.cx-webchat .cx-notification,
html body .cx-widget.cx-webchat .cx-status {
    color: #64748b !important;
}

/* Timestamps */
html body .cx-widget.cx-webchat .cx-time,
html body .cx-widget.cx-webchat .cx-message .cx-time {
    color: #94a3b8 !important;
    font-size: 11px !important;
}

/* 7. BOTTOM CHAT INPUT AREA */
html body .cx-widget.cx-webchat .cx-input-container {
    position: relative !important;
    padding: 8px 12px 10px 12px !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}

html body .cx-widget.cx-webchat .cx-input-container textarea,
html body .cx-widget.cx-webchat textarea.cx-input,
html body .cx-widget.cx-webchat .cx-textarea {
    background-color: #ffffff !important;
    color: #1e293b !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 12px 42px 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    box-sizing: border-box !important;
    resize: none !important;
}

/* Clean Send Button (Paper Plane Icon) */
html body .cx-widget.cx-webchat .cx-input-container .cx-send,
html body .cx-widget.cx-webchat .cx-send {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #2E3192 !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

html body .cx-widget.cx-webchat .cx-input-container .cx-send:hover,
html body .cx-widget.cx-webchat .cx-send:hover {
    color: #FAB713 !important;
    transform: translateY(-50%) scale(1.1) !important;
    background: transparent !important;
}

html body .cx-widget.cx-webchat .cx-send svg,
html body .cx-widget.cx-webchat .cx-send .cx-icon svg,
html body .cx-widget.cx-webchat .cx-send path {
    fill: #2E3192 !important;
}

/* Bottom Input Toolbar Icons (Emoji Smiley, Actions, Options) */
html body .cx-widget.cx-webchat .cx-input-container .cx-icon,
html body .cx-widget.cx-webchat .cx-input-container .cx-emoji,
html body .cx-widget.cx-webchat .cx-input-container .cx-icon-emoji,
html body .cx-widget.cx-webchat .cx-input-container [data-icon="emoji"],
html body .cx-widget.cx-webchat .cx-input-container .cx-button-emoji,
html body .cx-widget.cx-webchat .cx-input-container .cx-menu-button,
html body .cx-widget.cx-webchat .cx-input-container .cx-options,
html body .cx-widget.cx-webchat .cx-input-container .cx-actions,
html body .cx-widget.cx-webchat .cx-input-container button {
    color: #2E3192 !important;
    fill: #2E3192 !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
}

html body .cx-widget.cx-webchat .cx-input-container .cx-icon svg,
html body .cx-widget.cx-webchat .cx-input-container .cx-icon path,
html body .cx-widget.cx-webchat .cx-input-container svg path,
html body .cx-widget.cx-webchat .cx-input-container svg circle {
    fill: #2E3192 !important;
    stroke: #2E3192 !important;
}

html body .cx-widget.cx-webchat .cx-input-container .cx-icon:hover,
html body .cx-widget.cx-webchat .cx-input-container .cx-emoji:hover,
html body .cx-widget.cx-webchat .cx-input-container button:hover {
    color: #FAB713 !important;
    fill: #FAB713 !important;
}

html body .cx-widget.cx-webchat .cx-input-container .cx-icon:hover svg path,
html body .cx-widget.cx-webchat .cx-input-container .cx-icon:hover path {
    fill: #FAB713 !important;
    stroke: #FAB713 !important;
}

/* Character Counter */
html body .cx-widget.cx-webchat .cx-input-container .cx-char-count,
html body .cx-widget.cx-webchat .cx-input-container .cx-character-counter {
    color: #64748b !important;
    font-size: 11px !important;
}

/* Input Focus / Links / Accent */
html body .cx-widget.cx-webchat input:focus,
html body .cx-widget.cx-webchat textarea:focus {
    border-color: #2E3192 !important;
    box-shadow: 0 0 0 2px rgba(46, 49, 146, 0.2) !important;
}

html body .cx-widget.cx-webchat a {
    color: #2E3192 !important;
}

/* 8. HIDE GENESYS FOOTER LOGO & BRANDING */
html body .cx-widget.cx-webchat .cx-footer,
html body .cx-widget.cx-webchat .cx-footer *,
html body .cx-widget.cx-webchat .cx-branding,
html body .cx-widget.cx-webchat .cx-branding *,
html body .cx-widget.cx-webchat [aria-label="Genesys"],
html body .cx-widget.cx-webchat [aria-label="Powered by Genesys"],
html body .cx-widget.cx-webchat .cx-icon[aria-label="Genesys"],
html body .cx-widget.cx-webchat .cx-powered-by,
[data-icon="branding"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}