/* VioVid × Viona — AI create UI */
.viona-create-btn{height:31px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border:1px solid #343d4e;border-radius:8px;background:#1a1d24;color:#edf2ff;font-size:8.5px;font-weight:800;letter-spacing:.01em;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1px 0 #ffffff0b;transition:.2s ease}
.viona-create-btn:hover{background:#202632;border-color:#43516d;transform:translateY(-1px)}
.viona-create-btn .viona-spark{font-size:13px;color:#89a9ff;filter:drop-shadow(0 0 7px #4b70ff77)}
.viona-overlay{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(5,8,14,.58);backdrop-filter:blur(9px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.viona-overlay.show{opacity:1;pointer-events:auto}
.viona-wrap{width:min(660px,calc(100vw - 30px));transform:translateY(8px) scale(.985);transition:.24s cubic-bezier(.2,.8,.2,1)}
.viona-overlay.show .viona-wrap{transform:none}
.viona-composer{width:100%;min-height:104px;border:1px solid #3e424c;border-radius:30px;background:#1e1f23;box-shadow:0 24px 70px #0009,inset 0 1px 0 #ffffff08;overflow:hidden;padding:14px 14px 12px 24px}
.viona-input{display:block;width:100%;height:45px;resize:none;border:0;outline:0;background:transparent;color:#f1f1f4;font:400 13px/1.5 Inter,system-ui,sans-serif;padding:4px 8px 0 0;scrollbar-width:none}
.viona-input::-webkit-scrollbar{display:none}.viona-input::placeholder{color:#a5a6aa}
.viona-bottom{height:35px;display:flex;align-items:center;gap:12px}.viona-plus,.viona-mic,.viona-close-mini{border:0;background:transparent;color:#e7e7ea;display:grid;place-items:center;cursor:pointer;padding:0}
.viona-plus{width:27px;height:27px;font-size:27px;font-weight:200;line-height:1}.viona-plus:hover,.viona-mic:hover{color:#fff}
.viona-spacer{flex:1}.viona-model{display:flex;align-items:center;gap:5px;color:#f3f3f4;font-size:11px;font-weight:500;white-space:nowrap}.viona-model small{font-size:9px;color:#aeb0b6}.viona-model .chev{font-size:12px;color:#d2d2d5;margin-left:1px}
.viona-mic{width:28px;height:28px}.viona-mic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.viona-send{width:39px;height:39px;margin-left:2px;border:0;border-radius:50%;background:#2d4a91;color:#aebee9;display:grid;place-items:center;cursor:pointer;transition:.2s ease}.viona-send:hover{background:#3d62b8;color:#fff;transform:scale(1.03)}.viona-send:disabled{opacity:.45;cursor:not-allowed;transform:none}.viona-send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.viona-hint{min-height:24px;padding:9px 20px 0;color:#a7abb6;font-size:10px;text-align:center;line-height:1.45}.viona-hint strong{color:#d9e3ff}.viona-hint.error{color:#ff9f9f}.viona-hint.success{color:#9fe0c2}
.viona-media-needed{display:none;margin:13px auto 0;width:min(520px,92%);padding:12px 14px;border:1px solid #353a46;border-radius:14px;background:#17191e;color:#aeb1ba;font-size:10px;text-align:center}.viona-media-needed.show{display:block}.viona-media-needed b{color:#fff}.viona-media-needed button{margin-left:8px;border:1px solid #40527b;background:#25355b;color:#dce7ff;border-radius:7px;padding:7px 10px;font-size:9px;cursor:pointer}
.viona-busy .viona-send{animation:vionaPulse 1.25s ease-in-out infinite}@keyframes vionaPulse{50%{box-shadow:0 0 0 8px #35539a20}}
/* Timeline AI build visualization: white dots grow with clip length while Viona creates. */
.track-lanes{position:relative}.viona-timeline-build{position:absolute;inset:0;z-index:34;pointer-events:none;overflow:hidden}.viona-dot-clip{position:absolute;height:28px;border-radius:4px;border:1px solid #ffffff25;background:#141414e8;box-shadow:0 0 0 1px #0008;overflow:hidden;opacity:0;transform:scaleX(.15);transform-origin:left center;animation:vionaClipArrive .55s ease forwards}.viona-dot-fill{position:absolute;inset:0;display:flex;align-items:center;gap:5px;padding:0 7px;overflow:hidden}.viona-dot{flex:0 0 3px;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 7px #fff8;opacity:.9;animation:vionaDotPop .38s ease both}@keyframes vionaClipArrive{to{opacity:1;transform:scaleX(1)}}@keyframes vionaDotPop{from{opacity:0;transform:scale(.25)}to{opacity:.92;transform:scale(1)}}
.viona-timeline-build.finishing .viona-dot-clip{animation:vionaClipDone .55s ease forwards}@keyframes vionaClipDone{to{opacity:0;transform:translateY(-3px) scale(.99)}}
@media(max-width:900px){.viona-create-btn{height:30px;padding:0 8px}.viona-create-btn span:last-child{display:none}.viona-composer{border-radius:24px;padding-left:18px}.viona-model{font-size:10px}.viona-overlay{align-items:flex-start;padding-top:18vh}}

/* Viona Pro state */
.viona-create-btn{position:relative}
.viona-pro-chip{height:16px;display:inline-flex;align-items:center;padding:0 5px;border-radius:5px;border:1px solid #5c6b93;background:#252b3b;color:#b9caff;font-size:6.5px;font-weight:950;letter-spacing:.08em}
.viona-create-btn.is-pro-ready .viona-pro-chip{border-color:#315d58;background:#18332f;color:#9ff0d6}
.viona-create-btn.building{cursor:progress;opacity:.9;border-color:#4a5b82;background:#202637}
.viona-create-btn.building .viona-spark{animation:vionaSparkBuild .8s ease-in-out infinite alternate}
@keyframes vionaSparkBuild{to{opacity:.5;transform:scale(.75) rotate(18deg)}}
body.viona-building .timeline-shell{box-shadow:inset 0 1px 0 #91aaff18}
.viona-timeline-build:before{content:'VIONA';position:absolute;right:10px;top:6px;padding:3px 6px;border:1px solid #ffffff13;border-radius:5px;background:#101216cc;color:#9ca6bd;font-size:6px;font-weight:900;letter-spacing:.15em}
.viona-timeline-build.failed .viona-dot-clip{animation:vionaClipFail .7s ease forwards}
@keyframes vionaClipFail{to{opacity:0;filter:blur(2px);transform:translateY(2px) scaleX(.82)}}
.lane[data-track="text"]{background:linear-gradient(90deg,#3524471c,transparent)}
.track-label[data-track-head="text"] span{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.viona-pro-chip{display:inline-flex!important}.viona-create-label{display:none}}
.track-area>.viona-timeline-build{left:var(--timelineLeft);right:0;top:0;bottom:0}