@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

#chatbot-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Toggle Button */
#chatbot-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #1fa999, #17c3b2);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(31, 169, 153, 0.35), 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#chatbot-toggle:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(31, 169, 153, 0.5), 0 8px 16px rgba(0, 0, 0, 0.15);
}

#chatbot-toggle svg {
    width: 32px;
    height: 32px;
}

/* Click effect */
#chatbot-toggle:active {
    transform: scale(0.95);
}

/* Chat Window */
#chatbot-window {
    width: 380px;
    height: 600px;
    max-height: 70vh;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.05);
    position: absolute;
    bottom: 90px;
    right: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 1;
    transform: scale(1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

#chatbot-window.hidden {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    pointer-events: none;
    /* Use visibility hidden to ensure it doesn't interfere when closed, 
       but we need display flex to be active for transition if we were using purely opacity.
       However, the JS likely toggles the class 'hidden' which might have display:none.
       We will support both.
    */
    display: none !important;
}

/* Header */
.chatbot-header {
    padding: 18px 20px;
    background: #1fa999;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-title {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
}

.status-indicator {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* Tooltip Hover Logic */
.info-tooltip-container {
    position: relative;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.info-icon {
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.info-icon:hover {
    opacity: 1;
}

.tooltip-data {
    display: none;
    position: absolute;
    top: 32px;
    /* Space below icon */
    left: 50%;
    transform: translateX(-50%);
    /* Center on icon */
    width: 220px;
    background: #ffffff;
    color: #333;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    /* Premium shadow */
    z-index: 10000;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    /* pointer-events: none; - Removing to allow text selection */
}

/* Tooltip Beak/Arrow */
.tooltip-data::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
}

.info-tooltip-container:hover .tooltip-data {
    display: block !important;
    animation: tooltipFade 0.2s ease-out;
}

.tooltip-data strong {
    display: block;
    margin-bottom: 8px;
    color: #1fa999;
    font-weight: 600;
    font-size: 14px;
}

.tooltip-data ul {
    margin: 0;
    padding-left: 16px;
    list-style-type: disc;
}

.tooltip-data li {
    margin-bottom: 4px;
    color: #4b5563;
    /* Grey-700 */
}

@keyframes tooltipFade {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

#chatbot-close,
#chatbot-info {
    display: flex !important;
    background: transparent;
    color: #fff;
    z-index: 20;
    position: relative;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

#chatbot-close:hover,
#chatbot-info:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Messages Area */
#chatbot-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Scrollbar */
#chatbot-info svg,
#chatbot-close svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Scrollbar */
#chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

#chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

#chatbot-messages::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 20px;
    border: 2px solid #f9fafb;
}

.bot-message,
.user-message {
    padding: 12px 16px;
    border-radius: 16px;
    max-width: 80%;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.bot-message {
    background: #e5e7eb;
    color: #1f2937;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.user-message {
    background: #1fa999;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 12px rgba(31, 169, 153, 0.2);
}

/* Options Container - Flex Flow for Chips */
.chatbot-options {
    display: flex;
    flex-wrap: wrap;
    /* Allows buttons to flow into multiple lines */
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    padding-right: 10px;
    /* slight padding to avoid edge hugging */
}

/* Option Buttons - Chip Style */
.chatbot-option-btn {
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: #1fa999;
    background: #ffffff;
    border: 1px solid #1fa999;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 500;
    text-align: left;
    /* Better for reading longer options */
    box-shadow: 0 2px 5px rgba(31, 169, 153, 0.05);
    line-height: 1.4;
    max-width: 100%;
    /* Prevent overflow */
    white-space: normal;
    /* Allow text wrapping */

    /* Flex behavior */
    flex: 0 1 auto;
}

.chatbot-option-btn:hover {
    background: #1fa999;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(31, 169, 153, 0.25);
    border-color: #1fa999;
}

.chatbot-option-btn:active {
    transform: scale(0.98);
}

/* Input Area */
.chatbot-input {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chatbot-input input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 24px;
    outline: none;
    font-size: 14px;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    color: #1f2937;
}

.chatbot-input input::placeholder {
    color: #9ca3af;
}

.chatbot-input input:focus {
    background: #fff;
    border-color: #1fa999;
    box-shadow: 0 0 0 3px rgba(31, 169, 153, 0.1);
}

.chatbot-input button {
    background: #1fa999;
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(31, 169, 153, 0.2);
}

.chatbot-input button:hover {
    transform: scale(1.05);
    background: #17c3b2;
}

.chatbot-input button svg {
    margin-left: -2px;
}

/* Typing Indicator */
.typing-indicator {
    padding: 12px 16px;
    background: #e5e7eb;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.typing-indicator .dot {
    width: 6px;
    height: 6px;
    background-color: #6b7280;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

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

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

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

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}


@media (max-width: 480px) {
    #chatbot-window {
        width: calc(100vw - 60px);
        max-width: calc(100vw - 60px);
        height: calc(100dvh / 2);
        max-height: calc(100dvh / 2);
        border-radius: 0;
        right: 0 !important;
        bottom: 100px !important;
        position: fixed !important;
        margin: 0;
        z-index: 9999;
        box-shadow: none;
    }
}