/*! Christine Valmy Floating Chat Widget Styles
 * All classes use -CK suffix to avoid conflicts
 */

 .awardText p {
    position: relative;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    max-width: 100%;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding:10px;
  }
  @media (max-width: 992px) {
    .awardText {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
  }

/* =============================================================================
   CSS VARIABLES
   ============================================================================= */
:root {
    --cv-primary-CK: #006747;
    --primary-color: #006747;
    --primary-gradient-start: #006747;
    --primary-gradient-end: #004E42;
    --cv-primary-dark-CK: #004d35;
    --cv-primary-light-CK: #e8f5e9;
    --cv-secondary-CK: #BFCEC2;
    --cv-white-CK: #ffffff;
    --cv-gray-100-CK: #f5f5f5;
    --cv-gray-200-CK: #eeeeee;
    --cv-gray-300-CK: #e0e0e0;
    --cv-gray-500-CK: #9e9e9e;
    --cv-gray-700-CK: #616161;
    --cv-gray-900-CK: #212121;
    --cv-shadow-CK: 0 4px 20px rgba(0, 0, 0, 0.15);
    --cv-shadow-light-CK: 0 2px 8px rgba(0, 0, 0, 0.1);
    --cv-radius-CK: 16px;
    --cv-radius-sm-CK: 8px;
    --cv-font-CK: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cv-transition-CK: all 0.3s ease;
}

/* =============================================================================
   SCREEN READER ONLY (Accessibility)
   ============================================================================= */
.sr-only-CK {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   FLOATING WIDGET CONTAINER
   ============================================================================= */
.floating-widget-container-CK {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    font-family: var(--cv-font-CK);
}

/* =============================================================================
   FLOATING BUTTON (Collapsed State)
   ============================================================================= */
.floating-button-CK {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffc107;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cv-shadow-CK);
    transition: var(--cv-transition-CK);
    position: relative;
}

.floating-button-CK:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 103, 71, 0.4);
}

.floating-button-CK:focus {
    outline: 3px solid var(--cv-primary-light-CK);
    outline-offset: 3px;
}

.floating-button-CK:active {
    transform: scale(0.95);
}

.chat-icon-CK {
    width: 28px;
    height: 28px;
    color: #161a19;
}

