/* ===== CHAT DEMO ===== */
.demo-scene{position:relative;width:420px;height:620px;transform:scale(.95);transform-origin:top left;margin-bottom:-31px}
.demo-scene.expanded{width:760px;transition:width .3s ease}

/* Cursor */
.demo-cursor{position:absolute;width:20px;height:20px;z-index:50;pointer-events:none;transition:left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1),opacity .3s;transform-origin:top left}
.demo-cursor svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.demo-cursor.clicking{transform:scale(.8)}

/* Launcher */
.demo-launcher{position:absolute;top:570px;right:0;background:#2d4a3e;color:#fff;border:none;border-radius:999px;padding:12px 18px;font-size:14px;font-weight:500;font-family:inherit;display:flex;align-items:center;gap:8px;cursor:default;box-shadow:0 4px 16px rgba(0,0,0,.12);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.demo-launcher.show{opacity:1;transform:translateY(0)}
.demo-launcher svg{width:16px;height:16px}

/* Chat container */
.demo-chat{position:absolute;top:0;right:0;width:420px;height:620px;background:#fff;border-radius:16px;border:1px solid #e5e0d8;box-shadow:0 8px 40px rgba(0,0,0,.1);display:flex;overflow:hidden;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .3s,transform .3s,width .3s}
.demo-chat.show{opacity:1;transform:translateY(0) scale(1)}
.demo-chat.expanded{width:760px}

/* Left panel */
.dc-left{width:420px;min-width:420px;display:flex;flex-direction:column;height:100%}

/* Header */
.dc-header{background:#2d4a3e;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.dc-header-title{color:#fff;font-size:14px;font-weight:600}
.dc-header-sub{color:rgba(255,255,255,.7);font-size:12px;margin-top:2px}
.dc-close{background:none;border:none;color:rgba(255,255,255,.7);cursor:default;padding:4px}
.dc-close svg{width:18px;height:18px}

/* Messages */
.dc-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.dc-msgs::-webkit-scrollbar{width:4px}
.dc-msgs::-webkit-scrollbar-thumb{background:#e5e0d8;border-radius:2px}

/* Bubbles */
.dc-msg{display:flex;flex-direction:column;max-width:90%;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.dc-msg.show{opacity:1;transform:translateY(0)}
.dc-msg-user{align-self:flex-end}
.dc-msg-asst{align-self:flex-start}
.dc-bubble{padding:12px 16px;font-size:14px;line-height:1.55}
.dc-msg-user .dc-bubble{background:#2d4a3e;color:#fff;border-radius:16px 16px 4px 16px}
.dc-msg-asst .dc-bubble{background:#faf8f5;border:1px solid #e5e0d8;color:#1a1a18;border-radius:16px 16px 16px 4px}

/* Photo */
.dc-photo{width:160px;height:112px;border-radius:12px;overflow:hidden;border:1px solid #e5e0d8;margin-bottom:8px}
.dc-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Typing */
.dc-typing{align-self:flex-start;background:#faf8f5;border:1px solid #e5e0d8;border-radius:16px 16px 16px 4px;padding:14px 18px;display:flex;gap:5px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.dc-typing.show{opacity:1;transform:translateY(0)}
.dc-typing span{width:6px;height:6px;border-radius:50%;background:#9a9a90;animation:dtBounce .6s infinite}
.dc-typing span:nth-child(2){animation-delay:.15s}
.dc-typing span:nth-child(3){animation-delay:.3s}
@keyframes dtBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Product card — exact like the real component */
.dc-card{display:block;align-self:stretch;min-width:0;border-radius:16px;border:1px solid #e5e0d8;background:#fff;cursor:pointer;text-decoration:none;color:inherit;transition:box-shadow .2s}
.dc-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)}
.dc-card-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#f5f5f0}
.dc-card-body{padding:12px}
.dc-card-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.dc-card-name{font-size:14px;font-weight:700;color:#1a1a18;margin:0}
.dc-card-coll{font-size:12px;color:#9a9a90;margin:2px 0 0}
.dc-card-chevron{flex-shrink:0;margin-top:2px;opacity:.4}
.dc-card-reason{font-size:12px;color:#4a4a44;margin-top:6px;line-height:1.5}

/* Input bar */
.dc-input-bar{border-top:1px solid #e5e0d8;padding:12px;flex-shrink:0}
.dc-input-row{display:flex;gap:8px;align-items:flex-end}
.dc-ibtn{width:40px;height:40px;border-radius:12px;border:1px solid #e5e0d8;background:none;cursor:default;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#9a9a90}
.dc-ibtn svg{width:16px;height:16px}
.dc-ifield{flex:1;border:1px solid #e5e0d8;border-radius:12px;padding:10px 14px;font-size:14px;font-family:inherit;color:#1a1a18;min-height:40px;line-height:1.4;overflow:hidden;white-space:pre-wrap;word-break:break-word}
.dc-send{width:40px;height:40px;border-radius:12px;border:none;background:#2d4a3e;cursor:default;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.dc-send svg{width:16px;height:16px}
.dc-preview{display:none;align-items:center;gap:8px;padding:4px 0 8px;font-size:13px;color:#4a4a44}
.dc-preview.show{display:flex}
.dc-preview img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.dc-preview-rm{color:#9a9a90;font-size:12px;margin-left:auto}

/* Detail panel — 340px, right side */
.dc-panel{width:340px;min-width:340px;border-left:1px solid #e5e0d8;display:flex;flex-direction:column;height:100%;overflow-y:auto;opacity:0;transform:translateX(16px);transition:opacity .25s,transform .25s}
.dc-panel.show{opacity:1;transform:translateX(0)}
.dc-panel-header{padding:12px 16px;border-bottom:1px solid #e5e0d8;display:flex;align-items:center;gap:12px;flex-shrink:0}
.dc-panel-back{background:none;border:none;cursor:pointer;color:#1a1a18;opacity:.5;padding:4px}
.dc-panel-back:hover{opacity:1}
.dc-panel-back svg{width:16px;height:16px}
.dc-panel-title{font-size:14px;font-weight:700;color:#1a1a18}
.dc-panel-coll{font-size:12px;color:#9a9a90}
.dc-panel-photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#f5f5f0}
.dc-panel-body{padding:16px}
.dc-panel-swlabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9a9a90;margin-bottom:8px}
.dc-panel-swatches{display:flex;gap:8px;margin-bottom:12px}
.dc-swatch{width:36px;height:36px;border-radius:8px;overflow:hidden;border:2px solid #e5e0d8;cursor:pointer;transition:border-color .2s}
.dc-swatch.active{border-color:#2d4a3e}
.dc-swatch img{width:100%;height:100%;object-fit:cover;display:block}
.dc-panel-kleur{font-size:12px;color:#1a1a18;margin-bottom:16px}
.dc-panel-kleur span{font-weight:500}
.dc-panel-kleur code{margin-left:4px;font-family:monospace;opacity:.5;font-size:12px}
.dc-panel-desc{font-size:12px;color:#4a4a44;line-height:1.6;margin-bottom:16px}
.dc-panel-mat{display:flex;justify-content:space-between;font-size:12px;padding:10px 0;border-top:1px solid #f0ece6;border-bottom:1px solid #f0ece6;margin-bottom:16px;color:#4a4a44}
.dc-panel-mat strong{font-weight:500;color:#1a1a18}
.dc-panel-cta{display:block;width:100%;padding:10px;border-radius:12px;background:#2d4a3e;color:#fff;font-size:12px;font-weight:600;text-align:center;border:none;cursor:pointer;font-family:inherit}

/* Demo container */
.demo-container{position:relative;background:#fff;border:1px solid #e5e0d8;border-radius:16px;padding:16px 12px 6px;box-shadow:0 2px 20px rgba(0,0,0,.04);width:fit-content}
.demo-container-label{position:absolute;top:-11px;left:20px;background:#2d4a3e;color:#fff;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px}

/* Responsive */
@media(max-width:900px){
  .demo-scene{transform:scale(.7);transform-origin:top center;margin:0 auto;margin-bottom:-150px}
  .demo-container{padding:14px 10px 6px}
}
@media(max-width:600px){
  .demo-scene{transform:scale(.55);transform-origin:top center;margin:0 auto;margin-bottom:-230px}
}
@media(max-width:420px){
  .demo-scene{transform:scale(.46);transform-origin:top center;margin:0 auto;margin-bottom:-290px}
}