/* Citely — the shared "we are working" state. * * These operations are real AI calls: 20-90 seconds, not "a few seconds". A * disabled button with changed text reads as a frozen page at that length, so * this shows motion, what stage it is at, and how long it has been going — * enough that waiting feels like progress instead of a hang. */ .cw{display:flex;align-items:center;gap:20px;padding:30px 28px;border-radius:18px; border:1px solid var(--line,rgba(255,255,255,.08)); background:linear-gradient(180deg,rgba(124,108,255,.07),rgba(255,255,255,.015) 60%)} @media(max-width:620px){.cw{flex-direction:column;text-align:center;gap:16px;padding:26px 20px}} /* Concentric rings pulsing outward from a solid core. */ .cw-orb{position:relative;width:54px;height:54px;flex:none} .cw-orb i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--violet,#7C6CFF); opacity:0;animation:cw-ping 2.1s cubic-bezier(.2,.7,.3,1) infinite} .cw-orb i:nth-child(2){animation-delay:.7s} .cw-orb i:nth-child(3){animation-delay:1.4s} .cw-orb b{position:absolute;inset:38%;border-radius:50%; background:linear-gradient(135deg,var(--cyan,#4FD8FF),var(--violet,#7C6CFF)); box-shadow:0 0 16px rgba(124,108,255,.7);animation:cw-core 2.1s ease-in-out infinite} @keyframes cw-ping{0%{transform:scale(.34);opacity:.9}100%{transform:scale(1);opacity:0}} @keyframes cw-core{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}} .cw-body{flex:1;min-width:0} .cw-title{font-family:'Unbounded',sans-serif;font-size:15px;font-weight:600;color:var(--paper,#F2F1FA)} .cw-step{display:block;font-size:12.5px;color:var(--dim,#9C98C6);margin-top:5px;min-height:1.4em; animation:cw-fade .4s ease} @keyframes cw-fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} .cw-bar{position:relative;height:4px;border-radius:99px;background:rgba(255,255,255,.07);margin-top:14px;overflow:hidden} .cw-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px; background:linear-gradient(90deg,var(--cyan,#4FD8FF),var(--violet,#7C6CFF)); transition:width .9s cubic-bezier(.2,.7,.2,1)} /* A sheen so the bar still reads as alive while it is easing very slowly. */ .cw-bar::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); animation:cw-sheen 1.9s ease-in-out infinite} @keyframes cw-sheen{to{transform:translateX(100%)}} .cw-foot{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:11.5px;color:var(--dim,#9C98C6)} .cw-time{font-family:'IBM Plex Mono',monospace;background:rgba(255,255,255,.05); border:1px solid var(--line,rgba(255,255,255,.08));border-radius:99px;padding:2px 9px} .cw-note{opacity:.75} /* Slow operations earn a reassurance line instead of silence. */ .cw.is-long .cw-note::before{content:"Still going — "} /* ---------- stepped overlay for multi-pass operations ---------- Modules split their work into several small model calls so no single call outlives the server's request limit. That makes the total wait longer, so it has to be legible: what is done, what is running, what is left. EVERY rule below is scoped under .cw-modal-wrap on purpose. The app ships a global reset — `.citely-app *{margin:0;padding:0}` — and this overlay is appended to , which carries that class, so the reset matches its children too. At equal specificity the later stylesheet wins, and working.css is enqueued FIRST, so unscoped rules here lose their padding and the text runs into the edges of the card. */ body .cw-modal-wrap{position:fixed;inset:0;z-index:2000;display:flex; align-items:center;justify-content:center;padding:20px; background:rgba(11,10,26,.76);backdrop-filter:blur(6px); animation:cwFade .18s ease} @keyframes cwFade{from{opacity:0}to{opacity:1}} body.cw-modal-open{overflow:hidden} .cw-modal-wrap .cw-modal{width:100%;max-width:440px;max-height:calc(100vh - 40px); display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box; border:1px solid var(--line2,rgba(255,255,255,.14));border-radius:16px; background:var(--panel,#12102A);box-shadow:0 24px 70px rgba(0,0,0,.55); animation:cwRise .22s cubic-bezier(.2,.8,.3,1)} @keyframes cwRise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}} .cw-modal-wrap .cw-modal-body{padding:20px 22px;overflow-y:auto;box-sizing:border-box} .cw-modal-wrap .cw-modal-head{display:flex;align-items:baseline;justify-content:space-between; gap:14px;margin:0 0 14px;padding:0} .cw-modal-wrap .cw-modal-head b{font-size:15px;line-height:1.3;color:var(--paper,#F2F1FA); font-weight:700;min-width:0} .cw-modal-wrap .cw-modal-head span{flex:0 0 auto;font-size:11px;color:var(--dim,#9C98C6); font-family:'IBM Plex Mono',monospace;white-space:nowrap} .cw-modal-wrap .cw-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.09); overflow:hidden;margin:0 0 14px;padding:0} .cw-modal-wrap .cw-bar i{display:block;height:100%;border-radius:3px; background:linear-gradient(90deg,var(--violet,#7C6CFF),var(--cyan,#4FD8FF)); transition:width .45s ease} .cw-modal-wrap .cw-rows{display:flex;flex-direction:column;gap:2px;margin:0;padding:0} .cw-modal-wrap .cw-row{display:flex;align-items:center;gap:10px;margin:0;padding:5px 0; font-size:13px;line-height:1.35;color:var(--dim,#9C98C6);transition:color .25s ease} .cw-modal-wrap .cw-row-ic{flex:0 0 18px;width:18px;height:18px;border-radius:50%; font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line2,rgba(255,255,255,.14));box-sizing:border-box} .cw-modal-wrap .cw-row-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cw-modal-wrap .cw-row.done,.cw-modal-wrap .cw-row.run{color:var(--paper,#F2F1FA)} .cw-modal-wrap .cw-row.done .cw-row-ic{border-color:transparent; background:var(--violet,#7C6CFF);color:#fff} .cw-modal-wrap .cw-row.run .cw-row-ic{border-color:rgba(124,108,255,.55)} .cw-modal-wrap .cw-row.fail .cw-row-ic{border-color:rgba(255,182,92,.6);color:var(--amber,#FFB65C)} .cw-modal-wrap .cw-modal-foot{margin:15px 0 0;padding:13px 0 0; border-top:1px solid var(--line2,rgba(255,255,255,.14)); font-size:11.5px;line-height:1.55;color:var(--dim,#9C98C6)} .cw-modal-wrap .cw-modal-foot.warn b{color:var(--amber,#FFB65C)} .cw-modal-wrap .cw-modal-acts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0;padding:0} @media (max-width:640px){ body .cw-modal-wrap{padding:16px} .cw-modal-wrap .cw-modal{max-width:100%;max-height:calc(100vh - 32px)} .cw-modal-wrap .cw-modal-body{padding:18px} .cw-modal-wrap .cw-modal-head b{font-size:14px} } /* The overlay's own buttons. It is used from several screens and cannot borrow classes from any one module's stylesheet — doing so rendered a bare white button wherever that stylesheet was not enqueued. */ body .cw-modal-wrap .cw-btn{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer; padding:9px 14px;border-radius:9px;box-sizing:border-box; color:var(--paper,#F2F1FA);background:rgba(255,255,255,.06); border:1px solid var(--line2,rgba(255,255,255,.14)); transition:background .16s ease,border-color .16s ease} body .cw-modal-wrap .cw-btn:hover{background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.26)} body .cw-modal-wrap .cw-btn-go{color:#fff;border-color:transparent; background:linear-gradient(135deg,var(--violet,#7C6CFF),#5A4BD8)} body .cw-modal-wrap .cw-btn-go:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--violet,#7C6CFF),#5A4BD8)}