.chat{max-width:720px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:14px;padding-bottom:140px}
.msg{max-width:92%;padding:14px 18px;border-radius:20px;line-height:1.5}
.msg.ai{background:#fff;border:1px solid var(--sand);align-self:flex-start;border-bottom-left-radius:6px}
.msg.me{background:var(--ink);color:var(--cream);align-self:flex-end;border-bottom-right-radius:6px}
.msg p+p{margin-top:8px}
.qr{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start}
.qr button,.chipb{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--ink);background:transparent;font:600 .95rem Manrope,sans-serif;cursor:pointer;color:var(--ink)}
.qr button:hover,.chipb[aria-pressed=true]{background:var(--ink);color:var(--cream)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;width:100%}
.card{background:#fff;border:2px solid var(--sand);border-radius:18px;padding:12px;text-align:left;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:8px}
.card:hover,.card.sel{border-color:var(--green-d)}
.thumb{position:relative;aspect-ratio:9/12;border-radius:12px;overflow:hidden;background:var(--b1,#F4EFE4)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top;mix-blend-mode:multiply;display:block}
.thumb .bar{position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--b3,#0FA968)}
.card small{color:var(--muted)}
.sw{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sw label{display:flex;flex-direction:column;align-items:center;font-size:.75rem;gap:4px}
.sw input[type=color]{width:44px;height:44px;border:2px solid var(--sand);border-radius:12px;padding:2px;background:#fff;cursor:pointer}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin-top:10px}
.kv input{width:100%;min-height:40px;border:2px solid var(--sand);border-radius:10px;padding:0 10px;font:inherit}
.scenes{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.scenes li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:var(--cream);border-radius:12px;padding:8px 12px}
.scenes b{color:var(--green-d)}
.composer{position:fixed;left:0;right:0;bottom:0;background:var(--cream);border-top:1px solid var(--sand);padding:12px 16px}
.composer form{max-width:760px;margin:0 auto;display:flex;gap:8px}
.composer input{flex:1;min-width:0;min-height:52px;border:2px solid var(--ink);border-radius:999px;padding:0 20px;font:inherit;background:#fff}
@media(min-width:960px){.withside .composer{left:240px}}
.typing{color:var(--muted);font-size:.9rem}
.prev{aspect-ratio:var(--ar,9/16);max-height:420px;margin:10px auto 0;border-radius:16px;background:var(--b2,#15140F);color:var(--b1,#F4EFE4);display:flex;flex-direction:column;justify-content:center;padding:24px;gap:10px;overflow:hidden}
.prev .t{font-weight:800;font-size:1.4rem;line-height:1.1}
.prev .ac{height:8px;width:40%;background:var(--b3,#0FA968);border-radius:4px}
.prog{height:12px;background:var(--sand);border-radius:6px;overflow:hidden;margin-top:10px}.prog i{display:block;height:100%;width:0;background:var(--green-d);transition:width .3s}
.sum{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0}
.sum dt{font-weight:800}
@media(max-width:600px){.cards.st{grid-template-columns:repeat(3,1fr);gap:8px}.cards.st .card{padding:6px;border-radius:12px}.cards.st small{display:none}.cards.st b{font-size:.8rem;line-height:1.2}}
.withside main{margin:0 auto;max-width:800px}
.withside main>.demo{max-width:720px;margin-left:auto;margin-right:auto}
.withside .composer form{max-width:720px}
.row-ai{display:flex;gap:10px;align-items:flex-end;align-self:flex-start;max-width:92%;width:auto}.row-ai .msg{max-width:none;min-width:0}
.av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);display:grid;place-items:center}.av i{width:12px;height:12px;border-radius:50%;background:#0FA968}
.chat>.qr,.chat>.cards{margin-left:42px;width:calc(100% - 42px)}