/* ==========================================
   CRAWL GEEK AI
========================================== */

.cg-ai-widget {
    width: 100%;
    position: relative;
    font-family: inherit;
    color: #172033;
}


/* ==========================================
   MAIN SECTION
========================================== */

.cg-ai-home {
    width: 100%;
    text-align: center;
    padding: 70px 25px;
    box-sizing: border-box;
}


.cg-ai-title {
    margin: 0 0 14px;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 600;
    color: #13233A;
}


.cg-ai-description {
    margin: 0 auto;
    max-width: 720px;
    font-size: 17px;
    line-height: 1.6;
    color: #5F6773;
}


/* ==========================================
   MAIN QUESTION BOX
========================================== */

.cg-ai-main-input {
    width: 100%;
    max-width: 760px;

    min-height: 66px;

    display: flex;
    align-items: center;

    margin: 36px auto 28px;

    padding: 7px;

    border: 1px solid #D9DDE3;

    border-radius: 40px;

    background: #FFFFFF;

    box-sizing: border-box;
}


.cg-ai-question {
    flex: 1;

    width: 100%;

    min-width: 0;

    border: 0 !important;

    box-shadow: none !important;

    outline: none !important;

    background: transparent !important;

    color: #172033 !important;

    font-family: inherit;

    font-size: 16px;

    padding: 0 20px !important;
}


.cg-ai-question::placeholder {
    color: #9BA3B2;
}


.cg-ai-main-submit,
.cg-ai-send {

    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #0875E1 !important;
    color: #FFFFFF !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;

    cursor: pointer;

    box-sizing: border-box;
}


.cg-ai-main-submit svg,
.cg-ai-send svg {

    display: block;

    width: 18px;
    height: 18px;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 auto;
}


/* ==========================================
   GOAL BUTTONS
========================================== */

.cg-ai-options {

    max-width: 820px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


.cg-ai-option {

    min-height: 48px;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 20px !important;

    border-width: 1px !important;

    border-style: solid !important;

    border-color: #DDDFE3;

    border-radius: 12px;

    background: #FFFFFF;

    color: #172033 !important;

    font-family: inherit;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.3;

    text-decoration: none !important;

    cursor: pointer;

    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}


.cg-ai-option span {
    color: inherit !important;
}


.cg-ai-option i,
.cg-ai-option svg {

    width: 18px;

    height: 18px;

    color: inherit;

    fill: currentColor;
}


.cg-ai-option:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}


/* ==========================================
   MODAL
========================================== */

.cg-ai-modal {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 999999;

    background: rgba(20,24,32,0.67);

    padding: 22px;

    box-sizing: border-box;
}


.cg-ai-modal.active {

    display: flex;

    align-items: center;

    justify-content: center;
}


.cg-ai-modal-content {

    position: relative;

    width: 100%;

    max-width: 1320px;

    height: calc(100vh - 44px);

    max-height: 900px;

    display: flex;

    flex-direction: column;

    background: #FFFFFF;

    border-radius: 20px;

    overflow: hidden;

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


/* ==========================================
   HEADER
========================================== */

.cg-ai-header {

    min-height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 28px;

    border-bottom: 1px solid #ECEEF1;

    box-sizing: border-box;
}


.cg-ai-brand strong {

    display: block;

    margin-bottom: 4px;

    color: #172033;

    font-size: 18px;

    font-weight: 600;
}


.cg-ai-brand span {

    display: block;

    color: #727B89;

    font-size: 12px;
}


.cg-ai-close {

    width: 44px !important;

    height: 44px !important;

    min-width: 44px !important;

    padding: 0 !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    background: transparent !important;

    border: 1px solid #E6E8EC !important;

    border-radius: 10px !important;

    color: #172033 !important;

    cursor: pointer;
}


.cg-ai-close svg {

    display: block;

    width: 22px;

    height: 22px;

    color: inherit;
}


/* ==========================================
   CHAT
========================================== */

.cg-ai-messages {

    flex: 1;

    width: 100%;

    max-width: 780px;

    margin: 0 auto;

    padding: 38px 24px;

    box-sizing: border-box;

    overflow-y: auto;
}


.cg-ai-message {

    width: fit-content;

    max-width: 78%;

    margin-bottom: 18px;

    padding: 15px 18px;

    border-radius: 16px;

    font-size: 15px;

    line-height: 1.6;

    box-sizing: border-box;
}


.cg-ai-message.ai {

    background: #F4F5F7;

    color: #172033;
}


.cg-ai-message.user {

    margin-left: auto;

    background: #EDF3FF;

    color: #172033;
}


.cg-ai-typing {

    color: #727B89 !important;

    font-style: italic;
}


/* ==========================================
   CHAT INPUT
========================================== */

.cg-ai-chat-area {

    width: 100%;

    max-width: 800px;

    margin: 0 auto;

    padding: 0 24px 24px;

    box-sizing: border-box;
}


.cg-ai-chat-input {

    width: 100%;

    min-height: 76px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px;

    border: 1px solid #D9DDE3;

    border-radius: 20px;

    background: #FFFFFF;

    box-sizing: border-box;
}


.cg-ai-message-input {

    flex: 1;

    min-width: 0;

    height: 58px;

    resize: none;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    background: transparent !important;

    color: #172033 !important;

    padding: 12px !important;

    font-family: inherit;

    font-size: 16px;
}


.cg-ai-message-input::placeholder {

    color: #9BA3B2;
}


.cg-ai-disclaimer {

    margin-top: 10px;

    text-align: center;

    color: #89909B;

    font-size: 10px;
}


/* Prevent page scrolling when popup is open */

body.cg-ai-open {

    overflow: hidden;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .cg-ai-home {
        padding: 45px 16px;
    }


    .cg-ai-title {

        font-size: 34px;
    }


    .cg-ai-description {

        font-size: 15px;
    }


    .cg-ai-options {

        flex-direction: column;
    }


    .cg-ai-option {

        width: 100%;
    }


    .cg-ai-modal {

        padding: 8px;
    }


    .cg-ai-modal-content {

        height: calc(100vh - 16px);

        border-radius: 14px;
    }


    .cg-ai-header {

        min-height: 72px;

        padding: 13px 16px;
    }


    .cg-ai-messages {

        padding: 25px 16px;
    }


    .cg-ai-message {

        max-width: 90%;
    }


    .cg-ai-chat-area {

        padding: 0 12px 14px;
    }

}

.cg-ai-after-goals-text {

    max-width: 820px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;

    font-size: 12px;

    line-height: 1.6;

    color: #7B8492;
}


.cg-ai-after-goals-text p,
.cg-ai-disclaimer p {

    margin: 0;
}


.cg-ai-after-goals-text a,
.cg-ai-disclaimer a {

    color: inherit;

    text-decoration: underline;
}


.cg-ai-disclaimer {

    margin-top: 10px;

    text-align: center;

    color: #89909B;

    font-size: 10px;

    line-height: 1.5;
}