#heat-chat-bubble{
  position:fixed; right:18px; bottom:18px;
  width:56px; height:56px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  cursor:pointer; z-index:999999;
  background:#0b5fff; color:#fff; font-size:22px;
}
#heat-chat-panel{
  position:fixed; right:18px; bottom:86px;
  width:360px; max-width:calc(100vw - 36px);
  height:520px; max-height:70vh;
  background:#fff; border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  overflow:hidden; z-index:999999;
  display:none; flex-direction:column;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#heat-chat-header{
  padding:12px 14px; background:#0b5fff; color:#fff;
  display:flex; align-items:center; justify-content:space-between;
}
#heat-chat-body{ padding:12px; flex:1; overflow:auto; background:#f6f7fb; }
.heat-msg{ margin:10px 0; display:flex; }
.heat-msg .b{
  max-width:85%;
  padding:10px 12px; border-radius:14px;
  background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.06);
  white-space:pre-wrap;
}
.heat-msg.staff, .heat-msg.visitor{ justify-content:flex-end; }
.heat-msg.staff .b, .heat-msg.visitor .b{ background:#0b5fff; color:#fff; }
.heat-options{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.heat-btn{
  border:0; background:#ffffff; color:#111;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  cursor:pointer; 
  font-size: 12.5px !important;
  padding: 6px 10px !important;
  line-height: 1.15;
}
#heat-chat-footer{
  display:flex; gap:8px; padding:10px; background:#fff;
  border-top:1px solid #eee;
}
/* Make the input area comfortable for long text */
#heat-chat-input{
  width: 100%;
  min-height: 44px;
  max-height: 160px;   /* you can increase to 200px */
  overflow-y: auto;
  resize: none;        /* stop manual dragging */
  line-height: 1.35;
  padding: 10px 12px;
  box-sizing: border-box;
  border-radius: 14px;
  white-space: pre-wrap;   /* keep new lines */
  word-break: break-word;  /* wrap long words */
}

/* Footer layout */
#heat-chat-footer {
  display: flex;
  align-items: flex-end; /* align button to bottom */
  gap: 8px;
}

/* Fix SEND button size */
#heat-chat-send {
  height: 44px;          /* fixed height */
  min-height: 44px;
  width: 44px;           /* circle size */
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;        /* ❗ prevents growing */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Textarea should grow, not the button */
#heat-chat-input {
  flex: 1;
}


/* =========================
   Chat option buttons – compact style
========================= */
.heat-options {
  gap: 8px; /* smaller gap between buttons */
}

.heat-btn {
  font-size: 13px;          /* smaller text */
  line-height: 1.2;
  padding: 8px 12px;        /* reduce height */
  border-radius: 999px;     /* pill style */
  min-height: auto;         /* prevent tall buttons */
  white-space: normal;      /* allow wrap */
  text-align: center;
}

/* Emoji/icon spacing */
.heat-btn span,
.heat-btn img {
  margin-right: 6px;
}

/* Optional: slightly different colors per type */
.heat-btn {
  background: #f4c261;
  color: #1f2937;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Dark button (Thai program in your screenshot) */
.heat-btn.dark {
  background: #1f2a37;
  color: #fff;
}

/* =========================
   Message bubble alignment + colors
========================= */

/* Base message row */
.heat-msg{
  display: flex;
  margin: 10px 0;
}

/* Bubble */
.heat-msg .b{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Visitor (customer) — RIGHT, blue */
.heat-msg.visitor{
  justify-content: flex-end;
}
.heat-msg.visitor .b{
  background: #0b5fff;
  color: #fff;
  border-bottom-right-radius: 6px;
}

/* Staff — LEFT, light (same as bot) */
.heat-msg.staff{
  justify-content: flex-start;
}
.heat-msg.staff .b{
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 6px;
}

/* Bot — LEFT, light */
.heat-msg.bot{
  justify-content: flex-start;
}
.heat-msg.bot .b{
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 6px;
}