/* HKC Copilot — chat widget. Self-contained, scoped under .hkc-cb* to avoid
   clashing with the prototype's design system. */

.hkc-cb-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9998;
  display: flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 18px 0 15px; border: 0; border-radius: 26px;
  background: #0b3d66; color: #eef4fa; cursor: pointer;
  font-family: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif; font-weight: 600; font-size: 15px;
  box-shadow: 0 6px 22px rgba(11,61,102,.38); transition: transform .12s, box-shadow .12s;
}
.hkc-cb-fab:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(11,61,102,.46); }
.hkc-cb-fab svg { width: 22px; height: 22px; }
.hkc-cb-fab.hidden { display: none; }

.hkc-cb-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 9999;
  width: 400px; max-width: calc(100vw - 32px);
  height: 620px; max-height: calc(100vh - 44px);
  display: none; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(16,24,40,.28), 0 2px 8px rgba(16,24,40,.12);
  font-family: "Barlow", system-ui, sans-serif;
}
.hkc-cb-panel.open { display: flex; }

.hkc-cb-head {
  flex: none; display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; background: linear-gradient(135deg,#0b3d66,#14507f); color: #eef4fa;
}
.hkc-cb-head .badge {
  width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.hkc-cb-head .badge svg { width: 20px; height: 20px; }
.hkc-cb-head .t { flex: 1; min-width: 0; }
.hkc-cb-head .t b { font-family: "Barlow Semi Condensed","Barlow",sans-serif; font-weight: 600; font-size: 16px; display: block; }
.hkc-cb-head .t span { font-size: 11px; opacity: .8; }
.hkc-cb-head .x { background: transparent; border: 0; color: #eef4fa; cursor: pointer; opacity: .8; padding: 6px; border-radius: 6px; }
.hkc-cb-head .x:hover { background: rgba(255,255,255,.12); opacity: 1; }

.hkc-cb-log { flex: 1; overflow-y: auto; padding: 16px; background: #f4f6f9; display: flex; flex-direction: column; gap: 12px; }
.hkc-cb-msg { max-width: 88%; font-size: 14px; line-height: 1.5; }
.hkc-cb-msg.user { align-self: flex-end; background: #1f7ac0; color: #fff; padding: 9px 13px; border-radius: 14px 14px 3px 14px; }
.hkc-cb-msg.bot { align-self: flex-start; background: #fff; color: #1c2530; padding: 11px 14px; border-radius: 14px 14px 14px 3px; border: 1px solid #e4e9f0; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.hkc-cb-msg.bot.err { background: #fdecec; border-color: #f3c9c9; color: #8a2b2b; }

/* markdown inside bot messages */
.hkc-cb-msg.bot h2, .hkc-cb-msg.bot h3 { font-family: "Barlow Semi Condensed","Barlow",sans-serif; margin: 10px 0 4px; font-size: 15px; color: #0b3d66; }
.hkc-cb-msg.bot p { margin: 0 0 8px; }
.hkc-cb-msg.bot ul, .hkc-cb-msg.bot ol { margin: 4px 0 8px; padding-left: 20px; }
.hkc-cb-msg.bot li { margin: 2px 0; }
.hkc-cb-msg.bot code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.hkc-cb-msg.bot strong { color: #14507f; }
.hkc-cb-msg.bot table { border-collapse: collapse; width: 100%; margin: 6px 0 8px; font-size: 12.5px; }
.hkc-cb-msg.bot th { background: #0b3d66; color: #fff; text-align: left; padding: 5px 8px; }
.hkc-cb-msg.bot td { padding: 5px 8px; border-bottom: 1px solid #e4e9f0; }
.hkc-cb-msg.bot > :first-child { margin-top: 0; }
.hkc-cb-msg.bot > :last-child { margin-bottom: 0; }

.hkc-cb-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid #e4e9f0; border-radius: 14px; }
.hkc-cb-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9fb0c2; animation: hkcbob 1s infinite; }
.hkc-cb-typing span:nth-child(2) { animation-delay: .15s; }
.hkc-cb-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hkcbob { 0%,60%,100% { transform: translateY(0); opacity:.5 } 30% { transform: translateY(-4px); opacity:1 } }

.hkc-cb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hkc-cb-chip {
  font-size: 12.5px; color: #14507f; background: #fff; border: 1px solid #cfe0ef;
  padding: 6px 11px; border-radius: 14px; cursor: pointer; text-align: left;
  font-family: "Barlow", sans-serif;
}
.hkc-cb-chip:hover { background: #eaf1f8; }

.hkc-cb-foot { flex: none; display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e4e9f0; background: #fff; }
.hkc-cb-foot textarea {
  flex: 1; resize: none; border: 1px solid #d7dee7; border-radius: 10px; padding: 9px 11px;
  font-family: "Barlow", sans-serif; font-size: 14px; line-height: 1.4; max-height: 110px; outline: none;
}
.hkc-cb-foot textarea:focus { border-color: #1f7ac0; }
.hkc-cb-send { flex: none; width: 42px; border: 0; border-radius: 10px; background: #0b3d66; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hkc-cb-send:disabled { opacity: .5; cursor: default; }
.hkc-cb-send svg { width: 20px; height: 20px; }
.hkc-cb-disclaimer { font-size: 10px; color: #8a93a0; text-align: center; padding: 0 12px 8px; background: #fff; }

@media (max-width: 480px) {
  .hkc-cb-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); }
}