/* === WATTSON — LIGHT-ONLY FINAL (2025-09-23) ===
   - No dark mode, no cookie banner, no rating UI
   - Clean light palette for embed (brand: emerald)
   - Desktop & mobile ready
*/

/* --------------------------------
   THEME TOKENS (LIGHT)
---------------------------------*/
:root{
  --bg: #ffffff;
  --text: #212529;
  --muted: #6c757d;

  --bubble-user: #d1e7dd;      /* soft green */
  --bubble-bot: #f7f7f7;       /* light gray */
  --accent: #10b981;           /* emerald (matches manifest theme_color) */
  --accent-2: #0f766e;         /* teal used in modal CTA */
  --accent-3: #34d399;         /* secondary CTA chip */
  --border: #ced4da;

  --surface: #ffffff;
  --surface-2: #f5f7f9;
}

/* --------------------------------
   BASE LAYOUT
---------------------------------*/
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  padding:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  background: var(--bg);
  color: var(--text);
  display:flex;
  min-height:100vh;
  /* optional watermark: comment out if not needed */
  /* background-image: url("wattson-192.png");
  background-repeat:no-repeat;
  background-position: center left;
  background-size: 180px; */
}

/* --------------------------------
   SIDEBAR (FAQ)
---------------------------------*/
.faq-sidebar{
  width:280px;
  background: #f1f3f5;
  padding:1.5rem;
  border-right:1px solid var(--border);
}
.faq-sidebar h2{
  margin:0 0 .75rem 0;
  font-size:18px;
  color:#0f172a;
}
.faq-sidebar ul{ list-style:none; padding:0; margin:0 }
.faq-sidebar li{
  padding:.55rem 0;
  color:#1c4f72;
  cursor:pointer;
  border-bottom:1px dashed #b0c4d0;
  transition: background .2s ease, padding-left .2s ease;
}
.faq-sidebar li:hover{ background:#e9f3fb; padding-left:8px }

/* Hide sidebar on mobile */
@media (max-width:768px){
  .faq-sidebar{ display:none }
  .chatbot-container{ width:100%; padding:1rem; min-height:calc(100vh - 24px) }
}

/* --------------------------------
   MAIN CHAT CONTAINER
---------------------------------*/
.chatbot-container{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:2rem;
  min-height:calc(100vh - 24px);
}

.chatbot-header{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1rem;
}
.chatbot-logo{ height:32px; width:auto; display:block }
.chatbot-header h1{
  font-size:22px; margin:0; font-weight:700; color:#0f172a;
}

/* --------------------------------
   CHAT AREA
---------------------------------*/
#chatbot-log{
  flex:1;
  overflow-y:auto;
  padding:1rem;
  margin:1rem 0;
  border:1px solid var(--border);
  border-radius:8px;
  background: var(--surface);
  /* performance hint: render only visible content */
  content-visibility:auto;
  contain-intrinsic-size: 600px;
}

.chatbot-message{
  padding:10px 15px;
  margin:8px 0;
  border-radius:16px;
  max-width:90%;
  line-height:1.55;
  word-wrap:break-word;
  animation: fadeIn .2s ease-in-out;
  transition: all .25s ease;
}
.user-message{
  background: var(--bubble-user);
  color:#0f5132;
  align-self:flex-end;
  text-align:right;
  border-bottom-right-radius:2px;
}
.bot-message{
  background: var(--bubble-bot);
  align-self:flex-start;
  border-bottom-left-radius:2px;
  color: var(--text);
}

