/* Generation artwork: an aurora painting itself while an image is made, a page writing itself
 * while a document is prepared. Transform and opacity animations only, so frames stay cheap;
 * everything stands still under prefers-reduced-motion. */
.generation-artwork{display:flex;flex-direction:column;gap:12px;max-width:100%;padding:4px 0}
.generation-artwork .artwork-canvas{position:relative;overflow:hidden;width:min(320px,100%);height:188px;border-radius:24px;background:#131318;border:1px solid rgba(255,255,255,.14);isolation:isolate;contain:paint}
.generation-artwork.is-compact .artwork-canvas{height:150px}
.artwork-aurora{position:absolute;width:66%;aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;will-change:transform;animation:artwork-drift 9s ease-in-out infinite alternate}
.artwork-aurora.a{left:-8%;top:-18%;background:radial-gradient(circle,rgba(78,163,255,.62) 0%,rgba(78,163,255,.25) 45%,rgba(78,163,255,0) 70%)}
.artwork-aurora.b{right:-12%;top:-4%;width:58%;background:radial-gradient(circle,rgba(138,125,255,.6) 0%,rgba(138,125,255,.24) 45%,rgba(138,125,255,0) 70%);animation-duration:11s;animation-delay:-3s}
.artwork-aurora.c{left:18%;bottom:-30%;width:52%;background:radial-gradient(circle,rgba(255,138,176,.58) 0%,rgba(255,138,176,.22) 45%,rgba(255,138,176,0) 70%);animation-duration:8s;animation-delay:-5s}
.artwork-aurora.d{right:10%;bottom:-14%;width:40%;background:radial-gradient(circle,rgba(255,196,120,.55) 0%,rgba(255,196,120,.2) 45%,rgba(255,196,120,0) 70%);animation-duration:12s;animation-delay:-7s}
@keyframes artwork-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14%,10%,0) scale(1.08)}100%{transform:translate3d(-10%,16%,0) scale(.96)}}
.artwork-brush{position:absolute;top:-20%;bottom:-20%;left:0;width:26%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.26),rgba(255,255,255,0));transform:skewX(-18deg) translate3d(-160%,0,0);mix-blend-mode:screen;will-change:transform;animation:artwork-brush 2.8s linear infinite}
@keyframes artwork-brush{to{transform:skewX(-18deg) translate3d(520%,0,0)}}
.artwork-spark{position:absolute;width:9px;height:9px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;will-change:transform,opacity;animation:artwork-spark 3.9s ease-in-out infinite}
.artwork-spark.s1{left:18%;top:28%}.artwork-spark.s2{left:72%;top:22%;width:7px;height:7px;animation-delay:-1.2s}.artwork-spark.s3{left:58%;top:68%;width:11px;height:11px;animation-delay:-2.1s}.artwork-spark.s4{left:30%;top:74%;width:6px;height:6px;animation-delay:-3.2s}.artwork-spark.s5{left:86%;top:56%;width:8px;height:8px;animation-delay:-.5s}
@keyframes artwork-spark{0%,55%,100%{opacity:0;transform:scale(.35)}70%{opacity:1;transform:scale(1)}85%{opacity:.6;transform:scale(.8)}}
.artwork-pill{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(20,20,26,.55);border:1px solid rgba(255,255,255,.14);color:#f7f7f9;font:600 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.02em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}
.artwork-pill i{flex:none;width:8px;height:8px;border-radius:50%;background:#4ea3ff;animation:artwork-pulse 1.6s ease-in-out infinite}
@keyframes artwork-pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
.artwork-meta{display:flex;flex-direction:column;gap:6px;padding:0 4px}
.artwork-meta strong{color:#f7f8fb;font-size:16px;font-weight:600}
.artwork-meta p{margin:0;color:rgba(255,255,255,.7);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.generation-artwork.is-document .artwork-page{position:relative;overflow:hidden;width:224px;max-width:100%;height:150px;border-radius:18px;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 5px 10px rgba(0,0,0,.12);contain:paint}
.artwork-lines{position:absolute;inset:18px 18px auto;display:flex;flex-direction:column;gap:7px;animation:artwork-page-turn 4s linear infinite}
.artwork-lines i{display:block;height:5px;border-radius:3px;background:#cdcdd3;transform-origin:left center;transform:scaleX(0);will-change:transform;animation:artwork-write-1 4s linear infinite}
.artwork-lines i:first-child{height:8px;margin-bottom:3px;background:#c2c2c9}
.artwork-lines i:nth-child(1){width:50%;animation-name:artwork-write-1}
@keyframes artwork-write-1{0%,0.00%{transform:scaleX(0)}10.57%,100%{transform:scaleX(1)}}
.artwork-lines i:nth-child(2){width:78%;animation-name:artwork-write-2}
@keyframes artwork-write-2{0%,10.57%{transform:scaleX(0)}21.14%,100%{transform:scaleX(1)}}
.artwork-lines i:nth-child(3){width:64%;animation-name:artwork-write-3}
@keyframes artwork-write-3{0%,21.14%{transform:scaleX(0)}31.71%,100%{transform:scaleX(1)}}
.artwork-lines i:nth-child(4){width:72%;animation-name:artwork-write-4}
@keyframes artwork-write-4{0%,31.71%{transform:scaleX(0)}42.29%,100%{transform:scaleX(1)}}
.artwork-lines i:nth-child(5){width:56%;animation-name:artwork-write-5}
@keyframes artwork-write-5{0%,42.29%{transform:scaleX(0)}52.86%,100%{transform:scaleX(1)}}
.artwork-lines i:nth-child(6){width:74%;animation-name:artwork-write-6}
@keyframes artwork-write-6{0%,52.86%{transform:scaleX(0)}63.43%,100%{transform:scaleX(1)}}
.artwork-lines i:nth-child(7){width:60%;animation-name:artwork-write-7}
@keyframes artwork-write-7{0%,63.43%{transform:scaleX(0)}74.00%,100%{transform:scaleX(1)}}
@keyframes artwork-page-turn{0%,84%{opacity:1}100%{opacity:0}}
.artwork-pen{position:absolute;left:0;top:0;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:radial-gradient(circle,rgba(78,163,255,.55) 0%,rgba(78,163,255,0) 70%);opacity:0;will-change:transform,opacity;animation:artwork-pen 4s linear infinite;pointer-events:none}
.artwork-pen::after{content:"";position:absolute;left:13.5px;top:13.5px;width:5px;height:5px;border-radius:50%;background:#4ea3ff}
@keyframes artwork-pen{0%{opacity:0;transform:translate3d(18px,22px,0)}0.00%{transform:translate3d(18px,22.0px,0);opacity:1}10.57%{transform:translate3d(112.0px,22.0px,0);opacity:1}10.57%{transform:translate3d(18px,38.5px,0);opacity:1}21.14%{transform:translate3d(164.6px,38.5px,0);opacity:1}21.14%{transform:translate3d(18px,50.5px,0);opacity:1}31.71%{transform:translate3d(138.3px,50.5px,0);opacity:1}31.71%{transform:translate3d(18px,62.5px,0);opacity:1}42.29%{transform:translate3d(153.4px,62.5px,0);opacity:1}42.29%{transform:translate3d(18px,74.5px,0);opacity:1}52.86%{transform:translate3d(123.3px,74.5px,0);opacity:1}52.86%{transform:translate3d(18px,86.5px,0);opacity:1}63.43%{transform:translate3d(157.1px,86.5px,0);opacity:1}63.43%{transform:translate3d(18px,98.5px,0);opacity:1}74.00%{transform:translate3d(130.8px,98.5px,0);opacity:1}74.00%{opacity:1}75.00%,100%{opacity:0;transform:translate3d(130.8px,98.5px,0)}}
.artwork-turn{position:absolute;left:0;right:0;top:0;height:60px;margin-top:-30px;background:linear-gradient(180deg,rgba(78,163,255,0),rgba(78,163,255,.12),rgba(78,163,255,0));opacity:0;will-change:transform,opacity;animation:artwork-turn 4s linear infinite;pointer-events:none}
@keyframes artwork-turn{0%,84%{opacity:0;transform:translate3d(0,0,0)}86%{opacity:1}100%{opacity:1;transform:translate3d(0,150px,0)}}
.artwork-band{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;gap:8px;padding:22px 14px 12px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.85) 55%,#fff);color:#1d1d22;font:600 12px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.artwork-band i{flex:none;width:7px;height:7px;border-radius:50%;background:#4ea3ff}
.artwork-band span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.has-generation-artwork>.typing-indicator,.has-generation-artwork>.typing-dots{display:none}
.has-generation-artwork .stream-progress .stream-spinner{display:none}
@media (prefers-reduced-motion:reduce){.generation-artwork *{animation:none!important}.artwork-lines i{transform:scaleX(1)}.artwork-spark{opacity:.6;transform:scale(.8)}.artwork-brush{transform:skewX(-18deg) translate3d(180%,0,0)}.artwork-pen,.artwork-turn{opacity:0}}

/* A clip being made from the chat: the aurora artwork in the video hue, with a status line under it. */
.generation-artwork.is-video .artwork-canvas { filter: hue-rotate(300deg) saturate(1.15); }
.chat-video-progress { margin: 4px 0 18px; max-width: 420px; }
.chat-video-progress .chat-video-status { margin: 8px 0 0; font-size: 13px; color: var(--moh-secondary-text, #c8c9d0); }
.chat-video-progress.is-failed .chat-video-status { color: var(--moh-warning-text, #f0b0a0); }

/* Video pack offer in the studio; urgent once the allowance is used. */
.video-studio .video-packs{margin-top:10px;display:grid;gap:8px}
.video-studio .video-packs-title{margin:0;font-size:14px;font-weight:600}
.video-studio .video-pack-list{display:grid;gap:6px}
.video-studio .video-topup{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;width:100%;text-align:start;margin:0}
.video-studio .video-pack-units{font-size:13px;opacity:.7}
.video-studio .video-pack-price{font-weight:600;font-variant-numeric:tabular-nums}
.video-studio .video-topup.is-urgent{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.video-studio .video-packs-note{margin:0;font-size:12px;opacity:.7}