/* ==========================================================
   PORTAL GTK KABUPATEN KONAWE
   File    : 17-ai-response.css
   Version : 1.0
   Modul   : AI Response Panel
   ========================================================== */


/* ==========================================================
   PANEL AI
========================================================== */

.ai-response{

    width:100%;

    max-width:760px;

    margin:30px auto;

    background:#ffffff;

    border:1px solid #DCE7F5;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    display:none;

}


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

.response-header{

    background:linear-gradient(
        135deg,
        #1565C0,
        #1976D2
    );

    color:#ffffff;

    padding:16px 22px;

    font-size:18px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

}


/* ==========================================================
   BODY PANEL
========================================================== */

.response-content{

    padding:28px;

    font-size:16px;

    line-height:1.9;

    color:#444;

    background:#ffffff;

}


/* ==========================================================
   JUDUL JAWABAN
========================================================== */

.response-content h3{

    color:#1565C0;

    font-size:24px;

    margin-bottom:15px;

}


/* ==========================================================
   PARAGRAF
========================================================== */

.response-content p{

    margin-bottom:18px;

}


/* ==========================================================
   BOX INFORMASI
========================================================== */

.response-info{

    background:#F5F9FF;

    border-left:5px solid #1565C0;

    padding:18px;

    margin-top:25px;

    border-radius:10px;

}


/* ==========================================================
   LABEL
========================================================== */

.response-label{

    font-weight:700;

    color:#1565C0;

}


/* ==========================================================
   ANIMASI MUNCUL
========================================================== */

.ai-response.show{

    display:block;

    animation:responseFade .45s ease;

}


@keyframes responseFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   ACTION AREA
========================================================== */

.response-action{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-top:30px;

    flex-wrap:wrap;

}


/* ==========================================================
   BUTTON
========================================================== */

.response-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    transition:.30s;

    cursor:pointer;

}


/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.response-primary{

    background:#1565C0;

    color:#ffffff;

}

.response-primary:hover{

    background:#0D47A1;

    transform:translateY(-2px);

}


/* ==========================================================
   SECONDARY BUTTON
========================================================== */

.response-secondary{

    background:#F4F7FB;

    color:#1565C0;

    border:1px solid #D9E4F2;

}

.response-secondary:hover{

    background:#E9F1FD;

}


/* ==========================================================
   METADATA
========================================================== */

.response-meta{

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid #E6ECF3;

}


/* ==========================================================
   META ITEM
========================================================== */

.meta-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

    color:#555;

    font-size:15px;

}

.meta-item i{

    color:#1565C0;

    font-size:18px;

    margin-top:2px;

}


/* ==========================================================
   META LABEL
========================================================== */

.meta-label{

    font-weight:700;

    color:#1565C0;

}


/* ==========================================================
   UPDATE DATE
========================================================== */

.response-update{

    color:#777;

    font-size:14px;

}


/* ==========================================================
   SOURCE BOX
========================================================== */

.response-source{

    background:#F8FBFF;

    border-left:4px solid #1565C0;

    padding:15px 18px;

    border-radius:10px;

    margin-top:20px;

}


/* ==========================================================
   ICON
========================================================== */

.response-content i{

    color:#1565C0;

}


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

@media(max-width:768px){

.response-action{

    flex-direction:column;

}

.response-button{

    width:100%;

    justify-content:center;

}

.meta-item{

    font-size:14px;

}

}