/* Beam is a protected handoff, not an upload progress animation. */
.cosmos-beam { box-sizing:border-box; width:min(660px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 40px); margin:auto; padding:32px; border:1px solid var(--cosmos-line-strong); border-radius:12px; color:var(--cosmos-paper); background:var(--cosmos-night); box-shadow:0 32px 120px #000a; font:15px/1.55 var(--cosmos-font); overflow:auto; }
.cosmos-beam[hidden] { display:none!important; }
.cosmos-beam::backdrop { background:#02060cce; backdrop-filter:blur(5px); }
.cosmos-beam header { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.cosmos-beam h2 { margin:5px 0 0; font:500 clamp(29px,4vw,42px)/1.12 var(--cosmos-font); letter-spacing:-.045em; }
.cosmos-beam .cosmos-beam-label { margin:0; font:11px/1.5 var(--cosmos-mono); letter-spacing:.12em; color:var(--cosmos-signal); }
.cosmos-beam button { min-height:44px; padding:10px 14px; border:1px solid var(--cosmos-line-strong); border-radius:6px; background:transparent; color:var(--cosmos-paper); font:inherit; cursor:pointer; }
.cosmos-beam button:disabled { opacity:.55; cursor:not-allowed; }
.cosmos-beam button:not(:disabled):hover { background:var(--cosmos-raised); border-color:var(--cosmos-sky); }
.cosmos-beam header>button { flex:0 0 44px; padding:10px; }
.cosmos-beam button:focus-visible,.cosmos-beam a:focus-visible { outline:2px solid var(--cosmos-signal); outline-offset:3px; }
.cosmos-beam-help { margin:16px 0 22px; color:var(--cosmos-soft); }
.cosmos-beam-object { display:flex; align-items:center; gap:17px; margin:22px 0 28px; padding:22px 0; border-block:1px solid var(--cosmos-line); }
.cosmos-beam-object>span { display:grid; place-items:center; flex:0 0 50px; height:58px; color:var(--cosmos-sky); background:var(--cosmos-raised); clip-path:polygon(0 0,75% 0,100% 23%,100% 100%,0 100%); }
.cosmos-beam-object>div { min-width:0; }
.cosmos-beam-object small { font:10px/1.5 var(--cosmos-mono); color:var(--cosmos-muted); letter-spacing:.07em; }
.cosmos-beam-object strong { display:block; font-size:17px; font-weight:500; overflow-wrap:anywhere; }
.cosmos-beam-object p { margin:5px 0 0; color:var(--cosmos-muted); font-size:13px; }
.cosmos-beam-targets { display:grid; margin:14px 0 8px; max-height:38dvh; overflow:auto; }
.cosmos-beam-targets button { display:flex; align-items:center; gap:16px; text-align:left; padding:17px 10px; border:0; border-bottom:1px solid var(--cosmos-line); border-radius:0; }
.cosmos-beam-targets button>i { flex:0 0 32px; color:var(--cosmos-sky); }
.cosmos-beam-targets button>span { flex:1; min-width:0; }
.cosmos-beam-targets strong,.cosmos-beam-targets small { display:block; overflow-wrap:anywhere; }
.cosmos-beam-targets strong { font-weight:500; }
.cosmos-beam-targets small { font-size:12px; color:var(--cosmos-muted); }
.cosmos-beam .cosmos-beam-text-button { border:0; padding-left:0; color:var(--cosmos-soft); font-size:13px; }
.cosmos-beam footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:24px; padding-top:18px; border-top:1px solid var(--cosmos-line); color:var(--cosmos-muted); font-size:12px; }
.cosmos-beam footer span,.cosmos-beam footer a { display:flex; align-items:center; gap:7px; }
.cosmos-beam footer a { min-height:32px; color:var(--cosmos-soft); }
.cosmos-beam-signal { position:relative; display:grid; grid-template-columns:1fr minmax(70px,1.1fr) 1fr; align-items:start; margin:32px 0; padding:22px 0 10px; overflow:hidden; }
.cosmos-beam-signal>div { position:relative; display:grid; justify-items:center; gap:15px; text-align:center; min-width:0; }
.cosmos-beam-signal>div>i { display:grid; place-items:center; height:68px; width:68px; border:1px solid var(--cosmos-line-strong); border-radius:50%; color:var(--cosmos-sky); background:var(--cosmos-panel); }
.cosmos-beam-signal>div>span { max-width:100%; font-size:12px; line-height:1.5; color:var(--cosmos-soft); overflow-wrap:anywhere; }
.cosmos-beam-path { position:relative; margin-top:33px; height:1px; background:var(--cosmos-line-strong); }
.cosmos-beam-path>b { position:absolute; inset:0; background:var(--cosmos-signal); opacity:.45; transform-origin:left; }
.cosmos-beam-path>i { position:absolute; top:-16px; left:0; width:100%; height:32px; display:grid; place-items:center; color:var(--cosmos-signal); }
.cosmos-beam-path>i>svg { background:var(--cosmos-night); box-sizing:content-box; padding:7px; border-radius:4px; }
.cosmos-beam-signal[data-beam-flight] .cosmos-beam-path>i { animation:cosmos-beam-travel 850ms cubic-bezier(.2,.75,.2,1) both; transform:translateX(50%); }
.cosmos-beam-signal[data-beam-flight] .cosmos-beam-path>b { animation:cosmos-beam-line 650ms cubic-bezier(.2,.75,.2,1) both; }
.cosmos-beam[data-beam-flight] .cosmos-beam-object>span { animation:cosmos-beam-compress 550ms ease-out; }
.cosmos-beam-signal:is([data-phase=accepted],[data-phase=incoming])>div:last-child>i { border-color:var(--cosmos-signal); animation:cosmos-beam-arrive 650ms ease-out; }
.cosmos-beam-signal:is([data-phase=expired],[data-phase=cancelled],[data-phase=dismissed]) .cosmos-beam-path>b { opacity:0; }
.cosmos-beam-signal[data-phase=accepted] .cosmos-beam-path>i { transform:translateX(50%); }
.cosmos-beam-signal:is([data-phase=expired],[data-phase=cancelled],[data-phase=dismissed]) .cosmos-beam-path>i { opacity:.25; }
.cosmos-beam-outcome h3 { margin:0 0 9px; font:500 23px/1.3 var(--cosmos-font); letter-spacing:-.025em; }
.cosmos-beam-outcome p { color:var(--cosmos-soft); margin:0; }
.cosmos-beam-outcome small { display:block; color:var(--cosmos-muted); margin-top:12px; }
.cosmos-beam-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:24px; }
.cosmos-beam-actions>span { color:var(--cosmos-muted); font-size:12px; }
.cosmos-beam .cosmos-beam-primary { display:flex; align-items:center; justify-content:center; gap:10px; background:var(--cosmos-paper); color:var(--cosmos-void); border-color:var(--cosmos-paper); }
.cosmos-beam .cosmos-beam-primary:hover:not(:disabled) { color:var(--cosmos-paper); }
.cosmos-beam-error { margin:18px 0 0; padding:12px 14px; border-left:2px solid var(--cosmos-negative); background:#e9a7a008; color:var(--cosmos-negative); font-size:13px; }
.cosmos-beam-receive-state { color:var(--cosmos-soft); font-size:14px; }
.cosmos-tv-incoming .cosmos-beam-signal { margin:0 0 24px; }
.cosmos-tv-incoming .cosmos-beam-signal>div>span { font-size:clamp(17px,1.3vw,25px); }
.cosmos-tv-incoming .cosmos-beam-object { margin:0; padding:0; border:0; }
.cosmos-tv-incoming .cosmos-beam-object small { font-size:16px; }
.cosmos-tv-incoming .cosmos-beam-object strong { font-size:clamp(24px,2vw,36px); }
.cosmos-tv-incoming .cosmos-beam-object p { font-size:18px; }
.cosmos-tv-incoming [data-beam-error] { color:var(--cosmos-negative); }
@keyframes cosmos-beam-travel { from { transform:translateX(-50%) scale(.6); opacity:0; } 25% { opacity:1; } to { transform:translateX(50%) scale(1); opacity:1; } }
@keyframes cosmos-beam-line { from { transform:scaleX(0); opacity:0; } to { transform:scaleX(1); opacity:.45; } }
@keyframes cosmos-beam-compress { 0%,100% { transform:scale(1); } 35% { transform:scale(.78); } }
@keyframes cosmos-beam-arrive { from { box-shadow:0 0 0 0 #8ad7df60; } to { box-shadow:0 0 0 22px #8ad7df00; } }
@media(max-width:600px) { .cosmos-beam { width:calc(100vw - 20px); padding:24px 18px; max-height:calc(100dvh - 24px); } .cosmos-beam-signal { margin:22px 0; } .cosmos-beam-actions>button { flex:1; } .cosmos-beam-object strong { font-size:16px; } .cosmos-beam-signal>div>i { width:58px;height:58px; } .cosmos-beam-path { margin-top:28px; } }
[data-beam-paused] .cosmos-beam-signal *,[data-beam-paused] .cosmos-beam-object>span { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) { .cosmos-beam *, .cosmos-beam *::before,.cosmos-tv-incoming * { animation:none!important; transition:none!important; } }