:root {

    --jdih-primary: #9b1c1c;
    --jdih-primary-dark: #7d1515;
    --jdih-secondary: #c89b3c;
    --jdih-bg: #faf7f4;
    --jdih-border: #eadfce;

}

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

.jdih-ai-modal {
    display: none;

    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    justify-content: center;
    align-items: center;
    z-index: 999999;
    padding: 30px;
    backdrop-filter: blur(2px);
}

.jdih-ai-window {

    width: 100%;
    max-width: 780px;

    height: 90vh;

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);

    display: flex;

    flex-direction: column;

}


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

.jdih-ai-header {

    background: linear-gradient(135deg,
            var(--jdih-primary),
            var(--jdih-primary-dark));

    color: #fff;

}

.jdih-ai-header h2 {

    margin: 0;

    font-size: 34px;

    font-weight: 700;

}

.jdih-ai-header p {

    margin: 6px 0 0;

    font-size: 18px;

    opacity: .9;

}

#jdih-ai-close {

    border: none;

    background: #fff;

    color: #23304d;

    padding: 14px 26px;

    border-radius: 12px;

    font-size: 18px;

    cursor: pointer;

    transition: .2s;

}

#jdih-ai-close:hover {

    transform: translateY(-1px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);

}


/* ==========================================================
   CONTAINER
========================================================== */

.jdih-ai-container {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 24px 34px;

    background: #f5f8fc;

    overflow: hidden;

}


/* ==========================================================
   WELCOME
========================================================== */

.jdih-welcome {

    background: #fff;

    border: 1px solid #d8e2ef;

    border-radius: 18px;

    padding: 24px 28px;

    margin-bottom: 20px;

}

.jdih-welcome h3 {

    margin: 0 0 8px;

    font-size: 20px;

    color: #1f2937;

}

.jdih-welcome p {

    margin: 0;

    color: #5f6d82;

    line-height: 1.8;

}


/* ==========================================================
   QUICK PROMPT
========================================================== */

.jdih-quick-prompt {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 20px;

}

.jdih-quick-prompt button {

    background: #fff4f4;

    color: var(--jdih-primary);

    border: 1px solid #f1d2d2;

    padding: 14px 24px;

    border-radius: 999px;

    cursor: pointer;

    font-size: 15px;

    transition: .2s;

}

.jdih-quick-prompt button:hover {

    background: #ffe9e9;


}


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

#jdih-chat-messages {

    flex: 1;

    overflow-y: auto;

    padding: 20px;

    background: #fff;

    border: 1px solid #d9e4f2;

    border-radius: 18px;

}


/* ==========================================================
   MESSAGE
========================================================== */

.jdih-message {

    display: flex;

    gap: 14px;

    margin-bottom: 22px;

    align-items: flex-start;

}

.jdih-user {

    justify-content: flex-end;

    flex-direction: column;

    align-items: flex-end;

}

.jdih-user .jdih-avatar {

    display: none;

}


/* ==========================================================
   AVATAR
========================================================== */

.jdih-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #1d84e8,
            #3f51b5);

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 20px;

    flex-shrink: 0;

}


/* ==========================================================
   BUBBLE
========================================================== */

/* .jdih-bubble {

    max-width: 78%;

    padding: 18px 20px;

    border-radius: 18px;

    line-height: 1.8;

    word-break: break-word;

    white-space: pre-wrap;

}

.jdih-ai .jdih-bubble {

    background: #eef3fb;

    border: 1px solid #d8e4f3;

    color: #24324b;

}

.jdih-user .jdih-bubble {

    background: #2585e8;

    color: #fff;

    border-bottom-right-radius: 6px;

}

.jdih-ai .jdih-bubble {

    border-bottom-left-radius: 6px;

} */


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

.jdih-input-area {

    display: flex;

    gap: 18px;

    margin-top: 22px;

}

#jdih-question {

    flex: 1;

    height: 62px;

    border: 2px solid var(--jdih-primary);


    border-radius: 14px;

    padding: 16px 18px;

    font-size: 16px;

    resize: none;

    font-family: inherit;

    transition: .2s;

    background: #fff;

}

#jdih-question:focus {

    outline: none;

    box-shadow: 0 0 0 4px rgba(155, 28, 28, .15);


}

#jdih-send {

    width: 145px;

    border: none;

    border-radius: 14px;

    background: var(--jdih-primary);


    color: #fff;

    font-size: 18px;

    cursor: pointer;

    transition: .2s;

}

#jdih-send:hover {

    background: var(--jdih-primary-dark);


}

#jdih-send:disabled {

    opacity: .6;

    cursor: not-allowed;

}


/* ==========================================================
   LINK
========================================================== */

.jdih-ai a {

    color: #2563eb;

    text-decoration: none;

    font-weight: 600;

}

.jdih-ai a:hover {

    text-decoration: underline;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

#jdih-chat-messages::-webkit-scrollbar {

    width: 8px;

}

#jdih-chat-messages::-webkit-scrollbar-thumb {

    background: #cfd8e6;

    border-radius: 999px;

}


/* ==========================================================
   LOADING
========================================================== */

.jdih-typing {

    display: flex;

    gap: 4px;

    align-items: center;

}

.jdih-typing span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #7d8795;

    animation: jdihTyping 1.2s infinite;

}

.jdih-typing span:nth-child(2) {

    animation-delay: .2s;

}

.jdih-typing span:nth-child(3) {

    animation-delay: .4s;

}

@keyframes jdihTyping {

    0%,
    80%,
    100% {

        transform: scale(.6);

        opacity: .4;

    }

    40% {

        transform: scale(1);

        opacity: 1;

    }

}


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

@media(max-width:768px) {

    .jdih-ai-modal {

        padding: 10px;

    }

    .jdih-ai-window {

        height: 100vh;

        border-radius: 0;

    }

    .jdih-ai-header {

        padding: 18px;

    }

    .jdih-ai-header h2 {

        font-size: 22px;

    }

    .jdih-ai-header p {

        font-size: 14px;

    }

    .jdih-ai-container {

        padding: 16px;

    }

    .jdih-quick-prompt {

        overflow: auto;

        flex-wrap: nowrap;

    }

    .jdih-bubble {

        max-width: 92%;

    }

    .jdih-input-area {

        flex-direction: column;

    }

    #jdih-send {

        width: 100%;

        height: 54px;

    }

}


.jdih-message{

    display:flex;

    gap:14px;

    margin-bottom:20px;

}

.jdih-user{

    justify-content:flex-end;

}

.jdih-user .jdih-message-content{

    align-items:flex-end;

}

.jdih-message-content{

    display:flex;

    flex-direction:column;

    max-width:78%;

}

.jdih-message-label{

    font-size:12px;

    font-weight:600;

    margin-bottom:6px;

    color:#777;

}

.jdih-ai .jdih-bubble{

    background:#fff;

    border:1px solid #e5d7d7;

    border-radius:18px;

    padding:16px 18px;

    line-height:1.8;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.jdih-user .jdih-bubble{

    background:linear-gradient(
        135deg,
        #9b1c1c,
        #b32626
    );

    color:#fff;

    padding:16px 18px;

    border-radius:18px;

    border-bottom-right-radius:6px;

}

.jdih-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #9b1c1c,
        #b32626
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    flex-shrink:0;

}