#vdm-root, #vdm-root * { box-sizing: border-box; }
#vdm-root {
  --forest:   #123024;
  --forest-2: #1B4636;
  --gold:     #C99A3E;
  --gold-2:   #E4BE6E;
  --sand:     #FBF7EE;
  --sand-2:   #EFE6D2;
  --clay:     #9C4322;
  --ink:      #16211A;
  --mist:     #CFDACB;
  --white:    #FFFFFF;
  font-family: 'Manrope', -apple-system, sans-serif;
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 999999;
  color: var(--ink);
}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------- Launcher ---------------- */
#vdm-launcher {
  width: 66px; height: 66px; border-radius: 50%;
  background: linear-gradient(155deg, var(--forest-2), var(--forest));
  box-shadow: 0 12px 32px rgba(18,48,36,0.45);
  border: 2px solid rgba(255,255,255,0.15); cursor: pointer; display: flex; align-items: center; justify-content: center;
  position: relative; transition: transform .25s ease;
  animation: vdm-pulse 2.6s ease-in-out infinite;
}
#vdm-launcher:hover { transform: scale(1.07); }
#vdm-launcher svg { width: 30px; height: 30px; }
@keyframes vdm-pulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(18,48,36,.45), 0 0 0 0 rgba(201,154,62,.55); }
  50%      { box-shadow: 0 12px 32px rgba(18,48,36,.45), 0 0 0 12px rgba(201,154,62,0); }
}
#vdm-launcher .vdm-dot {
  position: absolute; top: -3px; right: -3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--gold); border: 2.5px solid var(--sand); font-size: 9px;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}

/* ---------------- Panel ---------------- */
#vdm-panel {
  position: absolute; bottom: 82px; right: 0;
  width: 400px; max-width: 93vw; height: 640px; max-height: 84vh;
  background: var(--sand);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(10,20,15,0.35);
  display: none; flex-direction: column; overflow: hidden;
  border: 1px solid var(--sand-2);
}
#vdm-panel.vdm-open { display: flex; animation: vdm-rise .28s cubic-bezier(.2,.8,.3,1); }
@keyframes vdm-rise { from { opacity:0; transform: translateY(16px) scale(.98);} to {opacity:1; transform:none;} }

/* header */
#vdm-header {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-2) 70%);
  color: var(--sand); padding: 18px 18px 14px; position: relative; overflow: hidden; flex-shrink: 0;
}
#vdm-header-top { display:flex; align-items:center; gap:11px; position: relative; }
#vdm-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gold); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
#vdm-header h1 { font-family:'Fraunces', serif; font-size: 18.5px; margin:0; font-weight:700; letter-spacing:.2px; }
#vdm-header p { margin: 2px 0 0; font-size: 12px; opacity:.88; font-weight:500; }
#vdm-close { margin-left:auto; background:rgba(255,255,255,0.1); border:none; color: var(--sand); opacity:.9; cursor:pointer; font-size:20px; width:28px; height:28px; border-radius:8px; }
#vdm-close:hover { opacity:1; background:rgba(255,255,255,0.2); }

/* persistent nav bar — always-visible Home / Restart / WhatsApp shortcuts */
#vdm-navbar { display:flex; gap:6px; margin-top:12px; }
.vdm-nav-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22);
  color: var(--sand); font-size: 11px; font-weight:700; padding: 7px 4px; border-radius: 9px; cursor:pointer;
}
.vdm-nav-btn:hover { background: rgba(255,255,255,0.22); }

#vdm-chips { display:flex; gap:6px; margin-top:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
#vdm-chips::-webkit-scrollbar{ display:none; }
.vdm-chip {
  flex-shrink:0; background: rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.24);
  color: var(--sand); font-size: 12px; font-weight:600; padding: 7px 13px; border-radius: 999px; cursor:pointer; white-space:nowrap;
}
.vdm-chip:hover { background: rgba(255,255,255,0.26); }

/* body */
#vdm-body { flex:1; overflow-y:auto; padding: 18px 15px; display:flex; flex-direction:column; gap:13px; background: var(--sand); }
#vdm-body::-webkit-scrollbar { width:5px; }
#vdm-body::-webkit-scrollbar-thumb { background: var(--mist); border-radius:4px; }

.vdm-row { display:flex; gap:9px; max-width:100%; }
.vdm-row.bot { align-self:flex-start; }
.vdm-row.user { align-self:flex-end; flex-direction:row-reverse; }
.vdm-bubble-avatar { width:28px; height:28px; border-radius:50%; background:var(--forest); color:var(--gold-2); flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:14px; }
.vdm-bubble { padding: 11px 14px; border-radius: 16px; font-size: 14.5px; font-weight:500; line-height:1.55; max-width: 260px; }
.vdm-row.bot .vdm-bubble { background: var(--white); border:1.5px solid var(--sand-2); border-top-left-radius:4px; color: var(--ink); box-shadow: 0 2px 8px rgba(20,30,20,.04); }
.vdm-row.user .vdm-bubble { background: var(--forest); color: #FFFFFF; border-top-right-radius:4px; font-weight:600; }
.vdm-qr-inline { width: 180px; height: 180px; border-radius: 12px; border: 4px solid var(--forest); padding: 4px; background: var(--white); margin-top: 9px; display:block; }

/* main menu grid — the 6 primary chat-flow options, shown as a 2-col grid for higher visibility than pill chips */
.vdm-menu-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; align-self:flex-start; max-width: 300px; margin-left:37px; }
.vdm-menu-btn {
  background: var(--white); border:1.5px solid var(--gold); color: var(--forest); font-size:12.5px; font-weight:700;
  padding:11px 8px; border-radius:12px; cursor:pointer; text-align:center; line-height:1.3;
}
.vdm-menu-btn:hover { background: var(--gold); color: var(--white); }

