/* ============================================================
   XpressCoupon Chatbot Widget — Styles
   ============================================================ */

/* ---- variables (inherit site palette) ---- */
.xc-chat *,.xc-chat *::before,.xc-chat *::after{ box-sizing:border-box; margin:0; padding:0; }

/* ---- toggle bubble ---- */
.xc-chat-toggle{
  position:fixed; bottom:24px; right:24px; z-index:9999;
  width:60px; height:60px; border-radius:50%;
  background:oklch(0.63 0.21 28); color:#fff;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px oklch(0.63 0.21 28 / .4), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.xc-chat-toggle:hover{
  transform:scale(1.08);
  box-shadow:0 8px 28px oklch(0.63 0.21 28 / .5), 0 2px 8px rgba(0,0,0,.15);
}
.xc-chat-toggle svg{ width:28px; height:28px; transition:transform .25s; }
.xc-chat-toggle.open svg{ transform:rotate(90deg); }
.xc-chat-toggle .xc-chat-badge{
  position:absolute; top:-2px; right:-2px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; color:oklch(0.63 0.21 28);
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  animation:xc-pulse 2s ease-in-out infinite;
}
@keyframes xc-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.15); }
}

/* ---- chat window ---- */
.xc-chat-window{
  position:fixed; bottom:96px; right:24px; z-index:9998;
  width:380px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 120px);
  background:oklch(0.985 0.006 60);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; pointer-events:none;
  transform:translateY(16px) scale(0.96);
  transition:opacity .25s ease, transform .25s ease;
}
.xc-chat-window.visible{
  opacity:1; pointer-events:auto;
  transform:translateY(0) scale(1);
}

/* ---- header ---- */
.xc-chat-header{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  background:oklch(0.63 0.21 28);
  color:#fff; flex:0 0 auto;
}
.xc-chat-header-icon{
  width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.xc-chat-header-icon svg{ width:20px; height:20px; }
.xc-chat-header-text{ flex:1; min-width:0; }
.xc-chat-header-title{
  font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:700; font-size:16px; line-height:1.2;
}
.xc-chat-header-sub{
  font-size:12px; opacity:.85; line-height:1.3;
}
.xc-chat-close{
  background:none; border:none; color:#fff; cursor:pointer;
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.xc-chat-close:hover{ background:rgba(255,255,255,.2); }
.xc-chat-close svg{ width:18px; height:18px; }

/* ---- messages area ---- */
.xc-chat-body{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.xc-chat-body::-webkit-scrollbar{ width:5px; }
.xc-chat-body::-webkit-scrollbar-track{ background:transparent; }
.xc-chat-body::-webkit-scrollbar-thumb{ background:oklch(0.85 0.01 50); border-radius:10px; }

/* ---- message bubbles ---- */
.xc-msg{
  max-width:88%; line-height:1.55;
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:14.5px; word-wrap:break-word;
}
.xc-msg-bot{
  align-self:flex-start;
  background:#fff;
  color:oklch(0.24 0.02 45);
  padding:12px 16px;
  border-radius:4px 16px 16px 16px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.xc-msg-user{
  align-self:flex-end;
  background:oklch(0.63 0.21 28);
  color:#fff;
  padding:12px 16px;
  border-radius:16px 4px 16px 16px;
}
.xc-msg-bot a{ color:oklch(0.63 0.21 28); text-decoration:underline; text-underline-offset:2px; }
.xc-msg-bot a:hover{ color:oklch(0.57 0.21 28); }
.xc-msg-bot strong{ color:oklch(0.24 0.02 45); }
.xc-msg-bot code{
  background:oklch(0.96 0.01 50); padding:2px 7px; border-radius:6px;
  font-family:"Space Grotesk",monospace; font-size:13.5px; font-weight:600;
  color:oklch(0.63 0.21 28); letter-spacing:.03em;
}
.xc-msg-bot p{ margin-bottom:8px; }
.xc-msg-bot p:last-child{ margin-bottom:0; }
.xc-msg-bot ul,.xc-msg-bot ol{ margin:6px 0 8px; padding-left:20px; }
.xc-msg-bot li{ margin-bottom:4px; }

/* ---- typing indicator ---- */
.xc-typing{
  align-self:flex-start;
  display:flex; gap:5px; padding:14px 18px;
  background:#fff; border-radius:4px 16px 16px 16px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.xc-typing span{
  width:8px; height:8px; border-radius:50%;
  background:oklch(0.75 0.05 45);
  animation:xc-bounce 1.4s ease-in-out infinite;
}
.xc-typing span:nth-child(2){ animation-delay:.15s; }
.xc-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes xc-bounce{
  0%,60%,100%{ transform:translateY(0); }
  30%{ transform:translateY(-6px); }
}

/* ---- quick buttons ---- */
.xc-quick-wrap{
  display:flex; flex-wrap:wrap; gap:7px;
  padding:0 16px 12px;
  flex:0 0 auto;
}
.xc-quick{
  font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600; font-size:13px;
  background:#fff; color:oklch(0.63 0.21 28);
  border:1.5px solid oklch(0.90 0.05 40);
  border-radius:999px; padding:8px 14px;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.xc-quick:hover{
  background:oklch(0.95 0.05 40);
  border-color:oklch(0.63 0.21 28);
  transform:translateY(-1px);
}

/* ---- input area ---- */
.xc-chat-input{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  border-top:1px solid oklch(0.92 0.01 50);
  background:#fff; flex:0 0 auto;
}
.xc-chat-input textarea{
  flex:1; border:none; outline:none; resize:none;
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:15px; color:oklch(0.24 0.02 45);
  background:transparent; line-height:1.4;
  max-height:80px; min-height:20px;
}
.xc-chat-input textarea::placeholder{ color:oklch(0.62 0.015 45); }
.xc-chat-send{
  width:38px; height:38px; border-radius:50%;
  background:oklch(0.63 0.21 28); color:#fff;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s;
  flex:0 0 auto;
}
.xc-chat-send:hover{ background:oklch(0.57 0.21 28); transform:scale(1.06); }
.xc-chat-send:disabled{ opacity:.45; cursor:default; transform:none; }
.xc-chat-send svg{ width:18px; height:18px; }

/* ---- error state ---- */
.xc-msg-error{
  align-self:flex-start;
  background:oklch(0.95 0.05 40);
  color:oklch(0.4 0.1 30);
  padding:12px 16px;
  border-radius:4px 16px 16px 16px;
  font-size:14px; line-height:1.5;
  border:1px solid oklch(0.88 0.06 35);
}

/* ---- powered-by ---- */
.xc-chat-powered{
  text-align:center; padding:6px 12px 10px;
  font-size:11px; color:oklch(0.62 0.015 45);
  background:#fff; flex:0 0 auto;
}

/* ---- mobile ---- */
@media(max-width:480px){
  .xc-chat-toggle{ bottom:16px; right:16px; width:54px; height:54px; }
  .xc-chat-toggle svg{ width:24px; height:24px; }
  .xc-chat-window{
    bottom:0; right:0; left:0;
    width:100%; max-width:100%;
    height:100vh; max-height:100vh;
    border-radius:0;
  }
  .xc-chat-window.visible{ transform:translateY(0) scale(1); }
}