/* Veroed Robot 2 · engines_av.css · Day 3 chat C: the few additions of Elements (8) and Voices & Music (11) to v103.css.
   Tints: Elements = Images violet (#8b5cf6 · #f1ecfe), Voices & Music = Audio teal (#14b8a6 · #e6f8f5); no red anywhere;
   20 px gaps between boxes; the content column is centred by doors.css. */
.avfolder{display:flex;gap:12px;align-items:flex-start;background:#f1ecfe;border-left:6px solid #8b5cf6;border-radius:14px;padding:14px 16px;margin:0 0 20px;font-size:13.5px;color:#374151}
.avfolder .fi{font-size:22px;line-height:1}
.avfolder span{color:var(--muted);font-size:12.5px}
.vm .avfolder{background:#e6f8f5;border-left-color:#14b8a6}
.elsum{margin-bottom:20px}
.elgrp{color:#533793;margin:20px 0 12px}
.elgrp i{background:#8b5cf6}
.el{margin-bottom:20px;border-left-color:#8b5cf6}
.el.u0{background:#f1ecfe;border-left-color:#8b5cf6}
.el.u1{background:#fdf4e0;border-left-color:#e0a72a}
.el.u2{background:#e9f1fe;border-left-color:#3b82f6}
.el.u3{background:#e6f8f5;border-left-color:#14b8a6}
.el .st.new{background:#f9edd4;color:#7b5b17}
.el .st.found{background:#e9f1fe;color:#1e40af}
.el .st.topic{background:#5b54e6;color:#fff}
.el .uid{font-size:12px;color:var(--muted);margin:2px 0 8px;font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.el .acts{margin-top:20px}
.el .acts .btn.keepx{background:linear-gradient(135deg,#3fb37a,#4fc48a);color:#fff;border-radius:999px;box-shadow:0 6px 16px rgba(63,179,122,.25)}
.el .acts .btn.newx,.el .acts .btn.chgx{background:linear-gradient(135deg,#e0a72a,#e5b44a)!important;color:#fff!important;border-radius:999px}
.el .acts .btn.kept{background:#3fb37a!important;color:#fff!important}
.el .acts .btn:disabled{opacity:.55;cursor:default}
.el .prompt{margin-top:6px}
.el .pic.wait{color:var(--muted)}
.el .rcbox{margin-top:20px}
.pv{margin:12px 0 4px}
.pv .vh{display:block!important;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.pv .vrow,.samples .vrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vchip{font:inherit;font-size:13px;padding:7px 12px;border-radius:999px;border:1.5px solid #d1cff8;background:#fff;color:#3b3695;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.vchip i{font-style:normal;width:20px;height:20px;border-radius:50%;background:#e9e8fb;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.vchip.cur{background:#3fb37a;border-color:#3fb37a;color:#fff}
.vchip.cur i{background:rgba(255,255,255,.3);color:#fff}
.vchip.pressed{filter:brightness(.9)}
.vnotes{margin-top:8px}
.vnotes .nb{font-size:13px;color:#374151;background:#fff;border-radius:10px;padding:8px 10px;margin-top:6px}
.vnotes .nb small{display:block;color:var(--muted);margin-top:2px}
.vnotes .nb b{color:#533793}
.working{margin-top:14px}
.madewith{font-size:12px;color:var(--muted);margin-top:8px}
.jumpwrap{margin-bottom:20px}
.gi{margin-bottom:20px}
.box{margin-bottom:20px}
/* Voices & Music (Audio teal) */
.vm .rc{display:grid;grid-template-columns:120px 1fr;gap:16px;border:0;border-left:8px solid #14b8a6;border-radius:20px;padding:16px;margin-bottom:20px;box-shadow:0 6px 18px rgba(20,30,60,.07);background:#e6f8f5}
.vm .rc.k0{background:#e6f8f5;border-left-color:#14b8a6}
.vm .rc.k1{background:#f1ecfe;border-left-color:#8b5cf6}
.vm .rc.k2{background:#fdf4e0;border-left-color:#e0a72a}
.vm .rc.k3{background:#e9f1fe;border-left-color:#3b82f6}
.vm .rc .id{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink);margin-bottom:6px;flex-wrap:wrap}
.vm .rc .id::before{content:attr(data-n);display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:30px;padding:0 8px;border-radius:10px;color:#fff;font-weight:700;font-size:12.5px;background:#14b8a6}
.vm .rc.k1 .id::before{background:#8b5cf6}.vm .rc.k2 .id::before{background:#e0a72a}.vm .rc.k3 .id::before{background:#3b82f6}
.vm .stpill{display:inline-flex!important;align-items:center;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;margin:0 0 8px}
.vm .stpill.found{background:#e9f1fe;color:#1e40af}.vm .stpill.new{background:#f9edd4;color:#7b5b17}.vm .stpill.saved{background:#5b54e6;color:#fff}.vm .stpill.making{background:#eef2f7;color:#334155}
.vm .rc .uid{font-size:12px;color:var(--muted);margin:0 0 8px;font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.vm .rc .prompt{background:#fff;border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.55;color:#374151;margin:6px 0 10px}
.vm .rc .prompt b{display:block;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.vm .thumb.au{width:120px;height:72px!important;border-radius:14px;background:#f2f1fd;color:#5b54e6;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;user-select:none;font-weight:600;font-size:13px;text-align:center;padding:6px}
.vm .thumb.au .lbl2{font-size:13px}
.vm .thumb.au .trk{width:80%;height:4px;border-radius:2px;background:#d1cff8;overflow:hidden}
.vm .thumb.au .trk i{display:block;height:100%;width:0;background:#5b54e6;transition:width 6s linear}
.vm .thumb.au.playing{background:#f9edd4;color:#7b5b17}
.vm .thumb.au.playing .trk i{width:100%;background:#e0a72a}
.vm .thumb.au audio{display:none}
.vm .smplbl{font-size:12.5px;color:var(--muted);font-weight:600;margin:10px 0 6px;letter-spacing:.3px}
.vm .vers{margin:8px 0 4px}
.vm .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.vm .acts .btn{width:100%;padding:12px 8px;border-radius:999px;font-weight:600;border:0}
.vm .acts .btn.keepx{background:linear-gradient(135deg,#3fb37a,#4fc48a);color:#fff;box-shadow:0 6px 16px rgba(63,179,122,.25)}
.vm .acts .btn.newx{background:linear-gradient(135deg,#e0a72a,#e5b44a)!important;color:#fff!important}
.vm .acts .btn.kept{background:#3fb37a!important;color:#fff!important}
.vm .acts .btn:disabled{background:#e5e7eb!important;color:#6b7280!important;box-shadow:none;cursor:default}
.vm .rc .rcbox{margin-top:20px}
.vm .rc .state{font-size:13px;color:#256b49;margin-top:8px;min-height:18px}
.topicset{background:#e9f1fe;border:0;border-left:6px solid #3b82f6;border-radius:18px;padding:16px 18px;margin:0 0 20px}
.topicset h5{margin:0 0 8px;font-size:15px}
.topicset .row2{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid rgba(59,130,246,.18);font-size:14px;flex-wrap:wrap}
.topicset .row2:first-of-type{border-top:0}
.topicset .row2 span{color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:12.5px;word-break:break-all}
.topicset .how{font-size:13px;color:var(--muted);margin-top:8px}
.vm .lockcard.fsl{margin-bottom:20px}
.fsstate{margin-bottom:20px}
.browser.phone .vm .rc{grid-template-columns:1fr}
.browser.phone .vm .thumb.au{width:100%}
.browser.phone .vm .acts,.browser.phone .el .acts{grid-template-columns:1fr}
.browser.phone .el{grid-template-columns:1fr}
.browser.phone .el .pic{width:100%;height:200px}
.browser.phone .lockcard.fsl .r{width:100%}
@media (max-width:560px){.vm .rc{grid-template-columns:1fr}.vm .thumb.au{width:100%}.el{grid-template-columns:1fr}.el .pic{width:100%;height:200px}}
/* the picture pop-up of an element version */
.avlb{position:fixed;inset:0;background:rgba(20,24,40,.82);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.avlb .frame{position:relative;width:min(92vw,720px);background:#fff;border-radius:20px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.avlb .pic{width:100%;aspect-ratio:1/1;max-height:70vh;border-radius:14px;background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#f2f1fd}
.avlb .cap{margin-top:12px;font-size:14px;color:#374151;line-height:1.5}
.avlb .cap b{display:block;margin-bottom:4px}
.avlb .cap small{display:block;color:var(--muted);margin-top:6px}
.avlb .close{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;border:0;background:#334155;color:#fff;font-size:22px;cursor:pointer}
.avlb .nav{position:absolute;top:45%;width:40px;height:40px;border-radius:50%;border:0;background:#5b54e6;color:#fff;font-size:22px;cursor:pointer}
.avlb .nav.l{left:-4px}.avlb .nav.r{right:-4px}
.avlb .nav:disabled{opacity:.3;cursor:default}
