/* ===== live capability mini-UIs ===== */
.ma{position:relative;width:100%;height:100%;min-height:230px;background:radial-gradient(420px 220px at 85% 0%,rgba(252,20,20,.35),transparent 65%),linear-gradient(140deg,#1c1012,#2c1418 60%,#1a0e10);display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;font-family:inherit}
.ma .ui{width:100%;max-width:330px;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);font-size:12px;color:#1d1416;position:relative}
.ma .ui-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:12.5px;margin-bottom:10px}
.ma .ui-h .lv{font-style:normal;font-size:10.5px;font-weight:700;color:#1aa865;background:#e4f6ec;border-radius:20px;padding:3px 8px}
/* discovery */
.ck{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #f1e9ea;opacity:.35;animation:ckOn 6s var(--d) infinite}
.ma .ck b{width:16px;height:16px;border-radius:50%;border:2px solid #d9cdd0;flex:none;position:relative}
.ma .ck em{margin-left:auto;font-style:normal;font-weight:700;font-size:10.5px;color:#1aa865;background:#e4f6ec;border-radius:10px;padding:2px 7px}
.ma .ck em.w{color:#b07800;background:#fdf3dd}.ma .ck em.v{color:#fff;background:linear-gradient(110deg,#fc1414,#9e0c26)}
@keyframes ckOn{0%,8%{opacity:.35}15%,88%{opacity:1}100%{opacity:.35}}
.ma .ck{--c:#fc1414}.ma .ck b::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:#fc1414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat;transform:scale(0);animation:ckB 6s var(--d) infinite}
@keyframes ckB{0%,8%{transform:scale(0)}15%,88%{transform:scale(1)}100%{transform:scale(0)}}
/* automation */
.lane{display:flex;align-items:center;gap:6px;position:relative;margin:4px 0 12px}
.ma .mdoc{flex:none;width:30px;height:36px;border-radius:5px;background:#ffecec;color:#e0101c;font-weight:800;font-size:9px;display:grid;place-items:center;animation:docMove 3.6s ease-in-out infinite}
@keyframes docMove{0%,100%{transform:scale(1)}10%{transform:scale(1.12)}20%{transform:scale(1)}}
.ma .lane .arrow{color:#c9b9bc;font-weight:700}
.ma .lane::after{content:"";position:absolute;left:52px;right:0;bottom:-6px;height:3px;border-radius:2px;background:linear-gradient(90deg,#fc1414,#9e0c26);transform-origin:left;animation:prog 3.6s linear infinite}
@keyframes prog{0%{transform:scaleX(0)}85%,100%{transform:scaleX(1)}}
.ma .ag{flex:1;text-align:center;padding:7px 0;border-radius:8px;background:#f6f1f2;font-weight:700;font-size:10.5px;color:#7b6d70;animation:agOn 3.6s var(--d) infinite}
@keyframes agOn{0%{background:#f6f1f2;color:#7b6d70}10%,30%{background:linear-gradient(110deg,#fc1414,#9e0c26);color:#fff}45%,100%{background:#fbe4e6;color:#c40e2a}}
.ma .fields{display:grid;gap:4px}.ma .fields span{display:flex;justify-content:space-between;color:#7b6d70;padding:3px 0;border-bottom:1px solid #f4eded}.ma .fields b{color:#1d1416}
.ma .appr{display:flex;gap:6px;margin-top:10px}.ma .appr span{padding:6px 12px;border-radius:7px;font-weight:800;font-size:10.5px}
.ma .appr .b{background:linear-gradient(110deg,#fc1414,#9e0c26);color:#fff;animation:pulse2 3.6s infinite}.ma .appr .g{background:#f3eeee}
@keyframes pulse2{0%,70%{box-shadow:0 0 0 0 rgba(252,20,20,.0)}85%{box-shadow:0 0 0 6px rgba(252,20,20,.25)}100%{box-shadow:0 0 0 0 rgba(252,20,20,0)}}
/* chat */
.ma-chat .q{margin-left:auto;max-width:80%;background:#1d1416;color:#fff;border-radius:12px 12px 3px 12px;padding:8px 11px;animation:qIn 7s infinite}
.ma-chat .ui{min-height:190px}.ma .typing{position:absolute;left:16px;top:96px;display:flex;gap:4px;padding:10px 12px;background:#f6f1f2;border-radius:12px;width:52px;animation:tyShow 7s infinite}
.ma .typing i{width:6px;height:6px;border-radius:50%;background:#b9aaad;animation:dot 1s infinite}.ma .typing i:nth-child(2){animation-delay:.15s}.ma .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);background:#fc1414}}
.ma-chat .a{margin-top:8px;background:#faf6f6;border-radius:12px 12px 12px 3px;padding:9px 11px;line-height:1.45;animation:aIn 7s infinite}
.ma .cites{display:flex;gap:5px;margin-top:6px}.ma .cites span{font-size:9.5px;font-weight:700;color:#e0101c;background:#ffecec;border-radius:6px;padding:2px 6px}
@keyframes qIn{0%{opacity:0;transform:translateY(8px)}6%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes tyShow{0%,6%{opacity:0}9%,24%{opacity:1}27%,100%{opacity:0}}
@keyframes aIn{0%,25%{opacity:0;transform:translateY(8px)}32%,94%{opacity:1;transform:none}100%{opacity:0}}
/* ml */
.gauge{display:flex;align-items:center;gap:12px}.ma .gauge svg{width:150px}
.ma .arc{stroke-dasharray:267;stroke-dashoffset:267;animation:arc 5s ease-out infinite}
@keyframes arc{0%{stroke-dashoffset:267}40%,85%{stroke-dashoffset:48}100%{stroke-dashoffset:267}}
.ma .needle{transform-origin:100px 100px;animation:needle 5s ease-out infinite}
@keyframes needle{0%{transform:rotate(-90deg)}40%,85%{transform:rotate(58deg)}100%{transform:rotate(-90deg)}}
.ma .score{font-size:26px;font-weight:800;line-height:1}.ma .score small{display:block;font-size:10.5px;color:#e0101c;margin-top:4px}
.ma .route{display:grid;gap:4px;margin-top:8px}.ma .route span{padding:5px 8px;border-radius:6px;background:#f6f1f2;color:#7b6d70;font-weight:600;font-size:10.5px}
.ma .route .on{animation:rOn 5s infinite}
@keyframes rOn{0%,38%{background:#f6f1f2;color:#7b6d70}45%,85%{background:linear-gradient(110deg,#fc1414,#9e0c26);color:#fff}100%{background:#f6f1f2;color:#7b6d70}}
/* data */
.bars{display:flex;align-items:flex-end;gap:8px;height:90px;padding:4px 2px;border-bottom:1px solid #eee}
.ma .bars i{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(180deg,#fc1414,#9e0c26);transform-origin:bottom;animation:bar 5s var(--d) infinite}
.ma .bars i:nth-child(odd){background:#f3c6ca}
@keyframes bar{0%{transform:scaleY(0)}25%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.ma .ask{margin-top:9px;color:#7b6d70}.ma .ask b{color:#1d1416;display:block;margin-top:2px}
.ma .stamp{position:absolute;right:14px;bottom:14px;border:2px solid #1aa865;color:#1aa865;font-weight:800;font-size:11px;padding:3px 8px;border-radius:6px;transform:rotate(-6deg) scale(0);animation:stamp 5s infinite}
@keyframes stamp{0%,40%{transform:rotate(-6deg) scale(0)}48%{transform:rotate(-6deg) scale(1.2)}52%,88%{transform:rotate(-6deg) scale(1)}100%{transform:rotate(-6deg) scale(0)}}
/* deploy */
.nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;padding-top:4px}
.ma .nd{text-align:center;padding:10px 4px;border-radius:10px;background:#f6f1f2;font-weight:700;font-size:10.5px;line-height:1.3}
.ma .nd span{display:block;font-size:18px;color:#e0101c;margin-bottom:2px}.ma .nd small{display:block;color:#7b6d70;font-weight:500;font-size:9.5px}
.ma .nd.dk{background:#1d1416;color:#fff}.ma .nd.dk small{color:#cdbfc1}.ma .nd.dk span{color:#ff4d4d}
.ma .pk{position:absolute;top:-2px;left:8%;width:8px;height:8px;border-radius:50%;background:#fc1414;box-shadow:0 0 10px #fc1414;animation:pk 2.4s var(--d) linear infinite}
@keyframes pk{0%{left:8%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:90%;opacity:0}}
.ma .mon{display:flex;justify-content:space-between;margin-top:10px;color:#7b6d70;font-size:10.5px}.ma .mon b{color:#1d1416;display:block;font-size:12px}
@media (prefers-reduced-motion:reduce){.ma *{animation:none!important;opacity:1!important;transform:none!important}}