/* Typing bubble */
.typing-bubble{ font-style:italic; color:#8a8f94 }
.typing-bubble::after{ content:""; animation:typing 1s steps(3) infinite }
@keyframes typing{ 0%{content:"."} 33%{content:".."} 66%{content:"..."} 100%{content:""} }

/* --------------------------------
   FORM (MAIN CHAT INPUT ONLY)
---------------------------------*/
form{
  display:flex; gap:8px;
  margin-top:auto;
  border-top:1px solid var(--border);
  padding-top:1rem;
}
input[type="text"], input[type="email"], input[type="tel"]{
  flex:1;
  padding:.8rem .9rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:1rem;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus{
  outline:none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
button[type="submit"]{
  background: var(--accent);
  color:#fff;
  border:none;
  padding:0 1rem;
  border-radius:8px;
  cursor:pointer;
  font-size:1.05rem;
}
button[type="submit"]:hover{ filter:brightness(0.95) }

/* Ensure main chat input visible */
#chatbot-form{ display:flex; gap:8px; align-items:center }
#chatbot-input{
  width:auto!important; height:auto!important; flex:1;
}

/* --------------------------------
   LANGUAGE SWITCHER
---------------------------------*/
.language-switcher{ margin-top:1rem; text-align:right }
.language-switcher select{
  padding:.45rem .6rem;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff; color:var(--text);
  font-size:1rem;
}

/* --------------------------------
   (REMOVED) FEEDBACK (👍👎)
---------------------------------*/
/* .feedback-btns { display:none }  -- UI & logic dihapus di JS */

/* --------------------------------
   (REMOVED) COOKIE CONSENT
---------------------------------*/
/* Cookie banner sudah dihapus dari HTML & JS */

/* --------------------------------
   ANIMATIONS
---------------------------------*/
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

/* --------------------------------
   PRODUCT OPTIONS (bubble list)
---------------------------------*/
.product-options{
  display:flex; flex-direction:column; gap:12px; margin-top:1rem;
}
.product-button{
  background: var(--accent);
  padding:1rem 1.5rem;
  border:none; border-radius:24px;
  font-size:1.05rem; font-weight:700; color:#fff;
  cursor:pointer; text-align:left;
  transition: transform .18s, background .25s, box-shadow .18s;
}
.product-button:hover{
  filter:brightness(0.95);
  transform: translateX(5px);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* CTA anchor chips from bot replies */
.cta-button{
  display:inline-block; margin-top:12px;
  background: var(--accent-3); color:#083344;
  padding:10px 16px; border-radius:24px;
  font-weight:700; font-size:1rem; text-decoration:none;
  transition: background .25s ease, transform .15s ease;
}
.cta-button:hover{ filter:brightness(0.96); transform: translateY(-1px); }

/* --------------------------------
   PLANVILLE ADD-ON (hero balloon)
---------------------------------*/
.pv-hero{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.75);backdrop-filter:saturate(1.05) blur(2px);margin:8px 8px 0}
.pv-robot{display:inline-flex;align-items:center;justify-content:center}
.pv-robot-svg{display:block}
.pv-hand{transform-origin:0px -2px;animation:pv-wave 1.8s ease-in-out infinite}
@keyframes pv-wave{0%,100%{transform:translate(130px,55px) rotate(0deg)}10%{transform:translate(130px,55px) rotate(12deg)}20%{transform:translate(130px,55px) rotate(-8deg)}30%{transform:translate(130px,55px) rotate(10deg)}40%{transform:translate(130px,55px) rotate(-6deg)}50%{transform:translate(130px,55px) rotate(0deg)}}
.pv-balloon{position:relative;max-width:520px;padding:10px 12px;border-radius:12px;background:#fff;color:#1d2733;font-size:14px;line-height:1.35;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.pv-balloon::after{content:"";position:absolute;left:-8px;top:18px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid #fff}
.pv-ticker{position:relative;overflow:hidden;white-space:nowrap;background:#0f172a;color:#e8eef7;font-size:13px;padding:6px 0;margin:6px 0 0}
.pv-ticker-track{display:inline-flex;gap:40px;padding-left:100%;animation:pv-marquee 18s linear infinite;will-change:transform}
.pv-ticker:hover .pv-ticker-track{animation-play-state:paused}
@keyframes pv-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (max-width:480px){.pv-hero{gap:8px;padding:8px 10px}.pv-balloon{font-size:13px}.pv-robot-svg{width:110px;height:88px}}
@media (prefers-reduced-motion:reduce){.pv-hand,.pv-ticker-track{animation:none!important}}

/* --------------------------------
   FUNNEL PROGRESS
---------------------------------*/
.funnel-progress{height:6px;background:#e5e7eb;border-radius:999px;margin:8px 8px 12px;overflow:hidden}
.funnel-progress__bar{height:100%;width:0;background:#10b981;transition:width .3s ease}

/* --------------------------------
   QUICK REPLIES & CARDS
---------------------------------*/
.quick-group{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.quick-btn{
  padding:8px 12px;border-radius:999px;border:1px solid var(--border);
  background:#fff; cursor:pointer
}
.quick-btn:hover{ background:#f1f5f9 }

.pv-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px; margin:8px 0;
}
.pv-card{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:6px; padding:14px; border:1px solid var(--border); border-radius:16px;
  background:#fff; cursor:pointer; text-align:left;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.pv-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08) }
.pv-card__emoji{ font-size:20px; line-height:1; opacity:.9 }
.pv-card__label{ font-weight:600; color:#0f172a }

/* --------------------------------
   SUMMARY BUBBLE
---------------------------------*/
.summary-bubble{
  background:#f8fafc; color:#0f172a;
  border:1px solid #e2e8f0; border-radius:12px;
  padding:10px 12px; margin:8px 0;
}
.summary-bubble ul{ margin:0; padding-left:18px }
.summary-bubble li{ margin:4px 0 }

/* --------------------------------
   EXIT BUBBLE
---------------------------------*/
.exit-bubble{
  background:#fff7ed; border-left:4px solid #fb923c;
  padding:10px 12px; border-radius:8px; margin:8px 0;
}

/* --------------------------------
   TEXT INPUT FOR askInput()
---------------------------------*/
.text-input{
  flex:1; min-width:180px;
  padding:10px 12px; border-radius:8px;
  border:1px solid var(--border);
  background:#fff; color:var(--text);
}

/* --------------------------------
   MOBILE TWEAKS
---------------------------------*/
@media (max-width:768px){
  /* body{ background-position: -120px 40px; background-size: 140px } */
  .chatbot-container{ padding:1rem }
  #chatbot-log{ margin: .75rem 0 }
}

/* NOTE:
   - Cookie banner & rating button styles DIHAPUS.
   - Popup contact form pakai CSS inline dari JS (openLeadFloatForm).
*/