:root{
  --bg: #ffffff;
  --accent:#1f8f4a;
  --muted:#666;
  --bubble:#f2f2f2;
  --maxw:360px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Chat container fixed to bottom-right */
#chat-root{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  max-width:var(--maxw);
  width:calc(100vw - 32px);
  pointer-events:none;
}

/* Toggle button */
#chat-toggle{
  pointer-events:auto;
  width:56px;
  height:56px;
  border-radius:999px;
  border:none;
  background:var(--accent);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  font-size:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Chat window */
#chat-window{
  pointer-events:auto;
  width:100%;
  max-width:var(--maxw);
  background:#fff;
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,0.18);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  margin-top:10px;
  transform-origin:100% 100%;
  transition:transform .18s ease, opacity .18s ease;
  opacity:0;
  transform:scale(.94);
  visibility:hidden;
}

/* when open */
#chat-root.open #chat-window{
  opacity:1;
  transform:scale(1);
  visibility:visible;
}

/* Header */
#chat-window header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(90deg, rgba(31,143,74,0.08), rgba(31,143,74,0.02));
  border-bottom:1px solid #eee;
}
#chat-window .title{ font-weight:600; color:var(--accent); }
#chat-close{ background:transparent; border:none; font-size:16px; cursor:pointer; }

/* Body */
#chat-body{
  padding:12px;
  flex:1 1 auto;
  min-height:120px;
  max-height:42vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Messages */
.message{ max-width:86%; padding:10px 12px; border-radius:12px; line-height:1.35; font-size:14px; }
.bot-message{ background:var(--bubble); color:#111; align-self:flex-start; }
.user-message{ background:var(--accent); color:#fff; align-self:flex-end; }

/* Footer */
footer{ padding:10px; border-top:1px solid #eee; display:flex; gap:8px; flex-direction:column; }
.input-row{ display:flex; gap:8px; }
input#chat-input{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e6e6e6;
  font-size:14px;
}
#send-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}
.pill{
  background:#f5f5f5;
  border:none;
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
}

/* Small screens: maximize usable space */
@media (max-width:420px){
  #chat-root{ right:12px; left:12px; bottom:12px; width:auto; }
  #chat-window{ max-width:100%; }
}