/* ===== Light theme, tablet-sized shell, smooth spacing ===== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

:root{
  --panel:#ffffff;
  --muted:#556170;
  --fg:#0a1428;
  --whatsapp-bg:#efeae2;
  --bubble-user:#dff6cf;      /* hijau lembut user */
  --bubble-bot:#ffffff;
  --border:#e3e8ef;
  --shadow:0 8px 24px rgba(9,30,66,.08);

  /* Pilihan (butang) — biru cair + teks hitam normal */
  --btn:#5bbcff;
  --btn-hover:#2f7bff;

  /* Hantar (ikon) hijau WhatsApp */
  --send:#25d366;
  --send-dark:#1fb257;
}

body{
  background: linear-gradient(180deg,#f7f9ff 0%,#eef3fb 100%);
  color:var(--fg);
  font:16px/1.7 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  display:grid; place-items:center;
  padding:clamp(12px,2.5vw,24px);
}

/* ===== App container ===== */
.mobile-shell{
  width:100%;
  max-width:820px;                 /* tablet look */
  height:min(88vh,920px);
  min-height:640px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
}

/* ===== Header ===== */
.app-header{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
}
.brand{ display:flex; gap:12px; align-items:center; }
.logo{ width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#ecf1f7; }
.title{ font-weight:800; letter-spacing:.2px; font-size:18px; }
.subtitle{ font-size:13px; color:var(--muted); }
.badge{ background:#ecf1f7; padding:6px 12px; border-radius:999px; font-size:13px; color:var(--muted); border:1px solid var(--border); }
.hidden{ display:none !important; }

/* ===== Chat area ===== */
.app-body{ overflow:hidden; }
.chat{
  height:100%; overflow-y:auto; padding:18px;
  display:flex; flex-direction:column; gap:12px;
  background:var(--whatsapp-bg) url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e6dfd7' fill-opacity='0.7'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='60' cy='40' r='2'/%3E%3Ccircle cx='90' cy='90' r='2'/%3E%3Ccircle cx='30' cy='80' r='2'/%3E%3C/g%3E%3C/svg%3E") repeat;
}

/* ===== Messages ===== */
.msg{ display:flex; gap:10px; align-items:flex-end; }
.msg .avatar{
  width:30px; height:30px; border-radius:50%;
  background:#ecf1f7; display:grid; place-items:center; color:var(--muted);
  border:1px solid var(--border); flex-shrink:0;
}
.msg .bubble{
  max-width:80%;                    /* <= diminta: 80% canvas */
  padding:12px 14px; border-radius:14px;
  box-shadow:0 1px 0 rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.05);
  background:var(--bubble-bot);
  font-size:15.5px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:break-word;
  word-break:normal;
}
.msg .meta{ font-size:12px; color:#7a7a7a; margin-top:4px; }

/* User bubble — right aligned */
.msg.user{ justify-content:flex-end; }
.msg.user > div{ display:flex; flex-direction:column; align-items:flex-end; max-width:80%; }
.msg.user .bubble{
  background:var(--bubble-user);
  display:inline-block;
  width:fit-content;
  max-width:100%;
  min-width:96px;
  padding:12px 14px;
  border-radius:14px 14px 4px 14px;
}
.msg.user .meta{ text-align:right; }

/* ===== Choices (buttons in bot bubble) ===== */
.choices{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.choice-btn{
  border:1px solid rgba(0,0,0,.08);
  background:var(--btn);
  color:#111;                 /* teks hitam normal */
  font-weight:400;            /* not bold */
  padding:9px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:14.5px;
  transition:transform .02s ease, box-shadow .15s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.choice-btn:hover{ background:var(--btn-hover); color:#fff; }
.choice-btn:active{ transform:translateY(1px); }

/* Disabled (old choices) */
.choice-btn.is-disabled,
.choice-btn:disabled{
  opacity:.55;
  filter:grayscale(15%);
  pointer-events:none;
}

/* ===== Typing indicator ===== */
.typing{ display:inline-block; width:34px; height:12px; background:none; }
.typing::after{ content:'•••'; animation:blink 1.2s infinite; color:#8b8b8b; letter-spacing:2px; }
@keyframes blink{ 0%,100%{opacity:.25} 50%{opacity:1} }

/* ===== Inline input as user bubble (RIGHT) ===== */
.msg.form{ justify-content:flex-end; }
.msg.form .avatar{ display:none; }

/* Bubble for inline input: tight vertical padding */
.msg.form .bubble{
  background:var(--bubble-user);
  display:inline-block;
  padding:0 6px 0 6px;
  border-radius:16px;
  border:1px solid #cfead8;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.04);
}
.inline-input{
  display:grid;
  width: clamp(280px, 44vw, 460px);
  grid-template-columns: minmax(0, 1fr) 44px;
  gap:6px; align-items:center;
}
.inline-input input{
  width:100%; height:40px;
  border:1px solid #dcdfe4; background:#fff; color:#0a1428;
  padding:8px 16px;
  border-radius:999px;
  font-size:16px; outline:none;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.04);
}
.inline-input input:focus{
  border-color:#bfe9cd;
  box-shadow:0 0 0 3px rgba(37,211,102,.18);
}
.inline-input button{
  width:44px; height:44px; border-radius:999px; border:0;
  background:var(--send); color:#fff; font-size:18px; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.12);
}
.inline-input button:hover{ background:var(--send-dark); }
.inline-input button:active{ transform:translateY(1px); }

/* ==== Mobile tweaks ==== */
@media (max-width: 480px){
  body{ padding:0; font-size:15px; line-height:1.6; }
  .mobile-shell{ max-width:100vw; height:100dvh; min-height:100dvh; border-radius:0; }
  .chat{ padding:12px; }
  .msg .bubble{ max-width:92%; font-size:14.25px; }
  .title{ font-size:16px; }
  .subtitle, .badge{ font-size:12px; }
  .meta{ font-size:11px; }
  .choice-btn{ font-size:13.5px; padding:8px 12px; }

  .msg.user > div{ max-width:96%; }
  .msg.user .bubble{ max-width:100%; }
  .msg.form .bubble{ padding:0 6px; }
  .inline-input{
    width:min(90vw, 420px);
    grid-template-columns:minmax(0,1fr) 42px;
    gap:6px;
  }
  .inline-input input{ height:38px; font-size:15px; padding:8px 14px; }
  .inline-input button{ width:42px; height:42px; font-size:18px; }
}