/* =========================================
   STARTDOT AI — FLOATING BUTTON
========================================= */

.startdot-ai-button {
    position: fixed;

    left: 24px;
    bottom: 24px;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: #0b0b0c;

    border: 2px solid #ffffff;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.22);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9998;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.startdot-ai-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28);
}


.startdot-ai-button img {

    width: 36px;
    height: 36px;

    object-fit: contain;
}


/* =========================================
   CHAT IFRAME
========================================= */

/* =========================================
   STARTDOT AI CHAT WINDOW
========================================= */

.startdot-ai-frame {
    position: fixed;

    left: 24px;
    bottom: 24px;

    width: 380px;

    /* Never exceed the available screen height */
    height: min(600px, calc(100vh - 110px));

    min-height: 500px;

    border: none;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.20);

    z-index: 999999;

    display: none;

    overflow: hidden;
}

.startdot-ai-frame.active {
    display: block !important;
}


/* =========================================
   LAPTOP / SMALL DESKTOP
========================================= */

@media (max-height: 750px) and (min-width: 601px) {

    .startdot-ai-frame {

        height: calc(100vh - 90px);

        min-height: 0;

        bottom: 20px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .startdot-ai-frame {

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 100dvh;

        min-height: 0;

        border-radius: 0;
    }

}
