/* ===== CHAT WIDGET ===== */

/* Widget wrapper — 닫힌 상태에서 클릭 이벤트 차단 */
.chat-widget {pointer-events:none;}
.chat-widget.open {pointer-events:none;}
.chat-widget.open .chat-modal {pointer-events:all;}

/* Modal */
.chat-modal {
  position:fixed;right:24px;bottom:100px;
  width:360px;height:min(82vh, 720px);
  background:#fff;border-radius:20px;
  box-shadow:0 8px 40px rgba(0,0,0,0.18);
  z-index:9997;
  display:flex;flex-direction:column;overflow:hidden;
  transform:scale(0.88) translateY(24px);opacity:0;pointer-events:none;
  transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1),opacity 0.2s;
  transform-origin:bottom right;
}
.chat-widget.open .chat-modal {
  transform:scale(1) translateY(0);opacity:1;pointer-events:all;
}

/* Modal Header */
.chat-modal-header {
  background:#1a3a6b;padding:14px 18px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.chat-modal-brand {display:flex;align-items:center;gap:8px;flex:1;}
.chat-modal-brand img {height:22px;width:auto;filter:brightness(0) invert(1);}
.chat-modal-brand-name {color:#fff;font-weight:700;font-size:0.9rem;font-family:'Montserrat',sans-serif;letter-spacing:0.02em;}
.chat-modal-close {
  background:none;border:none;color:rgba(255,255,255,0.6);
  cursor:pointer;padding:4px;line-height:1;transition:color 0.2s;
}
.chat-modal-close:hover {color:#fff;}
.chat-modal-close svg {width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}

/* Body */
.chat-modal-body {flex:1;overflow:hidden;position:relative;}
.chat-screen {
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity 0.18s;
}
.chat-screen.active {opacity:1;pointer-events:all;}

/* ── Home Screen ── */
.home-screen {padding:22px 20px 20px;overflow-y:auto;}
.home-welcome {margin-bottom:18px;}
.home-welcome h3 {font-size:1.05rem;font-weight:700;color:#1a1a1a;margin-bottom:7px;line-height:1.4;}
.home-welcome p {font-size:0.85rem;color:#555;line-height:1.65;}
.home-ophours {
  background:#f2f6fb;border-radius:12px;
  padding:13px 16px;margin-bottom:18px;
}
.home-ophours-title {
  font-size:0.75rem;font-weight:700;color:#1a3a6b;
  margin-bottom:7px;text-transform:uppercase;letter-spacing:0.06em;
}
.home-ophours ul {list-style:none;}
.home-ophours li {
  font-size:0.82rem;color:#444;
  display:flex;align-items:flex-start;gap:6px;
  margin-bottom:4px;line-height:1.5;
}
.home-ophours li::before {
  content:'■';color:#7fc141;
  flex-shrink:0;font-size:0.5rem;margin-top:5px;
}
.home-actions {display:flex;flex-direction:column;gap:10px;}
.home-action-btn {
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:12px;
  border:1.5px solid #e5e5e5;background:#fff;
  cursor:pointer;transition:all 0.2s;text-align:left;width:100%;
  font-family:'Noto Sans KR',sans-serif;
}
.home-action-btn:hover {border-color:#7fc141;background:#f9fcf5;}
.home-action-btn.ai {border-color:#b8dba0;background:linear-gradient(135deg,#f9fcf5,#eef7e4);}
.home-action-btn .action-icon {
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.home-action-btn.ai .action-icon {background:#7fc141;}
.home-action-btn.agent .action-icon {background:#1a3a6b;}
.home-action-btn .action-icon svg {width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.home-action-btn .action-text {flex:1;}
.home-action-btn .action-title {font-size:0.9rem;font-weight:700;color:#1a1a1a;display:block;}
.home-action-btn .action-desc {font-size:0.77rem;color:#888;display:block;margin-top:2px;}
.home-action-btn .action-arrow {color:#ccc;font-size:1.1rem;line-height:1;}

/* ── AI Chat Screen ── */
.chat-screen-header {
  padding:11px 15px;border-bottom:1px solid #f0f0f0;
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.chat-back-btn {
  background:none;border:none;cursor:pointer;padding:4px;
  color:#999;display:flex;align-items:center;transition:color 0.2s;
}
.chat-back-btn:hover {color:#333;}
.chat-back-btn svg {width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.chat-screen-title {font-size:0.9rem;font-weight:700;color:#222;}

.chat-messages {
  flex:1;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.chat-messages::-webkit-scrollbar {width:4px;}
.chat-messages::-webkit-scrollbar-track {background:transparent;}
.chat-messages::-webkit-scrollbar-thumb {background:#e0e0e0;border-radius:2px;}

.chat-msg {display:flex;gap:8px;align-items:flex-end;}
.chat-msg.bot {justify-content:flex-start;}
.chat-msg.user {justify-content:flex-end;}
.chat-msg-avatar {
  width:26px;height:26px;border-radius:50%;background:#1a3a6b;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:0.68rem;font-weight:700;color:#fff;
  font-family:'Montserrat',sans-serif;
}
.chat-msg-bubble {
  max-width:73%;padding:9px 13px;
  border-radius:16px;font-size:0.84rem;line-height:1.6;color:#222;
  word-break:break-word;
}
.chat-msg.bot .chat-msg-bubble {background:#f1f1f1;border-bottom-left-radius:4px;}
.chat-msg.user .chat-msg-bubble {background:#1a3a6b;color:#fff;border-bottom-right-radius:4px;}

/* Typing */
.chat-typing {display:flex;gap:4px;align-items:center;height:16px;}
.chat-typing span {
  width:6px;height:6px;background:#aaa;border-radius:50%;
  animation:chatTyping 1.2s infinite;
}
.chat-typing span:nth-child(2) {animation-delay:0.2s;}
.chat-typing span:nth-child(3) {animation-delay:0.4s;}
@keyframes chatTyping {
  0%,60%,100% {transform:translateY(0);opacity:0.4;}
  30% {transform:translateY(-4px);opacity:1;}
}

/* FAQ Chips */
.faq-chips {
  padding:8px 12px;border-top:1px solid #f0f0f0;
  display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;
}
.faq-chip {
  background:#f0f8e6;border:1px solid #c5e49a;color:#3d6b1a;
  font-size:0.77rem;padding:5px 11px;border-radius:20px;
  cursor:pointer;transition:all 0.18s;
  font-family:'Noto Sans KR',sans-serif;white-space:nowrap;
}
.faq-chip:hover {background:#7fc141;border-color:#7fc141;color:#fff;}

/* Input Bar */
.chat-input-bar {
  padding:9px 11px;border-top:1px solid #eee;
  display:flex;align-items:center;gap:8px;flex-shrink:0;background:#fff;
}
.chat-input-bar input {
  flex:1;border:1.5px solid #e3e3e3;border-radius:22px;
  padding:8px 15px;font-size:0.84rem;color:#333;outline:none;
  font-family:'Noto Sans KR',sans-serif;transition:border-color 0.2s;
}
.chat-input-bar input:focus {border-color:#7fc141;}
.chat-input-bar input::placeholder {color:#bbb;}
.chat-input-bar input:disabled {background:#fafafa;}
.chat-send-btn {
  width:36px;height:36px;background:#7fc141;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background 0.2s;flex-shrink:0;
}
.chat-send-btn:hover {background:#5fa02e;}
.chat-send-btn:disabled {background:#ccc;cursor:not-allowed;}
.chat-send-btn svg {width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.chat-input-notice {
  font-size:0.7rem;color:#bbb;text-align:center;
  padding:0 12px 7px;flex-shrink:0;
}

/* ── Agent Screen ── */
.agent-screen {padding:0 0 16px;overflow-y:auto;}
.agent-screen-inner {padding:16px 20px;}
.agent-status {
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;
}
.agent-status-dot {width:9px;height:9px;border-radius:50%;background:#ccc;flex-shrink:0;}
.agent-status-dot.online {background:#4caf50;}
.agent-status-text {font-size:0.84rem;font-weight:600;color:#777;}
.agent-offline-card {
  background:#f7f8fa;border-radius:14px;
  padding:20px;margin-bottom:18px;text-align:center;
}
.agent-offline-icon {
  width:52px;height:52px;background:#e4ecf7;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.agent-offline-icon svg {width:26px;height:26px;stroke:#1a3a6b;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.agent-offline-card h4 {font-size:0.93rem;font-weight:700;color:#222;margin-bottom:6px;}
.agent-offline-card p {font-size:0.81rem;color:#666;line-height:1.65;}
.agent-leave-msg {}
.agent-leave-msg h4 {font-size:0.88rem;font-weight:700;color:#222;margin-bottom:12px;}
.agent-leave-form {display:flex;flex-direction:column;gap:9px;}
.agent-leave-form input,
.agent-leave-form textarea {
  border:1.5px solid #e3e3e3;border-radius:10px;
  padding:9px 13px;font-size:0.83rem;
  font-family:'Noto Sans KR',sans-serif;color:#333;
  outline:none;transition:border-color 0.2s;
}
.agent-leave-form input:focus,
.agent-leave-form textarea:focus {border-color:#1a3a6b;}
.agent-leave-form textarea {resize:none;height:72px;}
.agent-leave-submit {
  background:#1a3a6b;color:#fff;border:none;
  border-radius:10px;padding:11px;
  font-size:0.87rem;font-weight:600;
  font-family:'Noto Sans KR',sans-serif;
  cursor:pointer;transition:background 0.2s;margin-top:2px;
}
.agent-leave-submit:hover {background:#0f2550;}
.agent-leave-success {
  text-align:center;padding:20px 10px;
  font-size:0.87rem;color:#2d6b1a;font-weight:600;line-height:1.7;
}
.agent-leave-success span {display:block;font-weight:400;color:#666;margin-top:4px;font-size:0.82rem;}

/* Nav Tabs */
.chat-modal-nav {
  display:flex;border-top:1px solid #eee;flex-shrink:0;
}
.chat-nav-btn {
  flex:1;padding:9px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:none;background:none;cursor:pointer;color:#aaa;
  transition:color 0.18s;font-size:0.68rem;
  font-family:'Noto Sans KR',sans-serif;
}
.chat-nav-btn svg {width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.chat-nav-btn.active {color:#1a3a6b;}

/* Mobile */
@media (max-width:480px) {
  .chat-modal {
    right:0;bottom:0;width:100%;
    height:min(92vh, 800px);
    border-radius:20px 20px 0 0;
    transform-origin:bottom center;
  }
}