/* Chat widget styles (simple KakaoTalk-like bubbles) */
:root{
  --chat-bg:#ffffff;
  --chat-border:#e6eef6;
  --chat-self:#dcf8c6;
  --chat-other:#ffffff;
}
.chat-floating-btn{
  position:relative; /* positioned within the wrapper so label moves together */
  width:56px;
  height:56px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffb86b,#ff9730);
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}







/* notification state: red dot and subtle pulse animation */
/* wrapper to keep label and button together */
.chat-floating-wrap{position:fixed; right:18px; bottom:var(--chat-bottom,18px); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1200}
.chat-floating-btn .chat-btn-icon{display:inline-block}
.chat-floating-btn .chat-btn-dot{position:absolute; right:8px; top:8px; width:12px; height:12px; background:#ff3b30; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.3); display:none}

.chat-floating-wrap {display: none;}
/* .chat-floating-btn.notify .chat-btn-dot{display:block} */
/* .chat-floating-btn.notify{animation: chat-pulse 1s ease-in-out infinite} */
@keyframes chat-pulse{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* floating label that appears above the button */
.chat-floating-label{background:#ff3b30; color:#fff; padding:6px 10px; border-radius:12px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,0.12); display:none; z-index:1250}
.chat-floating-label[aria-hidden="true"]{display:none}
.chat-floating-label[aria-hidden="false"]{display:block}
.chat-modal{display:none; position:fixed; inset:0; z-index:1100}
.chat-modal .chat-modal-overlay{position:absolute; inset:0; background:rgba(0,0,0,0.3)}
.chat-panel{position:fixed; right:18px; bottom:calc(var(--chat-bottom, 18px) + 68px); width:320px;
  /* 더 긴 기본 최소 높이, 단 화면이 너무 작으면 뷰포트 기준으로 줄임 */
  min-height: min(420px, 85vh);
  /* 최대 높이를 뷰포트 비율로 제한하여 내부에서 스크롤이 동작하도록 함 */
  max-height: 75vh;
  background:var(--chat-bg); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.12); overflow:hidden; display:flex; flex-direction:column}
.chat-header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--chat-border)}
.chat-title{font-weight:600}
.chat-body{padding:12px; /* 세로 스크롤만 허용, 수평 스크롤 방지 */
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:8px; background:linear-gradient(180deg,#f6fbff,#fff); flex:1 1 auto; min-height:160px}
.chat-msg{max-width:78%; padding:8px 10px; border-radius:12px; font-size:14px; line-height:1.3}
.chat-msg-self{align-self:flex-end; background:var(--chat-self); border-bottom-right-radius:6px}
.chat-msg-other{align-self:flex-start; background:var(--chat-other); border-bottom-left-radius:6px}
.chat-form{display:flex; flex-direction:column; gap:8px; padding:10px; border-top:1px solid var(--chat-border)}
.chat-form .chat-form-row{display:flex; gap:8px; align-items:center}
.chat-form .chat-form-name input{width:100%; padding:8px 10px; border-radius:8px; border:1px solid #e6eef6}
.chat-form .chat-form-message input{flex:1; padding:8px 10px; border-radius:8px; border:1px solid #e6eef6}
.chat-form .chat-form-message button{flex:0 0 auto}
.chat-form .chat-form-message textarea{flex:1; padding:8px 10px; border-radius:8px; border:1px solid #e6eef6; resize:vertical; min-height:44px; max-height:160px}

/* Hide scrollbar but keep scrolling: WebKit */
.chat-form .chat-form-message textarea::-webkit-scrollbar{ display:none; }
/* Firefox */
.chat-form .chat-form-message textarea{ scrollbar-width: none; }
.chat-form .chat-form-message .chat-send-btn{padding:8px 10px; font-size:13px; height:36px; align-self:flex-end}
.chat-form .chat-form-message .chat-send-btn .chat-send-icon{display:inline-block}
.chat-form .chat-form-message .chat-send-btn .chat-send-spinner{
  display:inline-block; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.2); border-top-color:rgba(255,255,255,0.8); box-sizing:border-box;
  animation: chat-spin 0.8s linear infinite;
}
@keyframes chat-spin{ to { transform: rotate(360deg); } }

/* mobile: make send button larger touch area while keeping icon small */
@media (max-width:420px){
  .chat-form .chat-form-message .chat-send-btn{padding:10px; height:44px; min-width:44px}
  .chat-form .chat-form-message .chat-send-btn .chat-send-icon{font-size:16px}
}

@media (max-width:420px){
  .chat-panel{right:12px; left:12px; bottom:72px; width:auto;
    /* 모바일에서는 너무 큰 최소 높이를 피하고 뷰포트 기준으로 제한 */
    min-height: min(320px, 80vh); max-height:78vh}
  .chat-floating-wrap{right:12px; bottom:12px}
}

/* new message indicator */
.chat-new-indicator{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:86px; /* 위에 위치: 채팅 패널의 하단 입력 위에 표시 */
  padding:8px 12px; background:#ffeb3b; color:#111; border-radius:20px; border:none; box-shadow:0 4px 10px rgba(0,0,0,0.12);
  font-weight:600; display:none; z-index:1300; cursor:pointer;
}

@media (max-width:420px){
  .chat-new-indicator{ bottom:100px }
}

/* KakaoTalk floating image link (moved from inline styles in JS) */
#kakaotalk-chat-wrap.kakaotalk-floating-wrap{ 
  position:fixed;
  right:20px;
  /* bottom:var(--chat-bottom,18px); */
  bottom: 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  z-index:1200;
}
#kakaotalk-chat-link{ display:inline-block; padding:0; border:0; background:transparent; }
#kakaotalk-chat-link img.kakaotalk-img, #kakaotalk-chat-link img#kakaotalk-chat-img{
  display:block;
  width:48px;
  height:auto;
  border:0;
  background:transparent;
  cursor:pointer;
}
#kakaotalk-chat-link:focus{ outline:2px solid rgba(0,0,0,0.08); border-radius:6px; }

@media (max-width:420px){
  #kakaotalk-chat-wrap.kakaotalk-floating-wrap{ right:12px; bottom:12px }
}

/* Hover label and rollover effect for KakaoTalk floating image */
#kakaotalk-chat-wrap::after{
  content: "카톡 문의";
  position:absolute;
  bottom: calc(100% + 8px);
  left:50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(0,0,0,0.85);
  color:#fff;
  padding:6px 10px;
  border-radius:12px;
  font-size:13px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition: transform .18s ease, opacity .18s ease;
  z-index:1250;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
#kakaotalk-chat-wrap:hover::after,
#kakaotalk-chat-wrap:focus-within::after{
  transform: translateX(-50%) translateY(0);
  opacity:1;
}

/* image rollover transform + shadow */
#kakaotalk-chat-link img.kakaotalk-img{ transition: transform .18s ease, box-shadow .18s ease; will-change: transform; }
#kakaotalk-chat-wrap:hover img.kakaotalk-img,
#kakaotalk-chat-link:focus img.kakaotalk-img{
  transform: translateY(-4px) scale(1.06);
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  #kakaotalk-chat-wrap::after{ transition:none; }
  #kakaotalk-chat-link img.kakaotalk-img{ transition:none; }
}