/* =========================
FIDEX PREMIUM CHATBOT
========================= */

#fd-chat-toggle {

    position: fixed;

    bottom: 25px;
    left: 25px;

    width: 76px;
    height: 76px;

    border-radius: 50%;

    background:var(--gold);
    

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 999999;

    overflow: hidden;

    box-shadow:
    0 15px 45px rgba(255,90,0,0.35),
    inset 0 2px 2px rgba(255,255,255,0.2),
    inset 0 -6px 12px rgba(0,0,0,0.2);

    animation:
    fdFloat 4s ease-in-out infinite;

}

.fd-chat-glow {

    position: absolute;

    width: 180%;
    height: 180%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,0.25),
        transparent 60%
    );

    pointer-events: none;

}

.fd-chat-icon {

    position: relative;

    width: 56px;
    height: 56px;

    border-radius: 50%;

    background:
    rgba(0,0,0,0.2);

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

}

.fd-chat-icon svg {

    width: 28px;
    height: 28px;

}

#fd-chatbot {

    position: fixed;

    bottom: 115px;
    left: 25px;

    width: 390px;

    height: 78vh;
    max-height: 680px;

    background:
    linear-gradient(
        180deg,
        #07111f 0%,
        #02060c 100%
    );

    border-radius: 26px;

    overflow: hidden;

    display: none;
    flex-direction: column;

    z-index: 999999;

    border:
    1px solid rgba(255,90,0,0.15);

    box-shadow:
    0 20px 70px rgba(0,0,0,0.65);

    backdrop-filter: blur(16px);

}

#fd-chat-header {

    background:
    linear-gradient(
        135deg,
        #ff5a00,
        #ff2d00
    );

    padding: 16px 18px;

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.fd-header-left {

    display: flex;
    align-items: center;
    gap: 14px;

}

.fd-ai-avatar {

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: rgba(255,255,255,0.2);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;

}

#fd-chat-header h3 {

    color: white;
    font-size: 22px;

}

#fd-chat-header span {

    color: rgba(255,255,255,0.8);
    font-size: 13px;

}

#fd-close-chat {

    background: transparent;
    border: none;

    color: white;

    font-size: 26px;

    cursor: pointer;

}

#fd-chat-messages {

    flex: 1;

    overflow-y: auto;

    padding: 18px;

    display: flex;
    flex-direction: column;
    gap: 14px;

}

.fd-bot-message {

    background:
    rgba(255,90,0,0.08);

    border:
    1px solid rgba(255,90,0,0.12);

    color: white;

    padding: 16px;

    border-radius: 18px 18px 18px 6px;

    line-height: 1.7;

    max-width: 85%;

}

.fd-user-message {

    background:
    linear-gradient(
        135deg,
        #ff5a00,
        #ff2d00
    );

    color: white;

    padding: 14px 16px;

    border-radius: 18px 18px 6px 18px;

    align-self: flex-end;

    max-width: 82%;

}

#fd-chat-input-area {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px;

    border-top:
    1px solid rgba(255,255,255,0.06);

    background:
    rgba(255,255,255,0.02);

}

#fd-chat-input {

    flex: 1;

    height: 56px;

    border-radius: 18px;

    border:
    1px solid rgba(255,255,255,0.08);

    background:
    rgba(255,255,255,0.03);

    color: white;

    padding: 0 18px;

    outline: none;

}

#fd-chat-input::placeholder {

    color: rgba(255,255,255,0.45);

}

#fd-send-btn {

    width: 56px;
    height: 56px;

    border-radius: 18px;

    border: none;

    background:
    linear-gradient(
        135deg,
        #ff5a00,
        #ff2d00
    );

    color: white;

    cursor: pointer;

    font-size: 18px;

}

@keyframes fdFloat {

    0%,100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

}

@media(max-width: 600px) {

    #fd-chatbot {

        width: 95%;
        height: 82vh;

        right: 2.5%;
        bottom: 100px;

    }

}