/* =========================================
   FirmData Chatbot - First Screen UI
   /api/chatbot/css/chatbot.css
========================================= */

:root{
  --cb-primary:#1066D6;
  --cb-bg:#F5F7FB;
  --cb-text:#1F2937;
  --cb-muted:#6B7280;
  --cb-card:#FFFFFF;
  --cb-shadow: 0 14px 40px rgba(0,0,0,.18);
  --cb-radius: 16px;
}

#fd-chatbot{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Pretendard, Arial, sans-serif;
}

.cb-fab{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;

  background: var(--cb-primary);
  color:#fff;
  padding:12px 14px;
  border-radius:999px;
  box-shadow: 0 10px 26px rgba(16,102,214,.35);
}

.cb-fab .dot{
  width:10px; height:10px;
  border-radius:50%;
  background:#35D07F;
  box-shadow:0 0 0 4px rgba(53,208,127,.18);
}

.cb-fab .label{
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
}

.cb-window{
  width:360px;
  height:540px;
  background: var(--cb-card);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  overflow:hidden;

  position:absolute;
  right:0;
  bottom:58px;

  display:none;
  flex-direction:column;
}

.cb-window.show{ display:flex; }

.cb-header{
  background: linear-gradient(135deg, #0F5FD0 0%, #1A7BFF 100%);
  color:#fff;
  padding:14px 14px 12px 14px;
}

.cb-header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.cb-title{
  font-weight:800;
  font-size:15px;
  letter-spacing:.2px;
}

.cb-close{
  cursor:pointer;
  font-weight:900;
  font-size:18px;
  line-height:1;
  opacity:.95;
}

.cb-sub{
  margin-top:6px;
  font-size:12px;
  opacity:.92;
}

.cb-body{
  flex:1;
  background: var(--cb-bg);
  padding:14px;
  overflow:auto;
}

.cb-bubble{
  background:#fff;
  border-radius: 14px;
  padding:12px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  color: var(--cb-text);
  font-size:14px;
  line-height:1.45;
  max-width: 92%;
}

.cb-bubble + .cb-bubble{ margin-top:10px; }

.cb-bubble.bot{ margin-right:auto; }
.cb-bubble.user{
  margin-left:auto;
  background: var(--cb-primary);
  color:#fff;
}

.cb-section{
  margin-top:12px;
}

.cb-section-title{
  font-size:12px;
  color: var(--cb-muted);
  margin:10px 2px 8px 2px;
}

.cb-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.cb-card-btn{
  appearance:none;
  border: 1px solid rgba(16,102,214,.12);
  background:#fff;
  border-radius: 14px;
  padding:12px 12px;
  cursor:pointer;
  text-align:left;

  display:flex;
  gap:10px;
  align-items:flex-start;

  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

.cb-card-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(16,102,214,.12);
  border-color: rgba(16,102,214,.26);
}

.cb-ico{
  width:34px; height:34px;
  border-radius: 10px;
  background: rgba(16,102,214,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.cb-card-txt{
  flex:1;
}

.cb-card-txt .h{
  font-weight:800;
  font-size:13px;
  color: var(--cb-text);
}
.cb-card-txt .p{
  margin-top:4px;
  font-size:12px;
  color: var(--cb-muted);
  line-height:1.35;
}

.cb-footer{
  padding:12px 14px;
  background:#fff;
  border-top: 1px solid rgba(0,0,0,.06);
}

.cb-note{
  font-size:11px;
  color: var(--cb-muted);
  line-height:1.35;
}

@media (max-width: 520px){
  #fd-chatbot{ right:12px; bottom:12px; }
  .cb-window{
    width: calc(100vw - 24px);
    height: 72vh;
    bottom:60px;
  }
  .cb-grid{ grid-template-columns: 1fr; }
}

/* A-flow 버튼을 조금 더 컴팩트하게 */
.cb-card-btn.cb-mini{
  padding:10px 10px;
}
.cb-card-btn.cb-mini .cb-ico{
  width:32px; height:32px;
  border-radius:10px;
}
.cb-card-btn.cb-mini .cb-card-txt .p{
  display:none;
}