/*
* =========================================
* CHATBOT BACKEND STATUS ICON STYLES
* =========================================
*/

/* Defines the pulsing animation */
@keyframes chat-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* This is the SINGLE, CORRECT rule for the icon's container.
  It combines positioning from the old rule with the layout for the new one.
*/
#backend-status-icon {
    /* Positioning from old rule */
    margin-right: 12px;
    flex-shrink: 0;

    /* Layout properties for the new icon */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

/* This is the solid, non-pulsing inner dot. */
.chat-status-dot {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* This is the outer, expanding ring. */
.chat-status-pulse {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    opacity: 0.75;
    animation: chat-ping 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* The text that appears next to the icon (e.g., "Active now"). */
.chat-status-text {
    font-size: 1.05em;
    line-height: 1.5;
    color: white;
    font-weight: 400;
    margin: 0;
}


/* --- Color variations for different states --- */

/* ONLINE State */
.chat-status-online .chat-status-dot {
    background-color: rgb(81, 131, 108);
}
.chat-status-online .chat-status-pulse {
    background-color: rgb(108, 213, 165);
}

/* OFFLINE State */
.chat-status-offline .chat-status-dot {
    background-color: #dc3545;
}
.chat-status-offline .chat-status-pulse {
    display: none;
}

/* CHECKING State */
.chat-status-checking .chat-status-dot {
    background-color: #6c757d;
}
.chat-status-checking .chat-status-pulse {
    display: none;
}


/*
* =========================================
* MESSAGE SLIDE-FADE ANIMATION
* =========================================
*/

/* 1. Define the keyframe animations */

@keyframes slideInFadeAssistant {
  from {
    opacity: 0;
    transform: translateY(15px); /* Start below and transparent */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* End in final position and opaque */
  }
}

@keyframes slideInFadeUser {
  from {
    opacity: 0;
    transform: translateX(20px); /* Start to the right and transparent */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* End in final position and opaque */
  }
}


/* 2. Modify your existing CSS to use these animations */

.messages__item {
    background: #E0E0E0;
    max-width: 70%;
    width: fit-content;
    margin-top: 10px;
    padding: 8px 12px;
    white-space: normal;
    overflow-wrap: break-word;
    /* ADD THIS LINE to apply the default animation */
    animation: slideInFadeAssistant 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.chatbox__messages .messages__item--user {
    margin-left: auto;
    background: #581B98 !important; /* The !important flag gives it maximum priority */
    color: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    animation-name: slideInFadeUser;
}


/*
* =========================================
* BUTTON STYLES
* =========================================
*/

    .animated-button {
        /* Define the transition for smooth animation on hover and click */
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background-color 0.2s ease-out,
                    box-shadow 0.3s ease-out;
        /* Let the browser know to optimize for transform changes */
        will-change: transform;
    }

    .animated-button:hover {
        /* Lift the button up and give it a subtle shadow to indicate it's interactive */
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .animated-button:active {
        /* Push the button down and shrink it slightly on click for a "pressed" feel */
        transform: translateY(0) scale(0.95);
        box-shadow: none; /* Remove shadow when pressed */
        transition-duration: 0.1s;
    }

    #resize_size_button {
        border-radius: 6px;
        background-color: transparent;
        border: none;
        padding: 4px 6px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.2s ease-out, transform 0.2s ease-out, border-radius 0.2s ease-out;
    }

    #resize_size_button:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transform: scale(1.1); /* Replace translateY with scale for a nice pop */
    }

    #resize_size_button:active {
        background-color: rgba(255, 255, 255, 0.3);
        transform: scale(0.9);
    }

    .chatbox { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; transition: top 0.4s ease-in-out, left 0.4s ease-in-out; }

    .chatbox--shrunk {
        top: auto;
        left: auto;
        /* Position it 30px from the right to align with the icon below */
        right: 30px; 
        /* Position it 100px from the bottom to sit above the icon (60px icon height + 10px margin + 30px icon offset) */
        bottom: 100px; 
        transform: none; /* This is required to disable the centering logic */
        z-index: 1000;
        transition: top 0.4s ease-in-out, left 0.4s ease-in-out, bottom 0.4s ease-in-out, right 0.4s ease-in-out;
    }
    .chatbox--minimized {
        /* Override the percentage-based positioning from .chatbox--shrunk */
        top: auto;
        left: auto;
    
        /* Position it reliably in the bottom right corner */
        bottom: 30px;
        right: 30px;

        /* Remove the transform used for centering, as it's no longer needed */
        transform: none;

        /* Ensure the container itself doesn't take up extra space */
        width: auto;
        height: auto;
    }
    .chatbox__support { display: flex; flex-direction: column; 
background: #f9f9f9; width: 850px; 
height: 650px; z-index: 123456; opacity: 1; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius: 20px; 
overflow: hidden; 
transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out; }

    .chatbox__support--shrunk { width: 500px; height:650px; } 
    /* Logic to toggle which icon is visible */
    .icon-expand { display: none; /* Hide the expand icon by default */ }
    .chatbox__support--shrunk .icon-shrink { display: none; /* Hide the shrink icon when shrunk */ }
    .chatbox__support--shrunk .icon-expand { display: block; /* Show the expand icon when shrunk */ }

    .chatbox__header {
        position: relative;
        top: 0;
        z-index: 10; /* Increased z-index to lift header above other content */
        background: linear-gradient(93.12deg, #581B98 0.52%, #9C1DE7 100%);
/* background: var(--primaryGradient); */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 20px;
        margin-bottom: 10px;
        box-shadow: var(--primaryBoxShadow);
        transition: transform 0.4s ease-in-out;
        transform-origin: center;
    }
    .chatbox__support--shrunk .chatbox__header--center{ transform: scale(0.85); } /*In the CSS code we specify that we would like to target chatbox__header as the child of chatbox__support. This means that we dont have to target chatbox__header seperately in the JS code later*/
    .chatbox__header--center {display: flex; align-items: center; /* Center the text within that space */ }

    .chatbox__button { 
        position: fixed; 
        bottom: 30px;
        right: 30px; 
        opacity: 1; /* Make it visible by default */
        pointer-events: auto; /* Make it clickable by default */
        transition: opacity 0.4s ease-in-out;  
        z-index: 123457; 
    }

    .chatbox__button--visible { opacity: 1; pointer-events: auto; }
    /* Base styles for the button container */
    .chatbox__button button { border: none; cursor: pointer; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }

    /* Style for the BUBBLE icon (white background) */
    .chatbox__button--bubble-style { padding: 12px; background: white; border-radius: 50px; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);  width: 60px; height: 60px; }

    /* Style for the V icon (transparent) */
    .chatbox__button--v-style { 
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    .chatbox__button--v-style:hover {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Specific SVG sizing for the transparent V-icon button */
    .chatbox__button--v-style svg { width: 60px; height: 60px; }
    
    /*MINIMIZED STATE (Icon Only) */ 
    .chatbox--minimized .chatbox__support { 
        opacity: 0; 
        transform: scale(0.95); 
        z-index: -1; 
        pointer-events: none; 
        visibility: hidden; /* Add this line */
    }
    .chatbox:not(.chatbox--minimized) .chatbox__support { 
        opacity: 1; 
        transform: scale(1); 
        z-index: 123456; 
        pointer-events: auto; 
        visibility: visible; /* Add this line */
    }

    /* This rule ensures the SVG icon scales correctly in both states */
    .chatbox__button--bubble-style svg { width: 36px; height: 36px; }

    .chatbox--shrunk .chatbox__button { opacity: 1; transform: translateY(20px); pointer-events: auto; }

    .chatbox__image--header {margin-right: 10px;  flex-shrink: 0; /* Prevent icon from shrinking */ }
    .chatbox__disclaimer {padding: 9px; text-align: center; font-size: 0.8rem; color: #888; background-color: #f9f9f9; }

    .chatbox__heading--header { font-size: 1.2rem; color: white; }
    .chatbox__description--header { font-size: 1rem; color: white; } 
    .chatbox__messages { padding: 10px 20px; overflow-y: auto; flex-grow: 1; min-height: 0; }

    .messages__item { background: #E0E0E0; max-width: 70%; width: fit-content; margin-top: 10px;  padding: 8px 12px; white-space: normal; overflow-wrap: break-word; } 
    .messages__item--user { margin-left: auto; background: var(--primary); color: white; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; } 
    .messages__item--assistant { margin-right: auto; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } 
    .messages__item--typing { will-change: transform; width: auto; padding: 15px 20px; display: table; margin-right: auto; position: relative; animation: 2s bulge infinite ease-out; background: #E0E0E0; margin-top: 10px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; } 
    span.messages__dot { height: 8px; width: 8px; float: left; margin: 0 1px; background-color: #9E9EA1; display: block; border-radius: 50%; opacity: 0.4; animation: 1s blink infinite; } 

    @keyframes blink { 50% { opacity: 1; } }
    @keyframes bulge { 50% { transform: scale(1.05); } } 
    .chatbox__footer { position: sticky; bottom: 0; display: flex; flex-direction: row; 
       align-items: center; max-height: 200px; padding: 20px 20px; background: linear-gradient(268.91deg, #581B98 -2.14%, #9C1DE7 99.69%);
    box-shadow: 0px -10px 15px rgba(0, 0, 0, 0.1); } 
    #chatmessageid { box-sizing: border-box; border: 1px solid #ccc; width: 100%; resize: none; min-height: 44px; max-height: 150px; overflow-y: auto; margin-right: 15px; margin-left: 15px; background: white; padding: 10px 20px; line-height: 1.4; border-radius: 30px; padding: 8px 20px; } 
    #chatmessageid:disabled { background-color: #f0f0f0; cursor: not-allowed; } 
    .chatbox__send--footer { color: white; background: #404040; padding: 5px; border: 1px solid white; outline: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 

    .chatbox__send--footer:disabled { background-color: #999; cursor: not-allowed; }

    .chatbox__support--shrunk .header__actions_right {
        right: 12px; /* Symmetrical to the left icon's 12px position */
        transform: translateY(-50%) scale(0.75);
    }
    #resize_size_button svg { width: 32px; height: 32px; cursor: pointer;}
    #resize_size_button:hover { background-color: rgba(255, 255, 255, 0.1); }
    #resize_size_button:active { background-color: rgba(255, 255, 255, 0.3); transform: scale(0.9); }

    #minimization_button {border-radius: 6px; background-color: transparent; border: none; padding: 2px 3px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s ease-out; transition: transform 0.2s ease-out;}
    #minimization_button > svg { width: 32px; height: 32px; cursor: pointer; }
    #minimization_button:hover { background-color: rgba(255, 255, 255, 0.1); }
    #minimization_button:active { background-color: rgba(255, 255, 255, 0.3); transform: scale(0.9); }
    #minimization_button.minimization_button--hidden { display: none; }
    

    .language_selector { position: absolute; left: 20px; top:50%; transform: translateY(-50%); transition: transform 0.4s ease-in-out; transform-origin: center;}

    .chatbox__support--shrunk .language_selector{ transform: translateY(-50%) scale(0.75); left: 12px; }

    #current-lang-btn { border-radius: 6px; background-color: transparent; border: none; padding: 8px 12px; cursor: pointer; display: flex; align-items: center;  gap: 8px; transition: border-radius 0.2s ease-out; transition: background-color 0.2s ease-out; transition: transform 0.2s ease-out; }
    #current-lang-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
    #current-lang-btn:active { background-color: rgba(255, 255, 255, 0.3); transform: scale(0.9); }
    #selected-lang-icon-container svg { width:32px; height: 24px; border-radius: 3px; display:block; } 
    #current-lang-btn > svg{ width: 60px; height: 60px; fill: white; }

    #lang-options { list-style: none; padding: 5 px; margin: 0; position: absolute; top: calc(100% + 5px); right: 0; min-width: 150px; background-color: white; border: 1px solid #ccc;  border-radius: 6px; box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); z-index: 11; color: #333;} 
    #lang-options.lang-options--hidden { display: none; }
    #lang-options li { padding: 12px 16px; cursor: pointer; display: flex; align-items: center; font-size: 1.2rem; } 
    #lang-options li:hover { background-color: #f0f0f0;} 
    #lang-options li svg { width: 28px; height: 18px; margin-right: 8px; border-radius: 2px; }

.messages__item {
    /* This makes sure the container itself doesn't have extra space */
    line-height: 1.5;
}

.messages__item p {
    /* Removes extra spacing between paragraphs inside a single bubble */
    margin-top: 0;
    margin-bottom: 0.5em;
}

.messages__item p:last-child {
    /* No margin for the very last paragraph in a message */
    margin-bottom: 0;
}

.messages__item ul,
.messages__item ol {
    /* This is the key fix for your bullet point issue. */
    /* It pulls the list inside the chat bubble's padding. */
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 25px; /* Adjust this value as needed */
}

.messages__item li {
    /* Adds a little space between list items */
    margin-bottom: 0.25em;
}

.messages__item h1,
.messages__item h2,
.messages__item h3,
.messages__item h4,
.messages__item h5,
.messages__item h6 {
    /* Basic styling for headings so they don't look out of place */
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    line-height: 1.2;
}

.messages__item blockquote {
    /* Styles for blockquotes ('> text') */
    margin-left: 10px;
    padding-left: 15px;
    border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.messages__item code {
    /* Styles for inline code (`code`) */
    background-color: rgba(0, 0, 0, 0.08);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: monospace;
}

.messages__item pre {
    /* Styles for code blocks (```code block```) */
    background-color: rgba(0, 0, 0, 0.08);
    padding: 10px;
    border-radius: 6px;
    white-space: pre-wrap; /* Allows long lines to wrap */
    word-wrap: break-word;
}

.header__actions_right {
    position: absolute;
    right: 20px; /* This ensures equal distance to the right border */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px; /* This controls the space between the buttons */
}

/* ===== Ensure chat never exceeds viewport height (desktop + mobile) ===== */
:root {
  --chatbox-available-h: 80vh; /* fallback */
}

.chatbox__support {
  max-height: var(--chatbox-available-h, 80vh);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chatbox__messages {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
}

@media (max-width: 768px) {
  .chatbox__support {
    height: var(--chatbox-available-h, 100vh);
    max-height: var(--chatbox-available-h, 100vh);
  }
}