/* Singapore Cab Booking by SGCab — chatbot widget. No dependencies.
   Inherits the site palette via :root custom properties (site.css), with
   safe fallbacks so it still looks right if loaded standalone. */
.scb-bot{
  --b: var(--brand, #0b7a3b);
  --bd: var(--brand-d, #085c2c);
  --a: var(--accent, #1763d6);
  --ink: var(--ink, #0d1117);
  --wa: var(--wa, #25d366);
  --wad: var(--wa-d, #1da851);
  --line: var(--line, #e3e8ee);
  --soft: #f4f7f9;
  --rad: 16px;
  position: fixed; right: 18px; bottom: 20px; z-index: 97;
  font-family: var(--ff, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}
.scb-bot *{ box-sizing: border-box; }

/* ---- Launcher ---- */
.scb-launch{
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--b); color: #fff; border: 0; cursor: pointer;
  padding: .72rem 1.05rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 26px rgba(13,17,23,.22); transition: transform .12s ease, background .15s ease;
}
.scb-launch:hover{ background: var(--bd); transform: translateY(-1px); }
.scb-launch:focus-visible{ outline: 3px solid var(--a); outline-offset: 2px; }
.scb-launch svg{ width: 22px; height: 22px; flex: 0 0 auto; }
.scb-launch .scb-x{ display: none; }
.scb-bot.is-open .scb-launch .scb-msg,
.scb-bot.is-open .scb-launch .scb-ic{ display: none; }
.scb-bot.is-open .scb-launch .scb-x{ display: inline-flex; }
.scb-bot.is-open .scb-launch{ padding: .72rem; }

/* small unread/attention dot */
.scb-launch .scb-dot{ position: absolute; top: -3px; right: -3px; width: 12px; height: 12px;
  background: var(--a); border: 2px solid #fff; border-radius: 50%; }
.scb-launch{ position: relative; }

/* ---- Panel ---- */
.scb-panel{
  position: absolute; right: 0; bottom: 64px; width: 374px; max-width: calc(100vw - 36px);
  height: 560px; max-height: calc(100vh - 120px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--rad);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(13,17,23,.28));
  display: none; flex-direction: column; overflow: hidden;
}
.scb-bot.is-open .scb-panel{ display: flex; animation: scb-pop .16s ease; }
@keyframes scb-pop{ from{ opacity: 0; transform: translateY(8px) scale(.98); } to{ opacity: 1; transform: none; } }

.scb-head{ background: var(--b); color: #fff; padding: .85rem 1rem; display: flex; align-items: center; gap: .65rem; }
.scb-head .scb-avatar{ width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.16);
  display: grid; place-items: center; flex: 0 0 auto; }
.scb-head .scb-avatar svg{ width: 22px; height: 22px; }
.scb-head .scb-title{ line-height: 1.15; }
.scb-head .scb-title strong{ font-size: .98rem; display: block; }
.scb-head .scb-title small{ font-size: .76rem; opacity: .85; display: inline-flex; align-items: center; gap: .3rem; }
.scb-head .scb-online{ width: 8px; height: 8px; border-radius: 50%; background: #7CFFB0; display: inline-block; }
.scb-head .scb-head-x{ margin-left: auto; background: rgba(255,255,255,.14); border: 0; color: #fff;
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; }
.scb-head .scb-head-x:hover{ background: rgba(255,255,255,.26); }
.scb-head .scb-head-x svg{ width: 18px; height: 18px; }

/* ---- Body / messages ---- */
.scb-body{ flex: 1; overflow-y: auto; padding: 1rem .9rem .4rem; background: var(--soft);
  display: flex; flex-direction: column; gap: .55rem; scroll-behavior: smooth; }
.scb-row{ display: flex; }
.scb-row.bot{ justify-content: flex-start; }
.scb-row.user{ justify-content: flex-end; }
.scb-bubble{ max-width: 84%; padding: .6rem .8rem; border-radius: 14px; font-size: .92rem; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 2px rgba(13,17,23,.06); }
.scb-row.bot .scb-bubble{ background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.scb-row.user .scb-bubble{ background: var(--b); color: #fff; border-bottom-right-radius: 5px; }
.scb-bubble a{ color: inherit; text-decoration: underline; }

/* typing indicator */
.scb-typing{ display: inline-flex; gap: 4px; padding: .7rem .8rem; }
.scb-typing span{ width: 7px; height: 7px; background: #b6c2cd; border-radius: 50%; animation: scb-bounce 1s infinite; }
.scb-typing span:nth-child(2){ animation-delay: .15s; }
.scb-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes scb-bounce{ 0%,60%,100%{ transform: translateY(0); opacity: .5; } 30%{ transform: translateY(-4px); opacity: 1; } }

/* ---- Quick replies / chips ---- */
.scb-chips{ display: flex; flex-wrap: wrap; gap: .4rem; padding: .15rem .15rem .5rem; }
.scb-chip{ background: #fff; color: var(--b); border: 1.5px solid var(--b); border-radius: 999px;
  padding: .42rem .8rem; font-size: .85rem; font-weight: 600; cursor: pointer; line-height: 1.2; text-align: left; }
.scb-chip:hover{ background: var(--b); color: #fff; }
.scb-chip.alt{ color: var(--a); border-color: var(--a); }
.scb-chip.alt:hover{ background: var(--a); color: #fff; }
.scb-chip.wa{ color: var(--wad); border-color: var(--wad); }
.scb-chip.wa:hover{ background: var(--wa); color: #06351c; }
.scb-chip.ghost{ color: #5b6b7a; border-color: var(--line); font-weight: 500; }
.scb-chip.ghost:hover{ background: #eef2f5; color: var(--ink); }
.scb-chip svg{ width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }

/* ---- Input row ---- */
.scb-foot{ border-top: 1px solid var(--line); background: #fff; padding: .55rem .6rem; }
.scb-inputrow{ display: flex; gap: .45rem; align-items: flex-end; }
.scb-inputrow textarea, .scb-inputrow input{
  flex: 1; resize: none; font: inherit; font-size: .92rem; padding: .6rem .7rem; max-height: 96px;
  border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; line-height: 1.3; }
.scb-inputrow textarea:focus, .scb-inputrow input:focus{ outline: none; border-color: var(--b); box-shadow: 0 0 0 3px rgba(11,122,59,.14); }
.scb-send{ background: var(--b); color: #fff; border: 0; border-radius: 12px; width: 42px; height: 42px;
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.scb-send:hover{ background: var(--bd); }
.scb-send:disabled{ opacity: .5; cursor: default; }
.scb-send svg{ width: 20px; height: 20px; }
.scb-skip{ background: #eef2f5; color: #5b6b7a; border: 0; border-radius: 12px; padding: 0 .8rem; height: 42px;
  font-weight: 600; font-size: .85rem; cursor: pointer; flex: 0 0 auto; }
.scb-skip:hover{ background: #e2e8ee; }

.scb-bar{ display: flex; gap: .5rem; align-items: center; padding: .4rem .25rem 0; }
.scb-bar a, .scb-bar button{ display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; font-weight: 600;
  color: #5b6b7a; background: none; border: 0; cursor: pointer; padding: .2rem .25rem; }
.scb-bar a:hover, .scb-bar button:hover{ color: var(--b); text-decoration: none; }
.scb-bar a svg, .scb-bar button svg{ width: 14px; height: 14px; }
.scb-bar a[data-cta=call]{ color: var(--b); }
.scb-bar a[data-cta=whatsapp]{ color: var(--wad); }
.scb-bar .scb-spacer{ flex: 1; }
.scb-foot-note{ font-size: .68rem; color: #8a97a4; text-align: center; padding: .35rem 0 .1rem; }

/* hide native helper text input when chips are the only valid input */
.scb-foot.is-locked .scb-inputrow{ display: none; }

/* ---- Mobile: clear the sticky CTA bar (which shows <=760px) ---- */
@media (max-width: 760px){
  .scb-bot{ right: 12px; bottom: 74px; }
  .scb-launch .scb-msg{ display: none; }   /* icon-only launcher on mobile */
  .scb-launch{ padding: .8rem; }
  .scb-panel{ bottom: 64px; width: calc(100vw - 24px); height: calc(100vh - 150px); max-height: none; }
}
@media (max-width: 380px){
  .scb-panel{ height: calc(100vh - 140px); }
}

@media (prefers-reduced-motion: reduce){
  .scb-bot.is-open .scb-panel{ animation: none; }
  .scb-typing span{ animation: none; }
  .scb-launch{ transition: none; }
}