/* Miri24 Mini Chatbot – lightweight, no framework */
:root {
  --cb-bg: #ffffff;
  --cb-text: #111827;
  --cb-primary: #2563eb;
  --cb-border: #e5e7eb;
  --cb-shadow: 0 10px 30px rgba(0,0,0,.15);
}

#miri-chatbot-launcher {
  position: fixed; right: 20px; bottom: 20px;
  width: 56px; height: 56px; border-radius: 9999px;
  background: var(--cb-primary); color: #fff; border: 0;
  box-shadow: var(--cb-shadow); cursor: pointer; z-index: 9999;
  display: grid; place-items: center; font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}
#miri-chatbot-launcher:active { transform: translateY(1px); }

#miri-chatbot-panel {
  position: fixed; right: 20px; bottom: 86px; width: 360px; max-width: calc(100vw - 32px);
  background: var(--cb-bg); color: var(--cb-text); border: 1px solid var(--cb-border);
  border-radius: 12px; box-shadow: var(--cb-shadow); overflow: hidden; z-index: 9999; display: none;
  max-height: 72vh; display: none; flex-direction: column;
}
#miri-chatbot-panel.open { display: flex; }

.miri-chatbot-header{
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
  background: #f8fafc; border-bottom: 1px solid var(--cb-border);
}
.miri-chatbot-title{ font-weight:700; font-size:14px; }
.miri-chatbot-close{ background:transparent;border:0;cursor:pointer;font-size:18px; }

.miri-chatbot-body{
  padding: 12px; overflow:auto; gap: 8px; display:flex; flex-direction:column; flex: 1 1 auto;
}
.miri-msg{ max-width: 80%; padding:10px 12px; border-radius: 12px; border:1px solid var(--cb-border); }
.miri-msg.bot{ background:#f3f4f6; align-self:flex-start; }
.miri-msg.user{ background:#e0ecff; border-color:#cfe0ff; align-self:flex-end; }

.miri-chatbot-input{
  border-top: 1px solid var(--cb-border); padding: 10px; background:#fff; display:flex; gap:8px;
}
.miri-chatbot-input textarea{
  flex:1 1 auto; resize:none; border:1px solid var(--cb-border); border-radius:10px; padding:10px;
  max-height: 120px; font: 400 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}
.miri-chatbot-input button{
  background: var(--cb-primary); color:#fff; border:0; border-radius:10px; padding: 10px 14px; font-weight:600; cursor:pointer;
}
@media (max-width: 480px){
  #miri-chatbot-panel{ right: 16px; left: 16px; width: auto; }
}
/* === Launcher size & label only (no other changes) === */
#miri-chatbot-launcher{
  width: 72px !important;
  height: 72px !important;
  font-size: 26px !important;   /* 이모지(💬)도 같이 커짐 */
  z-index: 2147483647 !important;
}

/* 버튼 왼쪽에 라벨 표시 */
#miri-chatbot-launcher::after{
  content: "미리24 chatbot";
  position: absolute;
  right: 100%;           /* 버튼의 왼쪽으로 붙이기 */
  margin-right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #2563eb;   /* 사이트 기본 파랑 */
  color: #fff;
  padding: 8px 12px;
  border-radius: 9999px;
  font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  z-index: 2147483647;
}

/* 모바일에서는 라벨 숨김(아이콘만 크게) — 원하면 지워도 됨 */
@media (max-width: 640px){
  #miri-chatbot-launcher::after{ display: none; }
}
/* === Launcher: emoji → 사진 (CSS-only) === */
#miri-chatbot-launcher{
  /* 이 크기는 원하는 대로 */
  width: 72px !important;
  height: 72px !important;

  /* 이모지(💬) 글자 숨기기 */
  font-size: 0 !important;
  color: transparent !important;

  /* 혹시 다른 CSS가 덮어써도 위치 고정 보장 */
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 2147483647 !important;

  /* 배경/테두리 느낌 유지(원하면 조절) */
  background: transparent !important;
  border: 0 !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.15) !important;

  /* ::before가 버튼을 채우도록 기준 블록 */
  overflow: hidden;  /* 가장자리를 둥글게 잘라줌 */
}

#miri-chatbot-launcher::before{
  content: "";
  position: absolute;
  inset: 0;                  /* 버튼 전체 채우기 */
  border-radius: inherit;    /* 둥근 원 유지 */
  background: url("/static/images/chat/agent.png") center/cover no-repeat;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);  /* 하얀 링(옵션) */
}

/* 라벨을 쓰는 중이라면 그대로 유지됨.
   위치를 오른쪽으로 바꾸려면 right:100% → left:100% 로 바꿔도 OK */
/* 라벨이 안 보이는 현상 fix: 이미지 마스킹은 ::before가 하고,
   버튼 자체는 overflow를 열어 라벨이 바깥으로 나오게 함 */
#miri-chatbot-launcher{
  overflow: visible !important;             /* ← 핵심 */
}

/* 라벨 스타일 (이전과 동일하게 왼쪽에 표시) */
#miri-chatbot-launcher::after{
  content: "미리24 chatbot";
  position: absolute;
  right: 100%;
  margin-right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #2563eb;
  color: #fff;
  padding: 8px 12px;
  border-radius: 9999px;
  font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  pointer-events: none;                      /* 라벨이 클릭 막지 않게 */
  z-index: 2147483647;
}

/* (선택) 모바일에선 라벨 숨기기 */
@media (max-width: 640px){
  #miri-chatbot-launcher::after{ display: none; }
}