.unread-badge-CK {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e53935;
    color: var(--cv-white-CK);
    font-size: 12px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* =============================================================================
   FLOATING BUTTON WRAPPER (Button + Speech Bubble)
   ============================================================================= */
.floating-button-wrapper-CK {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.floating-speech-bubble-CK {
    background: #ffffff;
    color: #333;
    padding: 10px 14px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-family: var(--cv-font-CK);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 220px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    animation: bubblePopIn-CK 0.5s ease-out 1s both;
}

/* Speech bubble tail pointing down-right toward the button */
.floating-speech-bubble-CK::after {
    content: '';
    position: absolute;
    right: 20px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.06);
}

.bubble-text-CK {
    flex: 1;
}

.bubble-dismiss-CK {
    background: none;
    border: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 0 0 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

.bubble-dismiss-CK:hover {
    color: #666;
}

@keyframes bubblePopIn-CK {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =============================================================================
   FLOATING CHAT PANEL (Expanded State)
   ============================================================================= */
.floating-chat-panel-CK {
    width: 500px;
    height: 750px;
    background: linear-gradient(
        349deg, #0067469e 50%, #004d35 100%);
    border-radius: var(--cv-radius-CK);
    box-shadow: var(--cv-shadow-CK);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(10px);
    animation: slideUp-CK 0.3s ease-out;
    position: relative;
}

@keyframes slideUp-CK {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =============================================================================
   CHAT HEADER
   ============================================================================= */
.chat-header-CK {
    background: transparent; /* Inherits green gradient */
    color: white;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
}

.chat-header-left-CK {
    flex: 1;
}

.chat-header-title-CK {
    font-family: var(--cv-font-CK);
    font-size: 22px;
    text-align: left;
    font-weight: 300;
    letter-spacing: 0.25px;
    margin: 0 0 8px 0;
    color: white;
    line-height: 1.2;
    padding:10px;
}

.chat-header-subtitle-CK {
    font-size: 14px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

/* Match site's .p styling if available */
.chat-header-subtitle-CK.p {
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.chat-header-right-CK {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.chat-header-top-actions-CK {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header-actions-CK {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Request Info button in header (yellow/gold) */
.request-info-header-button-CK {
    background: #F4B942;
    color: #004d35;
    border: none;
    padding: 10px 20px;
    border-radius: 24px;
    font-family: var(--cv-font-CK);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.request-info-header-button-CK:hover {
    background: #e0a830;
    transform: translateY(-1px);
}

.request-info-header-button-CK:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Language Dropdown */
.language-dropdown-CK {
    position: relative;
}

.language-trigger-CK {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cv-font-CK);
    font-size: 14px;
    transition: all 0.2s;
}

.language-trigger-CK:hover {
    background: rgba(255, 255, 255, 0.3);
}

.language-trigger-CK:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

.flag-icon-CK {
    font-size: 18px;
    line-height: 1;
}

.lang-code-CK {
    font-weight: 600;
    text-transform: uppercase;
}

.dropdown-arrow-CK {
    font-size: 10px;
    margin-left: 2px;
}

/* Dropdown menu */
.language-menu-CK {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    overflow: hidden;
    z-index: 10000;
}

.language-option-CK {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: white;
    color: #333;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cv-font-CK);
    font-size: 14px;
    transition: background 0.2s;
}

.language-option-CK:hover {
    background: #f5f5f5;
}

.language-option-CK.active-CK {
    background: #e8f5e9;
    color: var(--cv-primary-CK);
    font-weight: 600;
}

/* Close button (X) in header */
.header-close-button-CK {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    transition: all 0.2s;
}

.header-close-button-CK:hover {
    background: rgba(255, 255, 255, 0.3);
}

.header-close-button-CK:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* =============================================================================
   CHAT MESSAGES AREA
   ============================================================================= */
.chat-messages-CK {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 180px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Message wrapper with avatar */
.message-wrapper-CK {
    display: flex;
    align-items:flex-end;
    gap: 12px;
    max-width: 90%;
}

.user-wrapper-CK {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-wrapper-CK {
    align-self: flex-start;
    flex-direction: row;
}

/* CV Logo/Avatar */
.ai-avatar-CK {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid #e0e0e0;
}

.chat-messages-CK::-webkit-scrollbar {
    width: 6px;
}

.chat-messages-CK::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages-CK::-webkit-scrollbar-thumb {
    background: var(--cv-gray-300-CK);
    border-radius: 3px;
}

.chat-messages-CK::-webkit-scrollbar-thumb:hover {
    background: var(--cv-gray-500-CK);
}

/* =============================================================================
   MESSAGE BUBBLES
   ============================================================================= */
.message-bubble-CK {
    padding: 8px;
    border-radius: 12px;
    font-size: 14px; /* Reduce to 14px as requested */
    line-height: 1.5;
    animation: fadeIn-CK 0.3s ease;
}

@keyframes fadeIn-CK {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-message-CK {
    background: var(--primary-gradient-end);
    color: white;
    border: 1px solid linear-gradient(135deg, #4d9273 0%, var(--primary-gradient-end) 100%);;
    border-bottom-right-radius: 4px;
}

.ai-message-CK {
    background: #f0f0f0;
    color: #333;
    border-bottom-left-radius: 4px;
}

.message-content-CK {
    word-wrap: break-word;
}

.message-content-CK p {
    margin: 0 0 8px 0;
}

.message-content-CK p:last-child {
    margin-bottom: 0;
}
.text-center ul,
.text-center ol {
    text-align: left;
}


.message-content-CK ul,
.message-content-CK ol {
    margin: 8px 0;
    padding-left: 20px;
}

.message-content-CK li {
    margin-bottom: 4px;
}

.message-content-CK strong {
    font-weight: 600;
}

.message-content-CK a {
    color: var(--cv-primary-CK);
    text-decoration: underline;
}

.user-message-CK .message-content-CK a {
    color: var(--cv-white-CK);
}

/* =============================================================================
   MESSAGE FORMATTING STYLES (Enhanced with business-specific styling)
   ============================================================================= */

/* Message Structure Classes */
.message-heading-CK {
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
    line-height: 1.3;
}

.message-heading-CK.h1-CK {
    font-size: 1.5rem;
}

.message-heading-CK.h2-CK {
    font-size: 1.3rem;
}

.message-heading-CK.h3-CK {
    font-size: 1.1rem;
}

.message-paragraph-CK {
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.message-paragraph-CK:last-child {
    margin-bottom: 0;
}

.message-list-CK {
    font-size: 14px;
    line-height: 1.6;
    margin: 1rem 0;
    padding-left: 1.5rem;
    color: inherit;
    text-align: left;
}

.message-list-item-CK {
    font-size: 14px;
    line-height: 1.6;
    margin: 0.5rem 0;
    color: inherit;
}

/* Business-Specific Formatting Classes */
.course-title-CK {
    color: var(--cv-primary-CK);
    font-weight: 600;
}

.date-info-CK {
    color: var(--cv-primary-CK);
    font-weight: 600;
}

.pricing-info-CK {
    color: var(--cv-primary-CK);
    font-weight: 600;
}

.location-highlight-CK {
    color: var(--cv-primary-CK);
    font-weight: 600;
}

.duration-range-CK,
.duration-info-CK {
    color: var(--cv-primary-CK);
    font-weight: 600;
}

.curly-brace-content-CK,
.bracketed-content-CK {
    color: var(--cv-primary-CK);
    font-weight: 600;
}

.important-term-CK {
    color: var(--cv-primary-CK);
    font-weight: 600;
}

/* Schedule Styling Classes */
.schedule-days-CK,
.schedule-time-CK,
.schedule-duration-CK,
.schedule-period-CK {
    color: var(--cv-primary-CK);
    font-weight: 800;
    font-size: 1em;
}

/* Nested List Items */
.nested-list-item-CK {
    margin: 0.25rem 0;
    padding-left: 0.5rem;
}

.nested-list-item-CK.level-1 {
    padding-left: 1rem;
}

.nested-list-item-CK.level-2 {
    padding-left: 1.5rem;
}

.nested-list-item-CK.level-3 {
    padding-left: 2rem;
}

/* User message overrides - ensure text is readable on green gradient */
.user-message-CK .course-title-CK,
.user-message-CK .date-info-CK,
.user-message-CK .pricing-info-CK,
.user-message-CK .location-highlight-CK,
.user-message-CK .duration-range-CK,
.user-message-CK .duration-info-CK,
.user-message-CK .curly-brace-content-CK,
.user-message-CK .bracketed-content-CK,
.user-message-CK .important-term-CK,
.user-message-CK .schedule-days-CK,
.user-message-CK .schedule-time-CK,
.user-message-CK .schedule-duration-CK,
.user-message-CK .schedule-period-CK {
    color: var(--cv-white-CK);
    font-weight: 700;
}

/* =============================================================================
   TYPING INDICATOR
   ============================================================================= */
.typing-indicator-CK {
    display: flex;
    width: 20%;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: #f0f0f0;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}

.typing-dot-CK {
    width: 8px;
    height: 8px;
    background: var(--cv-primary-CK);
    border-radius: 50%;
    animation: typingBounce-CK 1.4s infinite ease-in-out;
}

.typing-dot-CK:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot-CK:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot-CK:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce-CK {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* =============================================================================
   CHAT BOTTOM BAR (Input + Footer combined)
   ============================================================================= */
.chat-bottom-bar-CK {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-color: #ffffffab;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
}

/* =============================================================================
   CHAT INPUT AREA
   ============================================================================= */
.chat-input-container-CK {
    padding: 12px 16px;
    align-items: flex-end;
    gap: 8px;
    display: flex;
    background: transparent;
}

.chat-input-CK {
    flex: 1;
    border: 1px solid var(--cv-gray-300-CK);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--cv-font-CK);
    resize: none;
    max-height: 120px;
    line-height: 1.4;
    transition: var(--cv-transition-CK);
}

.chat-input-CK:focus {
    outline: none;
    border-color: var(--cv-primary-CK);
    box-shadow: 0 0 0 3px var(--cv-primary-light-CK);
}

.chat-input-CK::placeholder {
    color: var(--cv-gray-500-CK);
}

.chat-input-CK:disabled {
    background: var(--cv-gray-100-CK);
    cursor: not-allowed;
}

.send-button-CK {
    width: 40px;
    height: 40px;
    background: var(--cv-primary-CK);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--cv-transition-CK);
    flex-shrink: 0;
}

.send-button-CK:hover:not(:disabled) {
    background: var(--cv-primary-dark-CK);
    transform: scale(1.05);
}

.send-button-CK:focus {
    outline: 3px solid var(--cv-primary-light-CK);
    outline-offset: 2px;
}

.send-button-CK:disabled {
    background: var(--cv-gray-300-CK);
    cursor: not-allowed;
}

.send-button-CK svg {
    width: 18px;
    height: 18px;
    color: var(--cv-white-CK);
}

/* =============================================================================
   AI DISCLAIMERS
   ============================================================================= */

/* "Please Note" under the welcome message */
.chat-welcome-note-CK {
    font-size: 12px;
    border-radius: 10px;
    color: #666;
    line-height: 1.4;
    margin: -8px 0 0 52px;
    padding: 0 8px;
    background: #f0f0f0;
}

/* Disclaimer below the input box */
.chat-input-disclaimer-CK {
    text-align: center;
    font-size: 11px;
    color: #666;
    font-style: italic;
    padding: 0 16px;
    margin: 0;
    line-height: 1.3;
    display:flex;
    justify-content: center;
    align-items: center;
}

/* =============================================================================
   CHAT FOOTER
   ============================================================================= */
.chat-footer-CK {
    padding: 8px 20px 12px;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.footer-links-CK {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.footer-link-CK {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--cv-font-CK);
    padding: 0;
}

.footer-link-CK:hover {
    color: var(--cv-primary-CK);
    text-decoration: underline;
}

.footer-separator-CK {
    color: #ccc;
}

.footer-branding-CK {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

.branding-link-CK {
    color: var(--cv-primary-CK);
    text-decoration: none;
    font-weight: 600;
}

.branding-link-CK:hover {
    text-decoration: underline;
}

/* =============================================================================
   MOBILE RESPONSIVE
   ============================================================================= */
@media (max-width: 480px) {
    .floating-widget-container-CK {
        bottom: 10px;
        right: 10px;
    }

    .floating-button-CK {
        width: 56px;
        height: 56px;
    }

    .chat-icon-CK {
        width: 24px;
        height: 24px;
    }

    .floating-speech-bubble-CK {
        max-width: 180px;
        font-size: 13px;
        padding: 8px 12px;
    }

    .floating-chat-panel-CK {
        width: calc(100vw - 20px);
        height: calc(100vh - 80px);
        max-height: none;
        border-radius: var(--cv-radius-sm-CK);
    }

    .chat-header-CK {
        padding: 12px;
    }

    .header-avatar-CK {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .header-title-CK {
        font-size: 14px;
    }

    .header-subtitle-CK {
        font-size: 11px;
    }

    .chat-messages-CK {
        padding: 12px 12px 180px 12px;
    }

    .message-bubble-CK {
        max-width: 90%;
        font-size: 13px;
    }

    .chat-input-container-CK {
        padding: 10px 12px;
    }

    .chat-input-CK {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .chat-footer-CK {
        padding: 10px 12px;
    }

    .footer-btn-CK {
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* =============================================================================
   REDUCED MOTION (Accessibility)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .floating-button-CK,
    .floating-chat-panel-CK,
    .message-bubble-CK,
    .typing-dot-CK,
    .floating-speech-bubble-CK {
        animation: none;
        transition: none;
    }

    .floating-button-CK:hover {
        transform: none;
    }
}

/* =============================================================================
   HIGH CONTRAST MODE
   ============================================================================= */
@media (prefers-contrast: high) {
    .floating-button-CK {
        border: 2px solid var(--cv-white-CK);
    }

    .floating-chat-panel-CK {
        border: 2px solid var(--cv-gray-900-CK);
    }

    .message-bubble-CK {
        border: 1px solid var(--cv-gray-900-CK);
    }

    .chat-input-CK {
        border-width: 2px;
    }
}

/* =============================================================================
   TYPOGRAPHY OVERRIDES (Match Original)
   ============================================================================= */
.floating-chat-panel-CK * {
    font-family: var(--cv-font-CK);
}

.floating-chat-panel-CK p {
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    margin: 0;
}

/* If site has specific .p styling, apply it */
.floating-chat-panel-CK .p {
    font-size: 14px;
}

/* =============================================================================
   PRINT STYLES (Hide widget when printing)
   ============================================================================= */
@media print {
    .floating-widget-container-CK {
        display: none !important;
    }
}