/* ============================================================================
   AJOU MBA — AI 컨설턴트
   ---------------------------------------------------------------------------
   · 발주사 데모(/mba/)의 챗봇 UI를 최종 퍼블 팔레트(style.css)에 맞춰 이식
   · 색상은 style.css 의 CSS 변수를 그대로 사용한다 (네이비 → --blue-900 계열)
   · style.css 는 퍼블 원본을 유지하기 위해 이 파일로 분리
============================================================================ */

/* ---------- 패널 ---------- */
.ai-panel{
  position:fixed; z-index:950;
  left:10px; right:10px; bottom:10px; top:64px;
  background:var(--white); border:1px solid var(--gray-300); border-radius:16px;
  overflow:hidden; display:none; flex-direction:column;
  box-shadow:0 24px 60px rgba(5,46,84,.30);
}
.ai-panel.is-open{display:flex}

/* ---------- 헤더 ---------- */
.ai-head{
  background:var(--blue-900); color:#fff;
  padding:14px 16px; display:flex; align-items:center; gap:10px; flex:none;
}
.ai-head__dot{width:8px;height:8px;border-radius:50%;background:#4AD295;flex:none}
/* min-width:0 이 없으면 긴 안내문구가 줄어들지 않아 좁은 화면에서 닫기 버튼이 밀려난다 */
.ai-head__txt{min-width:0;flex:1}
.ai-head h2{margin:0;font-size:14px;font-weight:800;letter-spacing:-.01em}
.ai-head p{margin:2px 0 0;font-size:11px;color:rgba(255,255,255,.62)}
.ai-head__x{
  flex:none; margin-left:auto; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.72); font-size:22px; line-height:1; padding:4px 6px;
}
.ai-head__x:hover{color:#fff}

/* ---------- 대화 로그 ---------- */
.ai-log{flex:1;overflow-y:auto;padding:16px 14px;background:var(--cream-2);-webkit-overflow-scrolling:touch}
.ai-msg{display:flex;margin-bottom:12px}
.ai-msg__bubble{
  max-width:82%; padding:11px 14px; border-radius:14px;
  font-size:13.5px; line-height:1.65; white-space:pre-line;
}
.ai-msg--bot .ai-msg__bubble{
  background:var(--white); border:1px solid var(--gray-300);
  border-top-left-radius:4px; color:var(--ink);
}
.ai-msg--me{justify-content:flex-end}
.ai-msg--me .ai-msg__bubble{background:var(--blue-600);color:#fff;border-top-right-radius:4px}
.ai-msg__bubble b{color:var(--blue-700);font-weight:800}
.ai-msg--me .ai-msg__bubble b{color:#fff}

/* ---------- 타이핑 인디케이터 ---------- */
.ai-msg--typing .ai-msg__bubble{display:flex;gap:4px;align-items:center;padding:14px}
.ai-msg--typing i{width:6px;height:6px;border-radius:50%;background:#B6BFCC;animation:aiblink 1.2s infinite}
.ai-msg--typing i:nth-child(2){animation-delay:.18s}
.ai-msg--typing i:nth-child(3){animation-delay:.36s}
@keyframes aiblink{
  0%,60%,100%{opacity:.28;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

/* ---------- 답변에 딸린 액션 버튼 ---------- */
.ai-act{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px}
.ai-act button{
  background:var(--blue-700); color:#fff; border:0; border-radius:6px; cursor:pointer;
  padding:8px 13px; font-family:inherit; font-size:12px; font-weight:700;
}
.ai-act button:hover{background:var(--blue-600)}

/* ---------- 추천 질문 칩 ---------- */
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;background:var(--cream-2);flex:none}
.ai-chips button{
  background:var(--white); border:1px solid var(--gray-300); border-radius:100px; cursor:pointer;
  padding:7px 12px; font-family:inherit; font-size:12px; font-weight:600; color:var(--gray-600);
  transition:border-color .2s, color .2s;
}
.ai-chips button:hover{border-color:var(--gold);color:var(--blue-700)}

/* ---------- 입력 폼 ---------- */
.ai-form{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--gray-300);background:var(--white);flex:none}
.ai-form input{
  flex:1; min-width:0; padding:11px 13px;
  border:1px solid var(--gray-300); border-radius:100px;
  font-family:inherit; font-size:13.5px; background:var(--cream-2); color:var(--ink);
}
.ai-form input:focus{outline:none;border-color:var(--gold);background:var(--white)}
.ai-form button{
  flex:none; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--gold); color:#fff; font-size:16px;
}
.ai-form button:hover{background:var(--gold-ink)}
.ai-form button:disabled{opacity:.5;cursor:default}
.ai-note{font-size:10.5px;color:var(--gray-600);text-align:center;padding:0 12px 10px;background:var(--white);flex:none}

/* ---------- 데스크톱 ---------- */
@media (min-width:760px){
  .ai-panel{left:auto;top:auto;right:20px;bottom:24px;width:382px;height:min(620px,calc(100vh - 120px))}
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion:reduce){
  .ai-msg--typing i{animation:none}
}