/* Floating AI Chat Widget — Figma Match */
#floating-chat-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #EF5000, #E72C0E);
  color: white; border: 3px solid white;
  font-size: 1.4rem; cursor: pointer;
  box-shadow: 0 8px 30px rgba(231,44,14,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
}
#floating-chat-btn:hover { transform: scale(1.1); }

#floating-chat-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.3);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s;
}
#floating-chat-overlay.open { opacity: 1; visibility: visible; }

/* Drawer — lebar 720px */
#floating-chat-drawer {
  position: fixed; bottom: 90px; right: 24px; z-index: 9999;
  width: 720px; height: 540px; max-height: calc(100vh - 120px);
  background: #F0F2F5; border-radius: 16px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#floating-chat-drawer.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* Body: sidebar + chat */
.fc-body { display: flex; flex: 1; overflow: hidden; }

/* ===== SIDEBAR ===== */
.fc-sidebar {
  width: 200px; background: white; border-right: 1px solid #E9ECEF;
  display: flex; flex-direction: column; flex-shrink: 0;
}
.fc-sidebar .fc-sheader {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #E9ECEF;
}
.fc-sidebar .fc-sheader .collapse-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: #F0F2F5; cursor: pointer; color: #6C757D;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.fc-sidebar .fc-snav {
  padding: 8px 0; display: flex; flex-direction: column;
}
.fc-sidebar .fc-snav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  color: #495057; font-size: 0.85rem; font-weight: 500;
  transition: all 0.15s; border-left: 3px solid transparent;
}
.fc-sidebar .fc-snav-item i { font-size: 1rem; width: 20px; text-align: center; color: #ADB5BD; }
.fc-sidebar .fc-snav-item:hover { background: #F8F9FA; }
.fc-sidebar .fc-snav-item.active { background: rgba(255,140,66,0.06); color: #FF8C42; border-left-color: #FF8C42; }
.fc-sidebar .fc-snav-item.active i { color: #FF8C42; }

/* ===== CHAT MAIN ===== */
.fc-main { flex: 1; display: flex; flex-direction: column; background: #F0F2F5; }

/* Header */
.fc-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: white; border-bottom: 1px solid #E9ECEF; flex-shrink: 0;
}
.fc-header .fc-avatar { width: 30px; height: 30px; flex-shrink: 0; }
.fc-header .fc-avatar svg { width: 100%; height: 100%; }
.fc-header .fc-title { font-size: 0.85rem; font-weight: 600; flex: 1; }
.fc-header .fc-actions { display: flex; gap: 6px; }
.fc-header .fc-actions button {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: #F0F2F5; cursor: pointer; color: #6C757D;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: all 0.15s;
}
.fc-header .fc-actions button:hover { background: #E9ECEF; }
.fc-header .fc-actions .fc-close { background: #343A40; color: white; }
.fc-header .fc-actions .fc-close:hover { background: #212529; }

/* Messages */
.fc-msgs {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.fc-msgs::-webkit-scrollbar { width: 4px; }
.fc-msgs::-webkit-scrollbar-thumb { background: #DEE2E6; border-radius: 2px; }

.fm { display: flex; gap: 8px; max-width: 88%; }
.fm.ai { align-self: flex-start; }
.fm.user { align-self: flex-end; flex-direction: row-reverse; }

.fm .fa {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
}
.fm.ai .fa { background: linear-gradient(135deg, #EF5000, #E72C0E); color: white; }
.fm.user .fa { background: #343A40; color: white; }

.fm .fb {
  padding: 9px 13px; border-radius: 12px; font-size: 0.82rem; line-height: 1.5;
}
.fm.ai .fb { background: white; border: 1px solid #E9ECEF; border-bottom-left-radius: 4px; color: #242423; }
.fm.user .fb { background: #FF8C42; color: white; border-bottom-right-radius: 4px; }
.fm .ft { font-size: 0.6rem; opacity: 0.6; margin-top: 3px; display: block; }
.fm.user .ft { text-align: right; }

/* Course card di dalam chat */
.fc-course-card {
  background: white; border: 1px solid #E9ECEF; border-radius: 10px;
  padding: 12px; margin-top: 6px;
}
.fc-course-card .fc-cc-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 3px; }
.fc-course-card .fc-cc-desc { font-size: 0.72rem; color: #6C757D; line-height: 1.4; margin-bottom: 6px; }
.fc-course-card .fc-cc-date { font-size: 0.7rem; color: #6C757D; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.fc-course-card .fc-cc-meta { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: #6C757D; margin-bottom: 8px; }
.fc-course-card .fc-cc-meta .dot { width: 3px; height: 3px; background: #CED4DA; border-radius: 50%; }
.fc-course-card .fc-cc-tag {
  display: inline-block; padding: 2px 8px;
  background: rgba(255,140,66,0.1); color: #FF8C42;
  border-radius: 999px; font-size: 0.65rem; font-weight: 600;
}

/* Typing */
.fc-typing { display: none; align-self: flex-start; gap: 8px; padding: 0 14px; }
.fc-typing.show { display: flex; }
.fc-typing .td { display: flex; gap: 3px; padding: 9px 13px; background: white; border: 1px solid #E9ECEF; border-radius: 12px; border-bottom-left-radius: 4px; }
.fc-typing .td span { width: 6px; height: 6px; border-radius: 50%; background: #CED4DA; animation: b 1.2s infinite; }
.fc-typing .td span:nth-child(2) { animation-delay: 0.2s; }
.fc-typing .td span:nth-child(3) { animation-delay: 0.4s; }
@keyframes b { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }

/* Input */
.fc-input { padding: 8px 14px 12px; flex-shrink: 0; }
.fc-input .ir {
  display: flex; align-items: flex-end; gap: 6px;
  background: white; border: 1.5px solid #DEE2E6; border-radius: 12px;
  padding: 6px 8px 6px 14px; transition: border-color 0.2s;
}
.fc-input .ir:focus-within { border-color: #FF8C42; }
.fc-input .ir textarea {
  flex: 1; border: none; outline: none; font-family: 'Inter', sans-serif;
  font-size: 0.82rem; resize: none; max-height: 80px; min-height: 20px;
  padding: 3px 0; background: transparent; color: #242423;
}
.fc-input .ir textarea::placeholder { color: #ADB5BD; }
.fc-input .ir .ia { display: flex; gap: 4px; }
.fc-input .ir .ia button {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer; color: #ADB5BD;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: all 0.15s;
}
.fc-input .ir .ia button:hover { background: #F8F9FA; color: #6C757D; }
.fc-input .ir .ia .sbtn { background: #E72C0E; color: white; }
.fc-input .ir .ia .sbtn:hover { background: #c4260a; }
.fc-input .ir .ia .sbtn:disabled { background: #DEE2E6; cursor: not-allowed; }

@media (max-width: 768px) {
  #floating-chat-btn { width: 52px; height: 52px; bottom: 20px; right: 20px; font-size: 1.2rem; }
  #floating-chat-drawer { width: calc(100vw - 32px); right: 16px; }
  .fc-sidebar { width: 48px; }
  .fc-sidebar .fc-snav-item span { display: none; }
  .fc-sidebar .fc-snav-item { justify-content: center; padding: 10px; }
  .fc-sidebar .fc-sheader .collapse-btn { display: none; }
  .fm { max-width: 90%; }
}
@media (max-width: 480px) {
  #floating-chat-drawer { width: 100vw; right: 0; bottom: 0; max-height: 100vh; border-radius: 12px 12px 0 0; }
  .fc-sidebar { display: none; }
}