/* Container at bottom center of the screen */
.colia-chatbot-active-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    bottom: 1vh;
    width: 600px;
    max-width: 95vw;
    height: calc(100dvh - var(--header-height, 65px) - 65px);
    max-height: 80dvh;
    left: 50%;
    transform: translateX(-50%); /* Center within wrapper */
    z-index: 1002;
    color: var(--primary-color);
    background-color: var(--background-color);
    /*background: #3b4566; !* for testing deployment and versioning *!*/
    border: 1px solid #555;
    border-radius: 12px;
    padding: 0.5rem;
    overscroll-behavior: contain;
}

.colia-chatbot-input-fixed {
    margin-top: auto;
}


/* The conversation area, dark background */
.colia-chatbot-conversation {
    width: 95%;
    padding: 1rem 1rem 3rem;
    flex: 1; /* takes remaining space above the input */
    display: flex;
    flex-direction: column;
    gap: 0.3rem; /* optional spacing between messages */

    /* Prevent it from growing too much */
    overflow-y: auto;
    min-height: 0; /* Allow the container to shrink properly for scrolling */

    /* Styled scrollbar */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #555 #2b2b2b; /* Thumb & Track */
}

.colia-chatbot-conversation > *:last-child {
    margin-bottom: -2rem; /* Moves last element up so it doesn't push content */
}

.colia-chatbot-conversation::-webkit-scrollbar {
    width: 4px; /* Thin scrollbar */
}

.colia-chatbot-conversation::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 10px;
}

.colia-chatbot-conversation::-webkit-scrollbar-track {
    background: transparent;
}

.colia-chatbot-conversation p {
    font-size: 14px;
    font-weight: 300;
}

/*   ============================================= */

/* chatbot container for when inactive */
.colia-chatbot-container {
    position: sticky;
    bottom: 20px;
    display: flex;
    width: 600px;
    max-width: 90vw;
    justify-content: center;
    margin: 2rem auto 0 auto; /* auto center horizontally */
    z-index: 1005;
}




/*  messages */
.colia-chatbot-message {
    margin-bottom: 0.5rem;
    line-height: 1.4;
    max-width: 80%;
}

.from-colia {
    text-align: left;
    max-width: 85%; /* Keep a good width ratio */
}

.from-user {
    display: inline-block; /* Ensures the background only wraps the text */
    text-align: left; /* Keeps text properly aligned inside the bubble */

    background-color: rgb(158 158 255 / 15%); /* Semi-transparent */
    padding: 0.5rem 1rem;
    border-radius: 12px;
    max-width: 85%; /* Keep a good width ratio */
    margin: 0.3rem 0;
    word-wrap: break-word;
}


/* Floating input bar */
.colia-chatbot-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    background-color: var(--card-background-color);
    padding: 0.5rem 1rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--card-border-color-hover, #555);
    border-radius: 20px;
}

 /* fixex input bar*/
.colia-chatbot-input-fixed .colia-chatbot-input {
    padding: 0.5rem 1rem;
    box-shadow: none;
    border: 1px solid #555;
    border-radius: 20px;
    max-width: -webkit-stretch; /* Chrome, Safari */
    max-width: -moz-available; /* Firefox */
    max-width: -webkit-fill-available;
    max-width: stretch; /* Standard (if supported) */
}

/* Multi-line textarea */
.colia-chatbot-input textarea {
    flex: 1 1 auto; /* Allows it to grow */
    min-width: 0; /* Important to avoid width issues */
    border: none;
    background: transparent;
    color:  var(--primary-color);
    outline: none;
    margin-right: 0.5rem; /* Space for the icon */
    resize: none; /* Prevents manual resizing */

    align-content: center;

    /* Set height limits */
    /*min-height: 1.2rem; !* Default size *!*/
    max-height: 8rem; /* Adjust this to fit 4 lines */
    overflow-y: auto; /* Enables scrolling after max height */

    line-height: 1.4;
    padding: 0.3rem 0;

    font-family: inherit;
    font-size: 1rem;
}



/* meniu for conversation */
.conversation-menu{
    background: var(--secondary-color);
    border-bottom: 1px solid grey;
    top: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    border-radius: 12px 12px 0 0;
    margin: -9px -9px 0;
    color: white;
}

.conversation-menu p {
    font-size: 1.2rem;
    flex: 1;
    margin: 0;
}
.conversation-menu svg {
    fill: white;
    stroke: white;
}
/* The new conversation button will be centered */
.conversation-menu .new-conversation {
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    flex: 1;
    text-align: center;
}

/* The close button is positioned at the right edge */
.conversation-menu .close-button {
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

/* END meniu for conversation */


.colia-send-icon svg {
    width: 48px;
    height: 48px;
    fill: #6f55ff; /* or your preferred color */
    vertical-align: middle; /* keep it aligned nicely with text, if any */
    transition: fill 0.2s ease;
}

.colia-send-icon svg:hover {
    fill: #8e79ff; /* example hover color */
}

/* Custom scrollbar for textarea */
.colia-chatbot-input textarea {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #555 #2b2b2b; /* Thumb color | Track color */
}

/* placeholders */
#colia-chatbot-textarea::-moz-placeholder {
    font-style: italic; /* Optional: Make it italic */
    opacity: 1;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
#colia-chatbot-textarea::placeholder {
    font-style: italic; /* Optional: Make it italic */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}


/* WebKit (Chrome, Edge, Safari) */
.colia-chatbot-input textarea::-webkit-scrollbar {
    width: 2px; /* Make it thinner */
}

.colia-chatbot-input textarea::-webkit-scrollbar-thumb {
    background-color: #666; /* Color of the scrollbar */
    border-radius: 10px; /* Rounded scrollbar */
}

.colia-chatbot-input textarea::-webkit-scrollbar-track {
    background: transparent; /* Make track invisible */
}

#dim-overlay-chat {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.05); /* Adjust opacity as needed */
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px); /* Glass effect */
    z-index: 999;
    animation: fadeInOverlay 0.3s ease;
}


.hidden {
    display: none;
}

.ai-thinking {
    animation: ai-pulse 1.5s infinite ease-in-out;
    fill: #6e54fd; /* AI blue color */
}

@keyframes ai-pulse {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* chatbot typing effect */
/* Typing indicator */
.colia-chatbot-typing {
    display: inline-block;
    position: relative;
    width: 90%;
    height: 20px;
    border-radius: 10px;
    padding: 10px;
    text-align: left;
}

.colia-chatbot-typing span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #999;
    margin: 0 2px;
    animation: typing 1.4s infinite ease-in-out;
}

.colia-chatbot-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.colia-chatbot-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-6px);
    }
}

/*  prompt suggestion card box */
.colia-prompt-card {
    cursor: pointer;
    /* 👈 Make room for the icon */
    padding: 1rem 3rem 1rem 1rem;
    border-radius: 0.75rem;
    transition: background 0.3s;
    background: var(--card-background-color, #2c3339);
    border: 2px dashed var(--card-border-color, #2d2d32);
    box-shadow: var(--card-shadow, 0 2px 5px rgba(0, 0, 0, 0.05));
    max-width: 20rem;
    position: relative;
}

.colia-prompt-card:hover {
    background: var(--card-background-hover, #2c3339);
    border-color: var(--card-border-color-hover, #2d2d32);
}
/* mobil */
@media (max-width: 768px) {
    .colia-prompt-card {
        max-width: 16rem;
    }
}

.colia-ai-icon {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%); /* 👈 center vertically */
    width: 2rem;
    height: auto;
    pointer-events: none; /* 👈 don't block click */
}

.colia-ai-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}