.vdm-quick-wrap { display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; max-width: 290px; margin-left:37px; }
.vdm-quick { background: var(--white); border:1.5px solid var(--gold); color: var(--forest); font-size:12.5px; padding:7px 13px; border-radius:999px; cursor:pointer; font-weight:700; }
.vdm-quick:hover { background: var(--gold); color: var(--white); }
a.vdm-quick { display:inline-block; text-decoration:none; }

.vdm-card { background:var(--white); border:1.5px solid var(--sand-2); border-radius:14px; padding:13px; width: 238px; margin-left:37px; box-shadow: 0 5px 16px rgba(20,30,20,0.08); }
.vdm-card img { width:100%; height:112px; object-fit:cover; border-radius:10px; margin-bottom:9px; background:var(--sand-2); }
.vdm-card h3 { font-family:'Fraunces', serif; font-size:15px; margin:0 0 4px; font-weight:700; color: var(--ink); }
.vdm-price-row { display:flex; align-items:baseline; gap:7px; margin: 5px 0 11px; }
.vdm-price-now { font-size:17px; font-weight:800; color: var(--clay); }
.vdm-price-was { font-size:12px; color:#8A968C; text-decoration:line-through; }
.vdm-card-actions { display:flex; gap:7px; }
.vdm-btn { flex:1; text-align:center; padding:9px 0; border-radius:9px; font-size:12.5px; font-weight:700; cursor:pointer; border:none; }
.vdm-btn-primary { background: var(--gold); color: #FFFFFF; }
.vdm-btn-primary:hover { background: #B4872F; }
.vdm-btn-ghost { background: transparent; border:1.5px solid var(--mist); color: var(--forest); }
.vdm-btn-ghost:hover { background: var(--sand-2); }

#vdm-inputbar { display:flex; gap:8px; padding: 11px 13px; border-top: 1.5px solid var(--sand-2); background: var(--white); flex-shrink:0; }
#vdm-input { flex:1; border:1.5px solid var(--mist); border-radius:12px; padding:11px 13px; font-size:14px; font-weight:500; outline:none; font-family:inherit; background: var(--sand); color: var(--ink); }
#vdm-input::placeholder { color: #8A968C; }
#vdm-input:focus { border-color: var(--gold); }
#vdm-send { width:42px; height:42px; border-radius:12px; border:none; background: var(--forest); color: var(--gold-2); cursor:pointer; flex-shrink:0; font-size:16px; }
#vdm-send:hover { background: var(--forest-2); }
#vdm-foot-note { font-size: 10.5px; font-weight:600; text-align:center; color:#8A968C; padding: 6px 0 9px; background:var(--white); }

/* ---------------- Typing indicator ---------------- */
.vdm-typing { display:flex; align-items:center; gap:4px; padding:14px 16px !important; }
.vdm-typing span { width:6px; height:6px; border-radius:50%; background:var(--mist); display:inline-block; animation: vdm-typing-bounce 1.1s infinite ease-in-out; }
.vdm-typing span:nth-child(2) { animation-delay: .15s; }
.vdm-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes vdm-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity:.5; } 30% { transform: translateY(-4px); opacity:1; } }

/* ---------------- Spin & Win discount wheel ---------------- */
.vdm-wheel-card {
  background: var(--white); border:1.5px solid var(--sand-2); border-radius:16px; padding:14px;
  width: 210px; margin-left:37px; box-shadow: 0 6px 20px rgba(20,30,20,0.10); text-align:center;
}
.vdm-wheel-title { font-size:12.5px; font-weight:700; color: var(--forest); margin-bottom:10px; line-height:1.35; }
.vdm-wheel-outer { position:relative; width:150px; height:150px; margin:0 auto 12px; }
.vdm-wheel-svg { width:150px; height:150px; display:block; transform-origin:50% 50%; filter: drop-shadow(0 3px 8px rgba(20,30,20,.18)); }
.vdm-wheel-pointer {
  position:absolute; top:-6px; left:50%; transform:translateX(-50%); font-size:16px; color: var(--clay);
  z-index:2; text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.vdm-wheel-spin {
  width:100%; padding:10px 0; border:none; border-radius:10px; background: var(--gold); color:#fff;
  font-size:13px; font-weight:800; cursor:pointer; letter-spacing:.3px;
}
.vdm-wheel-spin:hover { background:#B4872F; }
.vdm-wheel-spin:disabled { opacity:.85; cursor:default; }
.vdm-wheel-skip { margin-top:9px; font-size:11px; font-weight:600; color:#8A968C; cursor:pointer; text-decoration:underline; }
.vdm-wheel-skip:hover { color: var(--clay); }

@media (max-width: 480px) {
  #vdm-root { bottom: 12px; right: 12px; left: 12px; text-align: right; }
  #vdm-panel { position: fixed; width: auto; left: 10px; right: 10px; bottom: 88px; top: 12px; height: auto; max-height: none; border-radius: 20px; text-align: left; }
  .vdm-card { width: calc(100vw - 90px); max-width: 260px; }
  .vdm-menu-grid { max-width: calc(100vw - 90px); }
  .vdm-wheel-card { width: calc(100vw - 90px); max-width: 210px; }
  #vdm-navbar { flex-wrap: wrap; }
  .vdm-nav-btn { font-size: 10.5px; padding: 6px 3px; }
}
@media (max-width: 360px) {
  .vdm-menu-grid { grid-template-columns: 1fr; }
  .vdm-bubble { max-width: 210px; }
  .vdm-qr-inline { width: 150px; height: 150px; }
  .vdm-wheel-outer, .vdm-wheel-svg { width: 130px; height: 130px; }
  .vdm-wheel-card { padding: 11px; }
}