/* Each phase completes before the next; the photo, status and divider never transition. */
.fd-remote-machine-identity{position:relative;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fd-remote-machine-identity>.fd-remote-machine-name{width:100%;text-align:center;opacity:1;transform:none;filter:none}
.fd-remote-machine[data-remote-transition=name-out] .fd-remote-machine-name{animation:fd-machine-name-warp .32s cubic-bezier(.4,0,.2,1) both}
.fd-remote-machine:is([data-remote-transition=loader-in],[data-remote-transition=loading],[data-remote-transition=loader-out]) .fd-remote-machine-name{opacity:0}
.fd-remote-machine[data-remote-transition=name-in] .fd-remote-machine-name{animation:fd-machine-name-warp .32s cubic-bezier(.4,0,.2,1) reverse both}
@keyframes fd-machine-name-warp{0%{opacity:1;transform:none;filter:blur(0)}30%{opacity:.7;transform:translateX(-7%) skewX(-7deg) scaleX(1.1);filter:blur(1.8px)}65%{opacity:.3;transform:translateX(-14%) skewX(-13deg) scaleX(1.2);filter:blur(0.25rem)}100%{opacity:0;transform:translateX(-38%) skewX(-26deg) scaleX(1.62);filter:blur(0.625rem)}}
.fd-remote-connection-loader{position:absolute;inset:0.3125rem;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;isolation:isolate;--fd-speed-color:#0879ff}
.fd-remote-machine:is([data-remote-transition=loader-in],[data-remote-transition=loading],[data-remote-transition=loader-out]) .fd-remote-connection-loader{visibility:visible;opacity:1}
.fd-remote-machine[data-remote-transition=loader-in] .fd-remote-speed-scene{animation:fd-machine-loader-arrive .36s cubic-bezier(.22,1,.36,1) both}
.fd-remote-machine[data-remote-transition=loader-out] .fd-remote-speed-scene{animation:fd-machine-loader-leave .36s cubic-bezier(.4,0,.2,1) both}
@keyframes fd-machine-loader-arrive{from{opacity:0;transform:translateX(38%) skewX(-22deg) scaleX(1.5);filter:blur(0.5rem)}to{opacity:1;transform:none;filter:none}}
@keyframes fd-machine-loader-leave{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:translateX(-38%) skewX(-22deg) scaleX(1.5);filter:blur(0.5rem)}}
.fd-remote-connection-loader::after{content:"";position:absolute;inset:0;z-index:2;backdrop-filter:blur(0.25rem);mask-image:radial-gradient(ellipse at center,transparent 45%,#0005 75%,#000 100%);pointer-events:none}
.fd-remote-speed-scene{position:absolute;inset:0}
.fd-remote-speeder-frame{position:absolute;left:50%;top:50%;width:7.875rem;height:1.75rem;transform:translate(-50%,-50%) scale(.46);transform-origin:center}
.fd-remote-machine:is([data-remote-transition=idle],[data-remote-transition=name-out],[data-remote-transition=name-in]) .fd-remote-speed-scene *{animation-play-state:paused!important}
.fd-app-dark .fd-remote-connection-loader{--fd-speed-color:#81baff}
/* From Uiverse.io by anand_4957 — somente cores adaptadas para o FiveDesk */
.fd-remote-speeder { position: absolute; top: 1.25rem; margin-left: 0; left: 0; animation: fd-machine-speeder 0.4s linear infinite; }
.fd-remote-speeder > span { height: 0.3125rem; width: 2.1875rem; background: var(--fd-speed-color,#0879ff); position: absolute; top: -1.1875rem; left: 3.75rem; border-radius: 0.125rem 0.625rem 1px 0; }
.fd-remote-speed-base span { position: absolute; width: 0; height: 0; border-top: 0.375rem solid transparent; border-right: 6.25rem solid var(--fd-speed-color,#0879ff); border-bottom: 0.375rem solid transparent; }
.fd-remote-speed-base span:before { content: ""; height: 1.375rem; width: 1.375rem; border-radius: 50%; background: var(--fd-speed-color,#0879ff); position: absolute; right: -6.875rem; top: -1rem; }
.fd-remote-speed-base span:after { content: ""; position: absolute; width: 0; height: 0; border-top: 0 solid transparent; border-right: 3.4375rem solid var(--fd-speed-color,#0879ff); border-bottom: 1rem solid transparent; top: -1rem; right: -6.125rem; }
.fd-remote-speed-face { position: absolute; height: 0.75rem; width: 1.25rem; background: var(--fd-speed-color,#0879ff); border-radius: 1.25rem 1.25rem 0 0; transform: rotate(-40deg); right: -7.8125rem; top: -0.9375rem; }
.fd-remote-speed-face:after { content: ""; height: 0.75rem; width: 0.75rem; background: var(--fd-speed-color,#0879ff); right: 0.25rem; top: 0.4375rem; position: absolute; transform: rotate(40deg); transform-origin: 50% 50%; border-radius: 0 0 0 0.125rem; }
.fd-remote-speeder > span > span:nth-child(1), .fd-remote-speeder > span > span:nth-child(2), .fd-remote-speeder > span > span:nth-child(3), .fd-remote-speeder > span > span:nth-child(4) { width: 1.875rem; height: 1px; background: var(--fd-speed-color,#0879ff); position: absolute; animation: fd-machine-fazer1 0.2s linear infinite; }
.fd-remote-speeder > span > span:nth-child(2) { top: 0.1875rem; animation: fd-machine-fazer2 0.4s linear infinite; }
.fd-remote-speeder > span > span:nth-child(3) { top: 1px; animation: fd-machine-fazer3 0.4s linear infinite; animation-delay: -1s; }
.fd-remote-speeder > span > span:nth-child(4) { top: 0.25rem; animation: fd-machine-fazer4 1s linear infinite; animation-delay: -1s; }
@keyframes fd-machine-fazer1 { 0% { left: 0; } 100% { left: -5rem; opacity: 0; } }
@keyframes fd-machine-fazer2 { 0% { left: 0; } 100% { left: -6.25rem; opacity: 0; } }
@keyframes fd-machine-fazer3 { 0% { left: 0; } 100% { left: -3.125rem; opacity: 0; } }
@keyframes fd-machine-fazer4 { 0% { left: 0; } 100% { left: -9.375rem; opacity: 0; } }
@keyframes fd-machine-speeder { 0% { transform: translate(0.125rem, 1px) rotate(0deg); } 10% { transform: translate(-1px, -0.1875rem) rotate(-1deg); } 20% { transform: translate(-0.125rem, 0px) rotate(1deg); } 30% { transform: translate(1px, 0.125rem) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 0.1875rem) rotate(-1deg); } 60% { transform: translate(-1px, 1px) rotate(0deg); } 70% { transform: translate(0.1875rem, 1px) rotate(-1deg); } 80% { transform: translate(-0.125rem, -1px) rotate(1deg); } 90% { transform: translate(0.125rem, 1px) rotate(0deg); } 100% { transform: translate(1px, -0.125rem) rotate(-1deg); } }
.fd-remote-speed-lines { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.fd-remote-speed-lines span { position: absolute; height: 0.125rem; width: 20%; background: var(--fd-speed-color,#0879ff); }
.fd-remote-speed-lines span:nth-child(1) { top: 20%; animation: fd-machine-lf 0.6s linear infinite; animation-delay: -5s; }
.fd-remote-speed-lines span:nth-child(2) { top: 40%; animation: fd-machine-lf2 0.8s linear infinite; animation-delay: -1s; }
.fd-remote-speed-lines span:nth-child(3) { top: 60%; animation: fd-machine-lf3 0.6s linear infinite; }
.fd-remote-speed-lines span:nth-child(4) { top: 80%; animation: fd-machine-lf4 0.5s linear infinite; animation-delay: -3s; }
@keyframes fd-machine-lf { 0% { left: 200%; } 100% { left: -200%; opacity: 0; } }
@keyframes fd-machine-lf2 { 0% { left: 200%; } 100% { left: -200%; opacity: 0; } }
@keyframes fd-machine-lf3 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; } }
@keyframes fd-machine-lf4 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; } }

/* Connected border only: preserves the existing glass fill, radius and shadow.
   Inspired by dylanharriscameron / stupid-mole-90 (Uiverse). */
.fd-chats-stage .fd-remote-machine[data-maquina-id]::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;background:conic-gradient(from var(--fd-machine-border-angle,0deg),transparent 0deg,#9de5b440 70deg,#8cdaa8 105deg,transparent 155deg);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:opacity .3s}
@property --fd-machine-border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.fd-chats-stage .fd-remote-machine[data-maquina-id][data-connection-state=connected]::after{opacity:1;animation:fd-machine-connected-border 5s linear infinite}
@keyframes fd-machine-connected-border{to{--fd-machine-border-angle:360deg}}

/* 21/10/2026: o loading do acesso remoto anima mesmo com "reduzir movimento" do sistema — é o
   retorno de que a conexão está andando (Windows sem animações e sessões remotas ligam essa opção
   e o card ficava parado, sem a troca do nome e com as legendas sobrepostas). */

/* From Uiverse.io by Smit-Prajapati — chatty-pug-36, MIT. Scoped, proportional glass bloom. */
.fd-chats-stage .fd-remote-machine[data-maquina-id] .fd-remote-machine-controls>.fd-remote-machine-caption{display:none}
.fd-chats-stage .fd-remote-machine[data-maquina-id]{--fd-remote-photo-size:clamp(2.25rem,calc(var(--fd-remote-base-height,5.125rem) - 1.25rem),3.5rem)}
.fd-chats-stage .fd-remote-machine[data-maquina-id] .fd-remote-machine-controls>.fd-remote-machine-photo{opacity:1;overflow:visible;transition:none}
.fd-remote-machine{--fd-bloom-deep:#20845a;--fd-bloom-light:#94e8bb;--fd-bloom-front:#35b97a;--fd-bloom-top:#a4efc5}
.fd-remote-machine[data-availability=offline]{--fd-bloom-deep:#68737d;--fd-bloom-light:#cbd1d6;--fd-bloom-front:#87939e;--fd-bloom-top:#dce1e5}
.fd-remote-machine[data-availability=busy]{--fd-bloom-deep:#ad7a17;--fd-bloom-light:#ffe5a0;--fd-bloom-front:#d8a326;--fd-bloom-top:#ffe7a1}
.fd-remote-bloom{position:relative;display:block;width:var(--fd-remote-photo-size);height:var(--fd-remote-photo-size);transition:transform .2s ease-in-out;isolation:isolate}
.fd-remote-bloom-main{box-sizing:border-box;width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;display:grid;place-items:center;border:1px solid transparent;background:linear-gradient(135deg,#ffffff24,#ffffff02);transform:none}
.fd-remote-bloom-inner{width:48%;aspect-ratio:1;border-radius:50%;position:relative;box-shadow:-0.125rem 0.125rem 0.25rem #101b2830,inset 0 1px 1px #ffffff30;transition:transform .5s ease-in-out}
.fd-remote-bloom-back{position:absolute;inset:0;border-radius:50%;background:linear-gradient(60deg,var(--fd-bloom-deep),var(--fd-bloom-light))}
.fd-remote-bloom-front{position:absolute;inset:0.125rem;border-radius:50%;background:linear-gradient(60deg,var(--fd-bloom-front),var(--fd-bloom-top));display:grid;place-items:center}
.fd-remote-bloom-front svg{width:72%;height:72%;color:#f4fffa;opacity:1;transform:none;transition:opacity .2s}
.fd-remote-bloom-glass{position:absolute;inset:0;background:linear-gradient(135deg,#ffffff00 20%,#ffffff48 100%);mask-image:linear-gradient(to bottom,#000 30%,transparent 100%);transform:translateY(-50%);transform-origin:bottom center;transition:transform .5s ease-in-out}
.fd-remote-bloom [data-remote-symbol]{display:none}
.fd-remote-machine[data-availability=online] [data-remote-symbol=power],.fd-remote-machine[data-availability=busy] [data-remote-symbol=clock],.fd-remote-machine[data-availability=offline] [data-remote-symbol=power]{display:initial}
.fd-remote-machine-photo:not(:disabled):is(:hover,:focus-visible) .fd-remote-bloom{transform:scale(1.1)}
.fd-remote-machine-photo:not(:disabled):is(:hover,:focus-visible) .fd-remote-bloom-glass{transform:translateY(-40%)}
.fd-remote-machine-photo:not(:disabled):is(:hover,:focus-visible) .fd-remote-bloom-front svg{opacity:1;filter:none}
.fd-remote-machine-photo:not(:disabled):active .fd-remote-bloom{transform:scale(.9)}
.fd-remote-machine-photo:not(:disabled):active .fd-remote-bloom-inner{transform:scale(1.12)}
.fd-app-dark .fd-remote-bloom-main{background:linear-gradient(135deg,#ffffff14,#ffffff02)}
.fd-app-dark .fd-remote-bloom-inner{box-shadow:0 0.125rem 0.25rem #101b2830,inset 0 1px 1px #ffffff12}
.fd-app-dark .fd-remote-bloom-back{opacity:.55}
.fd-app-dark .fd-remote-bloom-front{inset:1px}
.fd-app-dark .fd-remote-bloom-glass{background:linear-gradient(135deg,#ffffff00 20%,#ffffff20 100%)}
@media(prefers-reduced-motion:reduce){.fd-remote-bloom,.fd-remote-bloom *{transition:none!important}}
/* Legenda da conexão no rodapé do loading (21/10/2026): 1–2 palavras + tempo correndo. Fica por cima,
   não captura clique e não mexe na animação do loading; cada troca repete a transição do card. */
.fd-remote-status{position:absolute;left:0.375rem;right:0.375rem;bottom:0.1875rem;z-index:3;display:flex;align-items:baseline;justify-content:center;gap:0.3125rem;height:1rem;overflow:hidden;pointer-events:none;color:#1d4f91;font:600 0.6875rem/1rem Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;white-space:nowrap}
.fd-remote-machine[data-remote-status=off] .fd-remote-status{visibility:hidden}
.fd-remote-status-texto{display:inline-block;transform-origin:left center;animation:fd-remote-status-entra .36s cubic-bezier(.22,1,.36,1) both}
.fd-remote-status-texto.is-saindo{position:absolute;animation:fd-remote-status-sai .32s cubic-bezier(.4,0,.2,1) both}
.fd-remote-status-tempo{font-weight:500;font-size:0.625rem;color:#5b6b82;font-variant-numeric:tabular-nums}
.fd-remote-status-tempo:empty{display:none}
.fd-remote-status[data-tipo=erro]{color:#c62f3e}
.fd-remote-status[data-tipo=sucesso]{color:#13865f}
@keyframes fd-remote-status-entra{from{opacity:0;transform:translateX(38%) skewX(-22deg) scaleX(1.5);filter:blur(0.25rem)}to{opacity:1;transform:none;filter:none}}
@keyframes fd-remote-status-sai{0%{opacity:1;transform:none;filter:blur(0)}65%{opacity:.3;transform:translateX(-14%) skewX(-13deg) scaleX(1.2);filter:blur(0.25rem)}100%{opacity:0;transform:translateX(-24%) skewX(-18deg) scaleX(1.35);filter:blur(0.375rem)}}
.fd-app-dark .fd-remote-status{color:#9cc8ff}
.fd-app-dark .fd-remote-status-tempo{color:#a9b4c4}
.fd-app-dark .fd-remote-status[data-tipo=erro]{color:#ff9aa8}
.fd-app-dark .fd-remote-status[data-tipo=sucesso]{color:#5fe0b1}

/* Legenda a 2 px do rodapé do card, por cima do loading e sem cortar o começo do texto (21/10/2026).
   A área útil da direita cresceu sem o card crescer: 3 px de cada lado do divisor e da margem direita. */
.fd-chats-stage .fd-remote-machine[data-maquina-id]{padding-right:0.1875rem;column-gap:0.1875rem;grid-template-columns:4.4375rem minmax(0,1fr)}
.fd-chats-stage .fd-remote-machine[data-maquina-id]>.fd-remote-machine-controls{padding-right:0.1875rem}
.fd-chats-stage .fd-remote-machine[data-maquina-id]>.fd-remote-machine-identity{margin-block:-0.5rem}
.fd-remote-status{left:0;right:0;bottom:0.125rem;z-index:5;justify-content:safe center}
/* Conexão nossa: botão vermelho com liga/desliga — o clique desconecta. */
.fd-remote-machine[data-availability=mine]{--fd-bloom-deep:#a8202d;--fd-bloom-light:#ffb0b7;--fd-bloom-front:#df3d4c;--fd-bloom-top:#ffc2c7}
.fd-remote-machine[data-availability=mine] [data-remote-symbol=power]{display:initial}
/* "Conectado há 00:12:34": o tempo corre na mesma cor e peso do texto, como uma frase só. */
.fd-remote-status.is-conectado .fd-remote-status-tempo{color:inherit;font-size:inherit;font-weight:inherit}