/*
 * PKKMB_AI_GUIDE_UI_C52B
 * Conversational UI enhancement.
 */

.pkkmb-ai-messages{
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  padding:12px 13px 18px;
}

.pkkmb-ai-msg{
  display:flex;
  width:100%;
}

.pkkmb-ai-msg.user{
  justify-content:flex-end;
}

.pkkmb-ai-msg.assistant{
  justify-content:flex-start;
}

.pkkmb-ai-bubble{
  max-width:86%;
  border-radius:16px;
  padding:11px 13px;
  font-size:12px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.pkkmb-ai-msg.user .pkkmb-ai-bubble{
  background:linear-gradient(135deg,#087c7d,#086a73);
  color:#fff;
  border-bottom-right-radius:5px;
  box-shadow:0 5px 15px rgba(8,124,125,.17);
}

.pkkmb-ai-msg.assistant .pkkmb-ai-bubble{
  background:#fff;
  color:#263b43;
  border:1px solid #e1e8ec;
  border-bottom-left-radius:5px;
  box-shadow:0 4px 15px rgba(16,24,40,.045);
}

.pkkmb-ai-answer-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:5px;
  font-weight:700;
  color:#075f67;
}

.pkkmb-ai-answer-text{
  white-space:pre-line;
}

.pkkmb-ai-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:9px;
}

.pkkmb-ai-meta-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 7px;
  border-radius:999px;
  background:#f0f8f7;
  color:#087477;
  font-size:10px;
  font-weight:600;
}

.pkkmb-ai-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}

.pkkmb-ai-action{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:31px;
  padding:6px 9px;
  border:1px solid #cfe0e2;
  border-radius:9px;
  background:#f8fbfb;
  color:#075f67;
  font-size:10.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}

.pkkmb-ai-action:hover{
  background:#eaf6f5;
  border-color:#9dc8c8;
  color:#075f67;
}

.pkkmb-ai-feedback{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid #eef2f4;
}

.pkkmb-ai-feedback-label{
  margin-right:2px;
  color:#98a2b3;
  font-size:9.5px;
}

.pkkmb-ai-feedback button{
  min-height:27px !important;
  padding:3px 7px;
  border:1px solid #e1e6ea;
  border-radius:8px;
  background:#fff;
  color:#667085;
  font-size:10px;
  cursor:pointer;
}

.pkkmb-ai-feedback button:hover,
.pkkmb-ai-feedback button.active{
  background:#eef8f7;
  border-color:#9dc8c8;
  color:#087c7d;
}

.pkkmb-ai-thinking{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:55px;
}

.pkkmb-ai-thinking i{
  width:6px;
  height:6px;
  display:block;
  border-radius:50%;
  background:#8aa4a8;
  animation:pkkmbAiDot 1.15s infinite ease-in-out;
}

.pkkmb-ai-thinking i:nth-child(2){
  animation-delay:.15s;
}

.pkkmb-ai-thinking i:nth-child(3){
  animation-delay:.30s;
}

@keyframes pkkmbAiDot{
  0%,60%,100%{
    transform:translateY(0);
    opacity:.45;
  }
  30%{
    transform:translateY(-4px);
    opacity:1;
  }
}

.pkkmb-ai-quick-pro{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 13px 10px;
}

.pkkmb-ai-quick-pro button{
  min-height:30px !important;
  padding:5px 9px;
  border:1px solid #d6e1e5;
  border-radius:999px;
  background:#fff;
  color:#52646c;
  font-size:9.5px;
  cursor:pointer;
}

.pkkmb-ai-quick-pro button:hover{
  background:#eff8f7;
  border-color:#acd0d0;
  color:#087c7d;
}

.pkkmb-ai-history-note{
  text-align:center;
  padding:3px 12px 7px;
  color:#98a2b3;
  font-size:8.5px;
}

@media(max-width:640px){
  .pkkmb-ai-bubble{
    max-width:91%;
  }
}


/*
 * PKKMB_AI_GUIDE_UI_C52B1
 * C5.1 -> C5.2B visual integration hotfix
 */

/* Conversation should consume the available chat body */
.pkkmb-ai-messages{
  flex:1 1 auto;
  min-height:0;
}

/*
 * C5.2B quick questions are the canonical quick-action row.
 */
.pkkmb-ai-quick-pro{
  flex:0 0 auto;
  border-top:1px solid #eef2f4;
  background:#fff;
  padding-top:9px;
}

/* Make actual conversation visually denser */
.pkkmb-ai-msg:first-child{
  margin-top:0;
}

.pkkmb-ai-msg:last-child{
  margin-bottom:0;
}


/* Mobile */
@media(max-width:640px){

  .pkkmb-ai-messages{
    padding:10px 11px 13px;
  }

  .pkkmb-ai-quick-pro{
    padding:8px 11px;
  }

}

/* =========================================================
   PKKMB_AI_GUIDE_UI_C52B2
   Legacy DOM Integration Fix
========================================================= */

.pkkmb-ai-messages{
    min-height:120px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.pkkmb-ai-msg.assistant .pkkmb-ai-bubble{
    width:auto;
}

.pkkmb-ai-welcome-bubble{
    margin-bottom:2px;
}

.pkkmb-ai-welcome-bubble .pkkmb-ai-answer-text{
    color:#334155;
}

.pkkmb-ai-legacy-hidden{
    display:none !important;
}

.pkkmb-ai-messages:empty::before{
    content:"Mulai percakapan dengan AI Guide PKKMB";
    display:block;
    text-align:center;
    color:#98A2B3;
    font-size:11px;
    padding:28px 12px;
}

/*
 * PKKMB_AI_GUIDE_UI_C52B3
 * Single Conversation Renderer
 */

.pkkmb-ai-messages{
    display:flex !important;
    flex-direction:column;
    justify-content:flex-start !important;
    gap:10px;
    min-height:0 !important;
    padding:12px 13px !important;
    overflow-y:auto;
    overflow-x:hidden;
}

.pkkmb-ai-msg{
    flex:0 0 auto;
}

.pkkmb-ai-msg.assistant{
    justify-content:flex-start;
}

.pkkmb-ai-msg.user{
    justify-content:flex-end;
}

/* Only one welcome is allowed */
.pkkmb-ai-msg[data-ai-welcome="1"] ~
.pkkmb-ai-msg[data-ai-welcome="1"]{
    display:none !important;
}

/* Legacy C5.1 presentation */
.pkkmb-ai-c51-hidden{
    display:none !important;
}

/* Quick actions belong below conversation */
.pkkmb-ai-quick-pro{
    position:relative;
    flex:0 0 auto;
    margin:0 !important;
    padding:9px 12px 10px !important;
    background:#fff;
    border-top:1px solid #edf1f3;
}

/* Keep composer stable */
.pkkmb-ai-messages + .pkkmb-ai-quick-pro{
    margin-top:auto !important;
}

@media(max-width:640px){
    .pkkmb-ai-messages{
        padding:10px 12px !important;
    }
}